Angular单页应用&AngularJS内部实现原理
Posted 淡烘糕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular单页应用&AngularJS内部实现原理相关的知识，希望对你有一定的参考价值。
回顾
- 自定义指令
- 登录后获取登录信息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中的属性都会放在监听列表中，只有页面上绑定的才会放入监听列表。
-
监听列表的作用就是放置所有绑定在页面上的属性
1 $scope.$watch("name",function(a,b){ 2 console.log("name is changed"); 3 }); 4 //里边两个参数，a是修改之后的值，b是修改之前的值
-
-
$digest 循环对象
- 循环监听列表中的数据是否发生变化，则把$watch中的所有数据拿来循环，一旦有监听对象发生变化就调用回调函数进行DOM操作。
- 直到没有数据变化为止。
- 为了防止无限循环，在设计angular的过程中设定了循环次数最多10次，如果超过10次则会报错。
- 这种机制就要求不要进行过多的数据联动。
- 这个机制有一个前提：循环列表中的对象在Angular的上下文环境中。
-
用$apply可以让代码回到Angular的上下文环境
1 setTimeout(function(){ 2 $scope.$apply(function(){ 3 $scope.name = "changed"; 4 }); 5 }, 1000);
以上是关于Angular单页应用&AngularJS内部实现原理的主要内容，如果未能解决你的问题，请参考以下文章
Angular JS 仿拉勾网 WebApp 开发移动端单页应用
Angular JS仿拉勾网 WebApp 开发移动端单页应用