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

最新推荐文章于 2020-10-12 19:26:15 发布

原创最新推荐文章于 2020-10-12 19:26:15 发布 · 336 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用Angular结合UI-router插件实现单页应用。详细讲述了配置不同路由的方法及Angular内部实现原理，包括$watch、$digest和$apply对象的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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