Angular单页应用&AngularJS内部实现原理

来源：互联网发布：2016淘宝店铺怎么装修编辑：程序博客网时间：2024/06/05 23:53

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);

阅读全文

0 0