AngularJS 是一個 JavaScript 框架辩涝。它可通過 <script> 標簽添加到 HTML 頁面嵌屎。
（09年出的勾给，官網(wǎng)都不更新了，可老可老了哑舒，咱也不知道為啥還有人用還讓咱去學）
AngularJS 應用組成如下：
View(視圖), 即 HTML妇拯。
Model(模型), 當前視圖中可用的數(shù)據(jù)。
Controller(控制器), 即 JavaScript 函數(shù)洗鸵，可以添加或修改屬性越锈。
AngularJs常用的一些指令
ng-app 初始化一個ng應用程序
ng-init 初始程序數(shù)據(jù)
<div ng-app="" ng-init="name='weipingping'">
{{ name }}
</div>
ng-model 雙向數(shù)據(jù)綁定
ng-controller 指令定義了應用程序控制器。
控制器是 JavaScript 對象膘滨，由標準的 JavaScript 對象的構(gòu)造函數(shù) 創(chuàng)建
<body>
<div ng-app="app" ng-controller="myCtrl">
<input type="text" ng-model="one"/>
<input type="text" ng-model="two"/>
<hr/>
<h1>{{ one + two }}</h1>
</div>
</body>
<script>
//AngularJs模塊定義應用
var app = angular.module('app', []);
//AngularJs控制器控制應用
app.controller('myCtrl',function($scope) {
$scope.one = 'hello';
$scope.two = 'weipingping'
})
</script>
ng-repeat 循環(huán)遍歷數(shù)組或者對象
<div ng-app="" ng-init="names=['Weiping','ping']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<body>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ',' + x.country }}
</li>
</ul>
</div>
</body>
ng-bind 綁定元素
<div ng-app="" ng-init="num=[1,2,3,4,5]">
<h1 ng-bind="num[3]"><h1>
</div>
ng-show 屬性返回 true 的情況下顯示
<body>
<div ng-app="app" ng-controller="myCtrl">
<h1 ng-show="flag">魏萍萍</h1>
<h2 ng-show="!flag">萍萍魏</h2>
</div>
</body>
<script>
var app = angular.module("app",[]);
app.controller('myCtrl',function(){
flag = false;
})
</script>
<style>
h1{
color:red;
}
h2{
color:green;
}
</style>
AngularJs Scope作用域
ng中scope是應用在html和js之間的紐帶
scope 是一個 JavaScript 對象甘凭，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用火邓。
在ng創(chuàng)建控制器時丹弱，可以將$scope對象當作參數(shù)傳遞
<body>
<div ng-app="app" ng-controller="myCtrl">
<h1>{{ name }}</h1>
</div>
</body>
<script>
var app = angular.module('app',[]);
app.controller('myCtrl',function($scope) {
$scope.name = 'weipingping'
})
</script>
如果修改了視圖，模型和控制器也會相應更新
<body>
<div ng-app="app" ng-controller="myCtrl">
<h1>{{ name }}</h1>
<h1>{{ greeting }}</h1>
<button ng-click="change()">點擊一下</button>
</div>
</body>
<script>
var app = angular.module("app",[]);
app.controller('myCtrl',function($scope) {
$scope.name = 'weipingping';
$scope.change = function() {
$scope.greeting = 'hello' + $scope.name + '!'
}
})
</script>
$rootScope根作用域
$rootScope可用于整個應用中铲咨，是各個controller中scope的橋梁躲胳。用rootscope定義的值，可以在各個controller中使用
<body>
<div ng-app="app" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{ x }}------{{ lastname }}</li>
</ul>
</div>
</body>
<script>
var app = angular.module("app",[]);
app.controller('myCtrl',function($scope, $rootScope) {
$scope.names = ["Weiping","ping"];
$rootScope.lastname = 'pingpingwei';
})
</script>
AngularJs過濾器
ng中過濾器可以使用管道字符（ | ）添加到表達式和指令中
AngularJs中提供了幾種內(nèi)置的過濾方法
currency 將數(shù)字格式化為貨幣格式
filter 從數(shù)組中選擇一個子集
lowercase 格式化字符串為小寫
orderBy 根據(jù)某個表達式排列數(shù)組
uppercase 格式化字符串為大寫
currency
<body>
<div ng-app="app" ng-controller="myCtrl">
<input type="text" ng-model="quantity"/>
<input type="text" ng-model="price"/>
<h1>總價：{{ (quantity*price) | currency }}</h1>
</div>
</body>
<script>
var app = angular.module("app",[]);
app.controller('myCtrl',function($scope) {
$scope.quantity = '';
$scope.price = '';
})
</script>
uppercase lowercase
<body>
<div ng-app="app" ng-controller="myCtrl">
<h1>{{ firstname | uppercase }}</h1>
<h1>{{ firstname | lowercase }}</h1>
</div>
</body>
<script>
var app = angular.module("app",[]);
app.controller('myCtrl',function($scope) {
$scope.firstname = 'Weipingping';
$scope.lastname = 'Weipingping';
})
</script>
orderBy根據(jù)表達式的首字母排列數(shù)組
<body>
<div ng-app="app" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country' ">
{{ x.name + ',' + x.country }}
</li>
</ul>
</div>
</body>
<script>
var app = angular.module("app",[]);
app.controller('myCtrl',function($scope) {
$scope.names=[{"name":"weipingping","country":"Henan"},{"name":"pingpingwei","country":"Youtian"}]
})
</script>
自定義過濾器
<body>
<div ng-app="app" ng-controller="myCtrl">
<h1>{{ msg }}</h1>
<h1>{{ msg | reserve }}</h1>
</div>
</body>
<script>
var app = angular.module("app",[]);
app.controller('myCtrl',function($scope) {
$scope.msg="hello,weipingping"
})
app.filter("reserve", function(){
return function(val){
return val.split("").reverse().join("")
}
})
</script>
