优势
通过双向绑定的方式，可以减少对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 插件，可以看到对应的作用域的数据。
