angularJS 入門基礎(chǔ)
更新時間：2015年02月09日 11:14:21 投稿：hebedich
這篇文章主要介紹了angularJS 入門基礎(chǔ)的相關(guān)資料,需要的朋友可以參考下
angular
所有用到的庫, 全部用的CDN：
復(fù)制代碼 代碼如下:
.angular的數(shù)據(jù)綁定實例,這個是最基礎(chǔ)的,angular的所有枝葉全部從這里開始:.
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
angular最強大的東西,數(shù)據(jù)的綁定binding
</div>
<div class="panel-body">
<div id="bind" ng-controller="bf">
<input type="text" ng-model="data" />
{{data}}
<script>
app.controller("bf", function($scope) {
$scope.data = "testData";
//$scope.$apply();
});
</script>
</div>
</div>
</div>
</body>
</html>
通過angular,展示數(shù)組對應(yīng)的數(shù)據(jù);.
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
通過angular,展示數(shù)組對應(yīng)的數(shù)據(jù);
</div>
<div class="panel-body">
<div id="arr-bind" ng-app="arr-app" ng-controller="arrCon">
<style>
.s{
color:#f00;
}
li{
cursor: pointer;
}
</style>
<ul>
<li ng-repeat="i in lists" ng-click="bered($index)" ng-class="{s : $index == flag}">
{{i.name}}----{{i.age}}
</li>
</ul>
<script>
//angular.module("arr-app", []);
function arrCon($scope) {
$scope.flag = 0;
$scope.bered = function(i) {
$scope.flag = i;
};
$scope.lists = [
{name : "hehe",
age:10},
{
name : "xx",
age : 20
},
{
name : "yy",
age : 2
},
{
name : "jj",
age : 220
}
]
};
</script>
</div>
</div>
</div>
</body>
</html>
.數(shù)據(jù)過濾器的DEMO：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
數(shù)據(jù)過濾器;
</div>
<div class="panel-body" ng-controller="filte">
{{sourCode}}
<br>
{{sourCode | up}}
</div>
<script>
function filte($scope) {
$scope.sourCode = "hehe lala dudu oo zz";
};
app.filter("up" ,function() {
return function(ipt) {
return ipt.replace(/ (\w)/g,function($0,$1) {
return " "+$1.toUpperCase();
});
}
});
</script>
</div>
</body>
</html>
.factory工廠, $provider, service等等都是一樣樣的, 不要感覺很難, 其實就是看出一個數(shù)據(jù)模型或者實例就好了;：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div id="factory" class="panel panel-default">
<div class="panel-heading">
angular中的factory就相當(dāng)于一個公用的實例方法,可以理解為一個多個控制器都可以用的函數(shù);
</div>
<div class="panel-body" ng-controller="factory">
{{json}}
<script>
app.factory("ff", function() {
return {
"noting" : "json"
};
});
app.controller("factory", function($scope, ff) {
$scope.json = ff;
});
</script>
</div>
</div>
<div class="panel panel-default">
<div class="panel-title">
angular的指令;
</div>
<div class="panel-body">
<heh>do you content for?</heh>
<script>
app.directive("heh", function() {
return {
restrict : "AE",
replace : true,
transclude : true,
template : '<div> <button class="btn-danger" ng-transclude></button></div>'
};
})
</script>
</div>
</div>
</body>
</html>
.ng-switch指令的使用(這個跟模板很想的,就是我們常見的點擊隱藏和顯示Tab插件的angular首先):：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
ng-switch的使用
</div>
<div class="panel-body" ng-controller="sw">
<div ng-init="a=2">
<ul ng-switch on="a">
<li ng-switch-when="1">1</li>
<li ng-switch-when="2">2</li>
<li ng-switch-default>other</li>
</ul>
</div>
<div>
<button ng-click="a=1" class="btn btn-primary">test</button>
<button ng-click="a=2" class="btn btn-info">test</button>
<button ng-click="a=3" class="btn btn-warning">test</button>
</div>
</div>
<script type="text/javascript">
app.controller("sw", function($scope) {
});
</script>
</div>
</body>
</html>
ng-src和ng-href;
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
ng-src和ng-href的使用(如果使用src或者href的話,HTML初始化的時候就會加載,肯定是不行的)
</div>
<div class="panel-body" ng-controller="srcCon">
<a ng-href="{{logo}}" >
<img ng-src="{{logo}}" />
</a>
</div>
<script type="text/javascript">
app.controller("srcCon", function($scope) {
$scope.logo = " });
</script>
</div>
</body>
</html>
如何操作頁面的樣式,這個直接改綁定的數(shù)據(jù)模型就好了：
復(fù)制代碼 代碼如下:
<div class="panel panel-default">
<div class="panel-heading">
angular對樣式進行操作;(jQ是手動選擇元素對元素樣式進行操作,angular提供了一種更屌的方法,把元素的屬性賦值給一個變量,你只要改變這個變量即可)
</div>
<div class="panel-body">
<hehe id="wh" ng-style="{width: w + 'px', height: h + 'px', backgroundColor: '#364'}">
hehe--o(^▽^)o哇;
</hehe>
</div>
<script type="text/javascript">
app.directive("hehe", function() {
function compile() {
};
return {
link : function($scope, $element) {
var obj = angular.element($element);
//obj.find不好用;
var add = obj[0].getElementsByClassName("add")[0];
var reduce = obj[0].getElementsByClassName("reduce")[0];
angular.element(add).bind("click", function(){
$scope.h = $scope.h+10;
apply();
})
angular.element(reduce).bind("click", function(){
$scope.h = $scope.h-10;
apply();
});
function apply() {
$scope.$apply();
}
return compile;
},
controller : function($scope) {
$scope.w = 200;
$scope.h = 50;
//$scope.$apply();
},
restrict: 'AE',
replace : true,
scope : "=ng-style",
transclude : true,
template : '<div><div ng-transclude></div><button class="btn btn-default add">+</button><button class="btn btn-default reduce">-</button></div>'
}
})
</script>
</div>
angular中的模板如何使用,這個要配合路由器使用比較叼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
使用模板
</div>
<div class="panel-body" ng-controller="ngTpl">
<!---這個type要聲明準(zhǔn)確-->
<script type="text/ng-template" id="tpl">
{{ver}}
</script>
<!---tpl是一個定值不是變量，要給變量要在scope中進行定義---->
<div ng-include src="'tpl'"></div>
<div class="well">
<button ng-click="chan()">change</button>
</div>
</div>
<script type="text/javascript">
app.controller("ngTpl", function($scope) {
function hehe(str) {
str = _.shuffle(str);
return str.join("")
};
$scope.ver = "var——ver--heehe";
$scope.chan = function() {
$scope.ver = hehe( $scope.ver );
};
});
</script>
</div>
</body>
</html>
如何使用$scope.$watch實時改變綁定界面的模板:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
<span class="label label-danger">update</span>angular的通知數(shù)據(jù)更新三種方式$scope.$digest(),$scope.$apply(),以及通過$scope.$watch監(jiān)聽進行更新;
</div>
<div class="panel-body" ng-controller="apply">
{{hehe}}
<input type="text" ng-model="m0" />
<div class="well">
the value set by $scope.$watch ==>> {{wat}}
</div>
<br>
<button ng-click="up()" class="btn btn-default">
applay;
</button>
</div>
<script type="text/javascript">
app.controller("apply", function($scope) {
$scope.hehe = "lll________xxx";
$scope.m0 = 1;
ss = $scope;
$scope.up = function() {
$scope.hehe = $scope.m0;
//可以,但是給了提示的報錯, 誰知道為甚毛?
//$scope.$apply();
$scope.$digest();
};
//給$scope.m0變量是無效的;
$scope.$watch("m0", function(va) {
$scope.wat = va;
})
});
</script>
</div>
</body>
</html>
angular中自己定義的工具方法
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
angular中的工具方法列表
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="###">angular.bind</a></li>
<li role="presentation"><a href="###">angular.bootstrap</a></li>
<li role="presentation"><a href="###">angular.copy</a></li>
<li role="presentation"><a href="###">angular.element</a></li>
<li role="presentation"><a href="###">angular.equals</a></li>
<li role="presentation"><a href="###">angular.extend</a></li>
<li role="presentation"><a href="###">angular.forEach</a></li>
<li role="presentation"><a href="###">angular.fromJson</a></li>
<li role="presentation"><a href="###">angular.identity</a></li>
<li role="presentation"><a href="###">angular.injector</a></li>
<li role="presentation"><a href="###">angular.isArray</a></li>
<li role="presentation"><a href="###">angular.isDate</a></li>
<li role="presentation"><a href="###">angular.isDefined</a></li>
<li role="presentation"><a href="###">angular.isElement</a></li>
<li role="presentation"><a href="###">angular.isFunction</a></li>
<li role="presentation"><a href="###">angular.isNumber</a></li>
<li role="presentation"><a href="###">angular.isObject</a></li>
<li role="presentation"><a href="###">angular.isString</a></li>
<li role="presentation"><a href="###">angular.isUndefined</a></li>
<li role="presentation"><a href="###">angular.lowercase</a></li>
<li role="presentation"><a href="###">angular.module</a></li>
<li role="presentation"><a href="###">angular.noop</a></li>
<li role="presentation"><a href="###">angular.reloadWithDebugInfo</a></li>
<li role="presentation"><a href="###">angular.toJson</a></li>
<li role="presentation"><a href="###">angular.uppercase</a></li>
</ul >
<div class="well">
這些工具方法跟其他庫差不多;
angular.element是anguarLite選擇元素的小JQ;
<br>
angular.module是模塊元素的方法;
</div>
</div>
</div>
</body>
</html>
ng-transclude的使用(這個是官方的案例)，代碼如下:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
ng-transclude的使用(這個是官方的案例):
</div>
<div class="panel-body" ng-controller="ExampleController">
<div>
<input ng-model="title"><br>
<textarea ng-model="text"></textarea> <br/>
<pane title="{{title}}">{{text}}</pane>
</div>
</div>
<script type="text/javascript">
app.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div style="border: 1px solid black;">' +
'<div style="background-color: gray">{{title}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller('ExampleController', ['$scope', function($scope) {
$scope.title = 'Lorem Ipsum';
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
</script>
</div>
</body>
</html>
一下驗證郵箱準(zhǔn)確性的例子:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法參考官方的使用,要用查API就好了,(官方的要FQ哦;)
</div>
<script src=">
<div class="panel-body" ng-controller="fromvaild">
如果不用ng-message組件的錯誤提示如下;
<form name="userForm">
<div class="field">
<label for="emailAddress">Enter your email address:</label>
<input type="email" name="emailAddress" ng-model="data.email" required />
<!-- this stuff is WAY too complex -->
<div ng-if="userForm.emailAddress.$error.required" class="error">
You forgot to enter your email address...
</div>
<div ng-if="!userForm.emailAddress.$error.required &&
userForm.emailAddress.$error.email" class="error">
You did not enter your email address correctly...
</div>
</div>
<input type="submit" />
</form>
<br>
<a href=" </div>
<script type="text/javascript">
app.controller("fromvaild", function($scope) {
//$scope.myField.$error = { minlength : true, required : false };
})
</script>
</div>
</body>
</html>
setTimeout和setInterval都是經(jīng)過angular包裝過的，返回的是延遲對象的實例:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src=">
<script src=">
<link href=" <script src=" </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
$timeout和$interval,這兩個服務(wù);
</div>
<div class="panel-body" ng-controller="st">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">setInterval</h4>
<p class="list-group-item-text">
$interval(fn, delay, [count], [invokeApply]);
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">timeout</h4>
<p class="list-group-item-text">
$timeout(fn, [delay], [invokeApply]);
</p>
</a>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<button class="btn-default btn" ng-click="prog()">
start
</button>
</div>
<script type="text/javascript">
app.controller("st", function($scope,$element,$interval) {
var $el = $($element[0]).find(".progress-bar");
console.log(arguments);
//使用angular.element選中的元素用find找不到東西;
$scope.prog = function() {
var df = $interval(function() {
var val = parseInt($el.html())+4;
if(val>=104) $interval.cancel(df);
$el.html( val+"%" ).width(val+"%");
},100);
console.log(df)
//console.log(aa = $interval)
};
});
</script>
</div>
</body>
</html>
相關(guān)文章
AngularJS實現(xiàn)的select二級聯(lián)動下拉菜單功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的select二級聯(lián)動下拉菜單功能,結(jié)合完整實例形式分析了AngularJS實現(xiàn)二級聯(lián)動菜單的具體操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-10-10
這篇文章主要和大家一起學(xué)習(xí)Angularjs分頁指令，代碼很詳細，文章結(jié)構(gòu)緊湊，感興趣的小伙伴們可以參考一下2016-07-07
使用AngularJs進行開發(fā)，在項目中，經(jīng)常會遇到上傳圖片后，需在一旁預(yù)覽圖片內(nèi)容，怎么實現(xiàn)這樣的功能呢？今天小編給大家分享AugularJs上傳前預(yù)覽圖片的實現(xiàn)代碼，需要的朋友參考下吧2017-01-01
angular4應(yīng)用中輸入的最小值和最大值的方法
這篇文章主要介紹了angular4應(yīng)用中輸入的最小值和最大值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家介紹了Angular.js實現(xiàn)掃碼槍掃碼并生成二維碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本篇文章主要介紹了angular 基于ng-messages的表單驗證實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了angular中如何綁定iframe中src的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了AngularJS表單驗證功能,結(jié)合具體實例形式分析了AngularJS表單驗證的操作步驟、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2017-05-05
Angular-UI Bootstrap組件實現(xiàn)警報功能
這篇文章主要介紹了Angular-UI Bootstrap組件實現(xiàn)警報功能,對Angular.js services的學(xué)習(xí)有所幫助，需要的朋友可以參考下2018-07-07
這篇文章主要給大家介紹了關(guān)于Angular進行簡單單元測試的實現(xiàn)方法，文中僅用了幾行代碼，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08