angularjs

Posted 2020-10-07

　　Angular数据绑定的核心：脏检查（通过事件循环检查数据模型的变化）

　　双向数据绑定：意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染。 

　　模块： 

• 模块声明：

  angular.module(‘myApp‘, [‘m1‘]);

  第一个参数是模块名称，第二个参数是依赖的模块名称。

• 模块获取：

  angular.module(‘myApp‘)

 　　scope：$scope对象是定义应用业务逻辑、控制器和视图属性的地方。AngularJS启动并生成视图时，会将根ng-app元素同$rootScope绑定。$rootScope是所有$scope对象的最上层。不要在$rootScope上附加太多业务逻辑。

　　$rootScope和$scope以及其子$scope有继承关系，所以从最底层的$scope也能获取到父$scope的属性，就好像是自己的一样。

　　AngularJs应用的模板中使用多种标记，包括：

　　指令：将DOM元素增强为可复用的DOM组件的属性或元素。

　　值绑定：模板语法{{}}可以将表达式绑定到视图上。

　　过滤器：可以在视图中使用的函数，用来进行格式化。

　　表单控件：用来检验用户输入的控件。

　　$scope.$watch：监听指定属性的变化　

angular.module("myApp", []).controller(‘MyController‘, function($scope, $parse)) {
   $scope.$watch(‘expr‘ , function(newVal, oldVal, scope){
       if(newVal !== oldVal){...}
   });  
}

 

　　

 

• ng-app：只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。
• ng-model：用来做数据双向绑定。

  <input ng-model="person.name" type="text"/>
  <h1>Hello {{person.name}}</h1>

• ng-controller：声明所有被它包含的元素都属于某个控制器。

  <div ng-controller="MyController">
     <h5>{{clock}}</h5> 
  </div>
  

  function MyController($scope, $timeout){
  var updateClock = function(){
           $scope.clock = new Date();
           $timeout(function(){
                updateClock();
            }, 1000)           
       }  
       updateClock();
  }    

  代码会定时修改界面上的时间。