四大特性
- 使用MVC设计模式
- 双向数据绑定
- 依赖注入
- 采用模块化设计
一、控制器的作用域
- 每次调用ng-controller都会创建一个新的Controller对象
- 每个Controller对象都有唯一的$scope对象，表示当前控制器对象的有效范围/作用域
- 声明在某个$scope中的模型数据，一般情况下不能被其他的控制器所使用
- 若想在多个控制器间共享数据、传递数据，可以声明在根作用域--$rootScope--每个Angular应用只有一个唯一的$rootScape对象
- 控制器的本质用途：用于划分一个大型页面中的不同的DIV块- 每个块中都有自己专用的数据，以及可以跟其他块共享的数据
二、双向数据绑定
- 方向1 Model绑定到view，此后不论何时只要Model发生改变，数据会立即自动同步更新
实现方法：{{}} ng-bind ng-if ng-Repeat 几乎所有的显示数据的指令都实现了方向1的绑定
实例：
1.创建一个点击计数器，有一个按钮，只要点击一次，立即显示出点击次数
2.轮播图的前进后退按钮
<--html代码--!>
点击次数：{{count}}
轮播图
//js代码部分
计数器和轮播图
- 方向2 view绑定到model，把视图中可以修改的HTML元素，即表单控件的值绑定到模型变量上。此后，只要用户修改了表单控件的值后，后台模型变量的值会立即随之改变
实现： 只有ngmodel指令可以，为了监视到Model变量真的被改变了可以使用$scope.$watch()函数对Model数据的值进行监视,
实例：将用户名和密码实时显示出来，复选框显示婚否，单选框显示当前选择的性别，下拉框显示选择的城市，简易版购物车计算器计算实时总价
单行文本输入框
名字：
{{name}}
密码：
{{password}}
复选框
婚否：{{marry}}
单选框
男
女
{{sex}}
下拉框
{{city}}
简易版购物车计算器
单价：
数量：
总价：{{price*number}}
angular.module("myModule",["ng"]).controller("myControl",function ($scope){
$scope.$watch("name+password",function() { //两个监听对象之间用+连接即可
console.log($scope.name);
console.log($scope.password);
})
})
三、依赖注入
被动注入方式（Injection）方式
angular.module("myModule",["ng]).controller("myControl",function($scope,$interval));
angular中的ngController指令在实例化控制器对象时，会根据指令的形参名，创建出控制器所依赖的对象，并注入进来---依赖注入（Dependency Injection）
注意：
- angular在创建控制器对象时，会根据形参列表中的每个形参依赖的对象的名称来创建，故控制器声明函数不能声明angular无法识别的形参名 angular只提供了一种依赖注入方式-根据形参名来注入依赖的对象
- 若项目js文件使用了类似yuicompressor等压缩程序，默认会把函数的形参名精简为一个字母的形式，会导致Angular的依赖注入失败
解决办法
module.controller("控制器名"，[
"$scope",
"$interval",
"$http",
function(a,b,c){
}
]);
- 可以被注入的对象-所有的service对象都可以被注入
- $rootScope 在多个控制器间共享数据的服务
- $interval 提供周期性定时器服务
- $timeout 提供一次性定时器服务
- $log 体用五个基本的日志输出服务
- $http 提供异步HTPP请求（AJAX）的服务
$http{method:"GET",url:""}.then(fun).catch(fun) $http.get("url").then(fn); $http.post("url",data).then(fn);
- $location
实例：使用定时器interval实现秒钟
{{num}}
#####ng模块中提供的过滤器
-
filter:把model中的数据在显示时以某种特定的格式来呈现
-
lowercase
语法：{{表达式 | lowercase}
-
uppercase
语法：{{表达式 | uppercase}
-
number
语法：{{表达式 | number}}
{{表达式 | number:小数位数}} -
currency
{{表达式 | currency}}
{{表达式 | currency:'货币符号'}} -
date
{{表达式 | date }}
{{表达式 | date | "yyyy-MM-dd"}}
-
#####四、单页应用
angularjs提供的模块---ngroute
1）概念：
route：路由，通过某条线路找到目标内容
ngroute：模块的目标，就是根据浏览器url中的一个特殊的地址标记，查到到该标记所对应的模板页面，并异步加载到ng-view上
2）使用步骤：
1) 创建唯一完整的HTML页面，其中声明一个容器，ngview指令。引入angular.js angular-routejs
2）创建多个模板页面(习惯上放在一个特别的目录下，如tpl)
3) 创建Module,声明依赖于ng/ng-route两个模板
var app = angular.module("module",["ng","ngRoute"]);
4）在Module中配置路由字典
app.config(function($routeProvider){
$routeProvider.when("/start",{
templateUrl:xxx,
controller:"" //此处声明的控制器可供当前目标页面所有元素使用
})
})
5）使用浏览器做测试
http:IP地址/index.html#/路由地址
实例
//singlePage.js文件内容
var module = angular.module("myModule",["ng","ngRoute"]);
module.config(function ($routeProvider){
$routeProvider.when("/page1",{
templateUrl:"temp/page1.html"
}).when("/page2",{
templateUrl:"temp/page2.html"
})
})
ngroute中的页面跳转有两种方式：
- 通过超链接访问href="#/main"
- 通过js跳转$location.path("/main")