AngularJS自学之路——知识点记录（一）

时间：2022-11-28 18:56:20


AngularJS（以下知识点摘抄自《AngularJS权威教程》一书。）

1、ng-app指令标记了AngularJS脚本的作用域；

2、AngularJS应用引导过程有3个重要点：

1）注入器（injector）将用于创建此应用程序的依赖注入（dependency injection）；

2）注入器将会创建根作用域作为我们应用模型的范围；

3）AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。

3、在AngularJS中，一个视图是模型通过HTML、模板渲染之后的映射。

4、当应用启动之后，会有一个根作用域被创建出来，而控制器的作用域是根作用域的一个典型后继。

5、AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。

6、任何一个独立视图组件中的值都是动态替换的。

7、自动数据绑定使我们可以将视图理解为模型状态的映射。

8、AngularJS会记录数据模型所包含的数据在任何特定时间点的值，而不是原始值。当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

这个事件循环会调用$digest()循环。这个过程被称为脏检查。

9、为了表示内部和内置的库函数，Angular使用$预定义对象。只要遇到$符号，你都可以只把它看作一个Angular对象。

10、数据模型对象（model object）是指$scope对象。

11、DOM元素上的ng-controller声明所有被它包含的元素都属于某个控制器。

12、通常被认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。

13、AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模板中的对象列表。

调用这个方法时如果只传递一个参数，就可以用它来引用模块。

14、$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

15、作用域提供了监视数据模型变化的能力。它允许开发者使用其中的apply机制，将数据模型的变化在整个应用范围内进行通知。

16、将应用的业务逻辑都放在控制器中，而将相关数据都放在控制器的作用域中，这是非常完美的架构。

 

案例：

demo-1.0.html 数据绑定和第一个AngularJS Web应用

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>数据绑定和第一个AngularJS Web应用</title>
</head>
<body>

  <div ng-controller="MyCtrl">
    <h1>{{ clock }}</h1>
  </div>



  <script src="assets/angularjs/angular-1.3.0.js"></script>
  <script>
    var myApp = angular.module('MyApp', []);
    myApp.controller('MyCtrl', ['$scope', '$timeout', function($scope, $timeout) {
      var updateClock = function() {
        $scope.clock = new Date();
        $timeout(function() {
          updateClock();
        }, 1000);
      }

      updateClock();
    }]);
  </script>
</body>
</html></span>



 

demo-1.1.html 数据绑定的最佳实践

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>数据绑定的最佳实践</title>
</head>
<body>

  <div ng-controller="MyCtrl">
    <h1>{{ clock.now }}</h1>
  </div>

  <script src="assets/angularjs/angular-1.3.0.js"></script>
  <script>
    var myApp = angular.module('MyApp', []);
    myApp.controller('MyCtrl', ['$scope', function($scope) {
      $scope.clock = {
        now: new Date()
      };

      var updateClock = function() {
        $scope.clock.now = new Date();
      };

      setInterval(function() {
        $scope.$apply(updateClock);
      }, 1000);
    }]);
  </script>
</body>
</html></span>

 

—— 2016/08/04

 

17、作用域有以下的基本功能：

1）提供观察者以监视数据模型的变化；

2）可以将数据模型的变化通知给整个应用，甚至是系统外的组件；

3）可以进行嵌套，隔离业务功能和数据；

4）给表达式提供运算时所需的执行环境。

18、使用ng-controller指令可以将一个控制器对象附加到DOM元素上。

19、ng-controller指令为这个DOM元素创建了一个新的$scope，并将它嵌套在$rootScope中。

20、作用域的表达式就是赋值给作用域对象的变量。

21、$scope对象的生命周期处理有四个不同阶段：1）创建；2）链接；3）更新）；4）销毁。（P35）

22、指令通常不会创建自己的$scope，但也有例外。比如：ng-controller和ng-repeat指令会创建自己的子作用域并将它们附加到DOM元素上。

23、控制器在AngularJS中的作用是增强视图。

24、AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。

25、将控制器命名为[Name]Controller而不是[Name]Ctrl是一个最佳实践。

