優勢
通過雙向綁定的方式，可以減少對html 的 dom元素的操作，減少代碼。把數據跟頁面展示隔離，代碼邏輯清晰。
雙向綁定概念
AngularJS的數據綁定是數據模型(model)與視圖(view)組件的自動同步。Angular的實現方式允許你把應用中的模型看成單一數據源。而視圖始終是數據模型的一種展現形式。當模型改變時，視圖就能反映這種改變，反之亦然。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngular">
<input ng-model="greeting.text"/>
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>
var myModule = angular.module('MyModule', []);
myModule .controller('HelloAngular', ['$scope',
$scope.greeting = {
text: 'Hello'
};
]);
AngularJS的scope中的數據模型綁定了的前臺View中，那么前臺的數據變化是否會影響到數據模型，通過改變input中的值。
我們可以通過對html元素的值跟js的變量進行綁定，通過操作js對象的值，達到html頁面的變化。
作用域
AngularJs中的$scope對象是模板的域模型,也稱為作用域實例.通過為其屬性賦值,可以傳遞數據給模板渲染。 每個$scope都是Scope類的實例,Scope類有很多方法,用于控制作用域的生命周期、提供事件傳播功能,以及支持模板的渲染等。 AngularJs的每個應用程序都有一個$rootScope,它是其他所有作用域的父作用域,它的作用范圍從包含ng-app指令的HTML元素開始.它是在新應用啟動時自動創建。
會創建新的子作用域，并且進行原型繼承： ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: true創建directive
以下方式會創建新的獨立作用域，不會進行原型繼承：用scope: { ... }創建directive。這樣創建的作用域被稱為"Isolate"作用域
scope.$parent指向scope的父作用域；
scope.$$childHead指向scope的第一個子作用域；
scope.$$childTail指向scope的最后一個子作用域；
scope.$$nextSibling指向scope的下一個相鄰作用域；
scope.$$prevSibling指向scope的上一個相鄰作用域；通過瀏覽器的控制臺可以清晰的看到作用域之間的關系
controller 概念
在angularJS中，controlle是一個javascript函數/類，用于操作作用域中，各個對象的初始狀態以及相應的行為。
- html 寫法
<body ng-app="Hello">
<p> {{name}}</p>
<div ng-controller="helloCtrl">
{{name}}
</div>
</body>
- js寫法
推薦這種寫法，后面對js文件進行壓縮才不會報錯。
app.controller('helloCtrl',['$scope', function ($scope) {
$scope.name = "菲爾";
}]);
service
它是一個單例對象或函數，對外提供特定的功能。它與我們自己定義一個function然后在其他地方調用不同，因為服務被定義在一個模塊中，所以它的作用范圍是可以被我們來管理的，ng避免全局變量污染意識是非常強的。有三種不同的寫法，下面列出常用的一種寫法：表示helloService 是服務于app模塊的。
app.service('helloService',function(){
return{
message:'this is helloService'
}
})
需要引用的時候，只要把helloService 傳入就可以用的：
app.controller('helloCtrl',['$scope', 'helloService',function ($scope,helloService) {
$scope.name = helloService.message;
}]);
基本標簽使用
ng-app
告訴Angular他應該管理頁面的那一部分，可以放在html元素上也可以放在div等標簽上
<html ng-app="problem">
ng-controller
控制器，通過在body標簽上包含一個控制器，則可以管理body標簽之間的任何東西，也可以放在div上，來控制這一個div上的任何東西
<body ng-controller="problemController">
ng-repeat
數組中每個元素進行for循環
<tr ng-repeat="info in problem.infos">
<td>
<div>
<p>{{info.ClientOrgName}}</p>
<p>({{info.ClientPerson}} {{info.ClientPhone}})</p>
</div>
</td>
<td>{{info.BusinessName}}</td>
<td>
<a href="" ng-click="problem.viewProblemDepict($index)">{{info.ProblemDepict}}</a>
</td>
<td>{{info.CreatePerson}}</td>
<td>
<div ng-if="info.State==3"></div>
<div ng-else>{{info.RealName}}</div>
</td>
<td>
<div ng-if="info.State==1">未解決</div>
<div ng-if="info.State==2">已解決</div>
<div ng-if="info.State==3">完成</div>
</td>
</tr>
ng-model
進行雙向綁定
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-model directive</title>
</head>
<body ng-controller="HelloController">
<div>
<p>雙向綁定</p>
<input ng-model="greeting">
<p>Hello {{greeting || "World"}}</p>
<button ng-click="init()">重置</button>
<hr>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
function HelloController($scope) {
$scope.init = function() {
$scope.greeting = "Hello";
}
}
</script>
</body>
</html>
ng-bind 和 {{}}
進行單項綁定，從scope-->html，當變量發生變化，html頁面會自動變化。
ng-class
可以通過變量控制樣式的顯示。
function ctrl($scope) {
$scope.isSelected = true;
}
<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>
ng-select ，ng-option
下拉框的選擇的標簽
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title>select</title>
<script src="JS/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('selectController', function ($scope) {
$scope.mycity = '北京';
$scope.Cities = [{ id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '廣州' }];
});
</script>
</head>
<body>
<div ng-controller="selectController">
<select ng-model="mycity" ng-options="city for city in Cities"></select>
</div>
</body>
</html>
ng-click,ng-change 事件方法
這個跟原生的js的調用方式一樣
ng-src、ng-href
當對應的圖片，地址內容是包括了變量，需要用到這兩個屬性，要不會報404的錯誤。
過濾器 filter
uppercase|lowercase:大小寫轉換過濾
json:json格式過濾
date:日期格式過濾
number:數字格式過濾
currency:貨幣格式過濾
filter:查找
limitTo：字符串對象截取
orderBy:對象排序
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基礎</title>
</head>
<body>
<div ng-app="myApp">
<!-- 向表達式添加過濾器：可以通過一個管道字符(|)和一個過濾器添加到表達式中-->
<p>將字符串轉換為大小寫：</p>
<div ng-controller="uppercaseController">
<p>姓名為 {{ person.lastName | uppercase }}</p>
</div>
<div ng-controller="lowercaseController">
<p>姓名為 {{ person.lastName | lowercase }}</p>
</div>
<p>貨幣過濾：</p>
<div ng-controller="costController">
數量：<input type="number" ng-model="quantity">
價格：<input type="number" ng-model="price">
<p>總價 = {{ (quantity * price) | currency }}</p>
{{250 |currency:"RMB ￥"}}
</div>
<!-- 向指令添加過濾器：可以通過一個管道字符(|)和一個過濾器添加到指令中-->
<p>按國家的字母順序排序對象：</p>
<div ng-controller="namesController">
<p>循環對象：</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<!--json格式過濾-->
{{jsonText | json}} <br/>
<!--date格式過濾-->
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</span><br/>
<!--number格式過濾-->
{{1.2345678 |number:1}}<br/>
<!--字符串截取-->
{{ "i love tank" | limitTo:6 }}<br/>
{{ "i love tank" | limitTo:-6 }}<br/>
<!--對象排序：降序-->
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}<br/>
<!--對象排序：升序-->
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
</div>
<p>按輸入的字母顯示對象：</p>
<div ng-controller="namesFilterController">
<p>輸入過濾：</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country':true">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
<p>name篩選：</p>
<ul>
<li ng-repeat="x in names | filter:{'name':name} | orderBy:'country':true">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'sunm'} }}
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',[]);
myApp.controller('uppercaseController',function($scope){
$scope.person = {
firstName: "John",
lastName: "Doe"
};
});
myApp.controller('lowercaseController',function($scope){
$scope.person = {
firstName: "John",
lastName: "Doe"
};
});
myApp.controller('costController',function($scope){
$scope.quantity = 1;
$scope.price = 9.99;
});
myApp.controller('namesController',function($scope){
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
$scope.jsonText={foo:"bar",baz:23};
});
myApp.controller('namesFilterController',function($scope){
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>
</body>
</html>
自定義標簽
var myApp = angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope:{},
templateUrl:function(){
return "";
},
controller:function(){
}
};
})
####### restrict：
該屬性用于定義指令以什么形式被使用，這是一個可選參數，本文開頭定義的指令用的也是A，其實該選項默認為A。
也就是元素（E）、屬性（A）、類（C）、注釋（M）
####### replace：
默認值為false，以文章開頭定義的指令為例，假設我們這樣調用了指令
<my-directive></my-directive>
replace為true時，輸出:
<p>Kavlez</p>
replace為false時，輸出:
<my-directive><p>Kavlez</p></my-directive>
####### scope:(Boolean/Object)
默認為false，true時會從父作用域繼承并創建一個自己的作用域.
如果是一個對象的話，是進行了作用域的隔離，可以通過下面的例子看一下，是怎么關聯：
angular.module("MyApp", [])
.controller("MyController", function ($scope) {
$scope.name = "dreamapple";
$scope.age = 20;
$scope.changeAge = function(){
$scope.age = 0;
}
})
.directive("myDirective", function () {
var obj = {
restrict: "AE",
scope: {
name: '@myName',
age: '=',
changeAge: '&changeMyAge'
},
replace: true,
template: "<div class='my-directive'>" +
"<h3>下面部分是我們創建的指令生成的</h3>" +
"我的名字是：<span ng-bind='name'></span><br/>" +
"我的年齡是：<span ng-bind='age'></span><br/>" +
"在這里修改名字：<input type='text' ng-model='name'><br/>" +
"<button ng-click='changeAge()'>修改年齡</button>" +
" </div>"
}
return obj;
});
<div ng-app="MyApp">
<div class="container" ng-controller="MyController">
<div class="my-info">我的名字是：<span ng-bind="name"></span>
<br/>我的年齡是：<span ng-bind="age"></span>
<br />
</div>
<div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div>
</div>
</div>
@
這是一個單項綁定的前綴標識符
使用方法：在元素中使用屬性，好比這樣<div my-directive my-name="{{name}}"></div>，注意，屬性的名字要用-將兩個單詞連接，因為是數據的單項綁定所以要通過使用{{}}來綁定數據。
=
這是一個雙向數據綁定前綴標識符
使用方法：在元素中使用屬性，好比這樣<div my-directive age="age"></div>,注意，數據的雙向綁定要通過=前綴標識符實現，所以不可以使用{{}}。
&
這是一個綁定函數方法的前綴標識符
使用方法：在元素中使用屬性，好比這樣<div my-directive change-my-age="changeAge()"></div>，注意，屬性的名字要用-將多個個單詞連接。
如果需要傳入參數的時候，需要在標簽里面入參數傳入一個對象{name:""},
在 html里面的綁定的方法寫入這個key值，例如：<div my-directive change-my-age="changeAge(name)"></div>
####### templateUrl:
通過URL請求一個模板。 String類型時，templateURL自然是一個URL。 Function類型時返回一段字符串作為模板URL
####### controller:
這個是把標簽的一些邏輯通過控制器進行處理。
調試插件
firefox瀏覽器可以安裝 firebug,angScope 插件，可以看到對應的作用域的數據。
