回顾
- 自定义指令
- 登录后获取登录信息session
- 首先在登录验证的时候保存一个user
- 在学生管理页面中运用ajax调用获取到登录的用户信息
- 对注销按钮添加点击事件：调用ajax在表现层给user赋值为null
Angular实现单页应用
angular中实现单页应用是运用了UI-router插件
- 路由
- 后台中的路由是用来配置路径，分配请求的方法；
- angular中的路由也是同样的原理，通过导入ui-router插件，在main.js中配置不同的路由
- 实现方法
-
先导入ui-router文件
var mainApp = angular.module("mainApp",["ui-router","regApp","loginApp","studentApp"]);
mainApp.config(function($urlRouterProvider,$stateProvider){
$urlRouterProvider.when("","/reg");
$stateProvider.state("reg",{
url:"/reg", //路由匹配的路径
templateUrl:"modules/reg/reg.html", //文件模板路径
controller:"RegController"
}
} //在html中的代码
<body>
<div ui-view><div>
<body>
-
Angular内部实现原理
angular的实现原理主要是利用了三个对象：$watch,$digest,$apply;
-
$watch 监听（列表）对象（类数组）
所有页面上绑定的属性都会放在监听列表中，并不是所有$scope中的属性都会放在监听列表中，只有页面上绑定的才会放入监听列表。
-
监听列表的作用就是放置所有绑定在页面上的属性
$scope.$watch("name",function(a,b){
console.log("name is changed");
});
//里边两个参数，a是修改之后的值，b是修改之前的值
-
$digest 循环对象
- 循环监听列表中的数据是否发生变化，则把$watch中的所有数据拿来循环，一旦有监听对象发生变化就调用回调函数进行DOM操作。
- 直到没有数据变化为止。
- 为了防止无限循环，在设计angular的过程中设定了循环次数最多10次，如果超过10次则会报错。
- 这种机制就要求不要进行过多的数据联动。
- 这个机制有一个前提：循环列表中的对象在Angular的上下文环境中。
-
用$apply可以让代码回到Angular的上下文环境
setTimeout(function(){
$scope.$apply(function(){
$scope.name = "changed";
});
}, 1000);