26、ng-click指令将浏览器中的mouseup事件，同设置在DOM元素上事件处理程序事件进行绑定。

27、用内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。

28、控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制器是很好的做法。作为AngularJS开发者，使用依赖注入来访问服务可以实现这个目的。

29、AngularJS允许在$scope上设置包括对象在内的任何类型的数据，并且在视图中还可以展示对象的属性。

30、$scope对象用来从数据模型向视图传递信息。

—— 2016/08/05

 

31、AngularJS通过作用域将视图、控制器和指令隔离开来。

32、AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对于ng-app所处的层级来讲，它的父级作用域就是$roorScope。

33、在指令内部创建的作用域被称作孤立作用域。

34、除了孤立作用域外，所有的作用域都通过原型继承而来，也就是说它们都可以访问父级作用域。

35、默认情况下，AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵达$rootScope为止。如果在$rootScope中也找不到，程序会继续运行，但视图无法更新。

36、控制器应该尽可能保持短小精悍，而在控制器中进行DOM操作和数据操作则是一个不好的实践。

37、设计良好的应用会将复杂的逻辑放到指令和服务中。

38、当用$watch进行监听时，AngularJS会对表达式或函数进行运算。

39、表达式和eval（javascript)非常类似，但由于表达式由AngularJS来处理，它们有以下显著不同的特性：

1）所有的表达式都在其所属的作用域内部执行，并有访问本地$scope的权限；

2）如果表达式发生了TypeError和ReferenceError并不会抛出异常；

3）不允许使用任何流程控制功能（条件控制，例如if/else）；

4）可以接受过滤器和过滤器链。

40、AngularJS通过$parse这个内部服务来进行表达式运算，这个服务能够访问当前所处的作用域。

41、将$parse服务注入到控制器中，然后调用它就可以实现手动解析表达式。

42、要在字符串模板中做插值操作，需要在你的对象中注入$interpolate服务。

43、$watch函数会监视$scope上的某个属性。只要属性发生变化就会调用对应的函数。可以使用$watch属性在$scope上某个属性发生变化时直接运行一个自定义函数。

 

案例：

demo-1.2.html 解析 AngularJS表达式

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>解析 AngularJS表达式</title>
</head>
<body>
  <div ng-controller="MyController">
    <input type="text" ng-model="expr" placeholder="Enter an expression">
    <h2>{{parseValue}}</h2>
  </div>
  <script src="assets/angularjs/angular-1.3.0.js"></script>
  <script>
    var myApp = angular.module('MyApp', []);
    myApp.controller('MyController', ['$scope', '$parse', function($scope, $parse) {
      $scope.world = 'This is my world.';
      $scope.$watch('expr', function(newVal, oldVal, scope) {
        console.log(newVal, oldVal, scope);
        if(newVal != oldVal) {
          // 用该表达式设置parseFun
          var parseFun = $parse(newVal);
          console.log(parseFun);
          // 获取经过解析后表达式的值
          $scope.parseValue = parseFun(scope);
        }
      })
    }]);
  </script>
</body>
</html></span>



demo-1.3.html 插入字符串

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>插值字符串</title>
</head>
<body>
  <div ng-controller="MyController">
    <input type="email" ng-model="to" placeholder="Recipient"><br/><br/>
    <textarea ng-model="emailBody" cols="30" rows="10"></textarea>
    <pre>{{previewText}}</pre>
  </div>
  <script src="assets/angularjs/angular-1.3.0.js"></script>
  <script>
    var myApp = angular.module('MyApp', []);
    myApp.controller('MyController', ['$scope', '$interpolate', function($scope, $interpolate) {
      $scope.to = 'ari@fullstack.io';
          $scope.emailBody = 'Hello {{ to }},\n\nMy name is Ari too!';

          // 在{{previewText}}内部的文本中可以将{{to}}当做一个变量来使用，并对文本的变化进行实时更新

      $scope.$watch('emailBody', function(body) {
        if(body) {
          var template = $interpolate(body);
          $scope.previewText = template({to: $scope.to});
        }
      })
    }])
  </script>
</body>
</html></span>


—— 2016/08/06

 

标签：

相关文章