nico对《AngularJS权威教程》的笔记(8)

AngularJS权威教程
  • 书名: AngularJS权威教程
  • 作者: [美] Ari Lerner
  • 页数: 476
  • 出版社: 人民邮电出版社
  • 出版年: 2014-8
  • 第25页
    如果没有创建任何自定义的JavaScript组件,视图只会体现它渲染时模型暴露出的数据。
    也就是说,没有用JS组件的情况下,浏览器渲染之后才会把数据显示在页面上,并不灵活。
    AngularJS则采用了完全不同的解决方案。它创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。
    当AngularJS认为某个值可能发生变化时,它会运行自己的事件循环来检查这个值是否变“脏”。
    为了表示内部和内置的库函数, Angular使用 $ 预定义对象。
    2016-08-02 11:59:03 回应
  • 第26页
    正 如 ng-app 声 明 所 有 被 它 包 含 的 元 素 都 属 于 AngularJS 应 用 一 样 , DOM 元 素 上的ng-controller 声明所有被它包含的元素都属于某个控制器。
    function MyController($scope) {
      $scope.clock = {
        now: new Date()
      };
      var updateClock = function () {
        $scope.clock.now = new Date()
      };
      setInterval(function () {
        $scope.$apply(updateClock)
      }, 1);
    }
    
    function MyController2($scope) {
      $scope.name = "haha";
    }
    
    <div ng-controller="MyController">
      <h1>Hello {{ clock.now }}!</h1>
    </div>
    <div ng-controller="MyController2">
      <h1>Hello {{ name }}</h1>
    </div>
    
    就是说,MyController函数中的clock对象只能在控制器MyController使用,MyController2函数中的name对象只能在控制器MyController2使用。
    2016-08-03 10:18:26 回应
  • 第28页
    通常认为,在视图中通过对象的属性而非对象本身来进行引用绑定,是Angular中的最佳实践。
    // 在app.js中
    function MyController($scope) {
          $scope.clock = {
                now: new Date()
          };
          var updateClock = function() {
                $scope.clock.now = new Date()
          };
          setInterval(function() {
                $scope.$apply(updateClock);
          }, 1000);
    };
    
    2016-08-03 10:44:42 回应
  • 第30页
    angular.module('app', [])
        .controller('Mycontroller3', function ($scope) {
          $scope.name = 'Zeng';
        });
    
    <div  ng-app="app">
      <div ng-controller="Mycontroller3">
        <h1>Hello {{ name }}</h1>
      </div>
    </div>
    
    module方法的第一个参数对应ng-app="app",而且一个js文件只能有一个module方法与ng-app对应。
    每个模块中的函数与其他模块中的函数是不会冲突的。
    // 来源 http://www.mamicode.com/info-detail-247448.html 的代码
    
    // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
    var createModule = angular.module("myModule", []);
    
    // 只有一个参数(模块名),代表获取模块
    // 如果模块不存在,angular框架会抛异常
    var getModule = angular.module("myModule");
    
    // true,都是同一个模块
    alert(createModule == getModule);
    
    2016-08-03 11:40:00 回应
  • 第32页
    将应用的业务逻辑都放在控制器中,而将相关的数据都放在控制器的作用域中,这是非常完美的架构。
    AngularJS启动并生成视图时,会将根 ng-app 元素同 $rootScope 进行绑定。 $rootScope 是所有 $scope 对象的最上层。
    $rootScope 是AngularJS中最接近全局作用域的对象。
    angular.module('myApp', [])
        .run(function ($rootScope) {
          $rootScope.name = "Nico";
        });
    
    虽然只在一个模块中对$rootScope.name赋值,但是作用域是全局,也就是说,在别的模块中的$rootScope.name也被赋值了。
    2016-08-03 14:40:51 回应
  • 第38页
    默认情况下,AngularJS在当前作用域中无法找到某个属性时,便会在父级作用域中进行查找。如果AngularJS找不到对应的属性,会顺着父级作用域一直向上寻找,直到抵达 $rootScope为止。
    <div ng-controller="ParentController">
      <div ng-controller="ChildController">
        <a ng-click="sayHello()">Say hello</a>
        <h1>ParentController->ChildController: {{ person }}</h1>
      </div>
      <h1>ParentController: {{ person }}</h1>
    </div>
    <div ng-controller="ChildController">
      <a ng-click="sayHello()">Say hello</a>
      <h1>ChildController: {{ person }}</h1>
    </div>
    
    情况一:
    var app = angular.module('app', []);
    app.controller('ParentController', function($scope) {
      $scope.person = {greeted: false};
    });
    app.controller('ChildController', function($scope) {
      $scope.sayHello = function() {
        $scope.person.name = 'Ari Lerner';
      };
    });
    
    运行结果:
    未点击前:
    Say hello
    ParentController->ChildController: {"greeted":false}
    ParentController: {"greeted":false}
    点击后:
    Say hello
    ParentController->ChildController: {"greeted":false,"name":"Ari Lerner"}
    ParentController: {"greeted":false,"name":"Ari Lerner"}
    说明:这是因为ChildController这层控制器的作用域找不到person这个对象,所以ChildController直接去找父级ParentController的作用域,结果发现存在person这个对象,于是ChildController引用的person对象和ParentController引用的person对象其实同一个(引用同一个对象)。
    情况儿:
    var app = angular.module('app', []);
    app.controller('ParentController', function($scope) {
      $scope.person = {greeted: false};
    });
    app.controller('ChildController', function($scope) {
      $scope.person = {
        name: 'Nico'
      }
      $scope.sayHello = function() {
        $scope.person.name = 'Ari Lerner';
      };
    });
    
    运行结果:
    点击前:
    Say hello
    ParentController->ChildController: {"name":"Nico"}
    ParentController: {"greeted":false}
    点击后:
    Say hello
    ParentController->ChildController: {"name":"Ari Lerner"}
    ParentController: {"greeted":false}
    说明:这是因为ChildController这层控制器的作用域中存在person对象,所以并不需要找ChildController的父级作用域,所以ChildController控制器和ParentController控制器分别存在不同的person对象,所以不会互相干扰。
    2016-08-03 15:23:23 回应
  • 第40页
    <div ng-controller="MyController">
      <input ng-model="expr" type="text" placeholder="Enter an expression">
      <h2>{{ parseValue }}</h2>
    </div>
    
    angular.module('app', [])
        .controller('MyController', function ($scope, $parse) {
          $scope.$watch('expr', function (newVal) {
              var parseFunc = $parse(newVal);
              $scope.parseValue = parseFunc();
          });
        });
    
    输入 例如:1+2-3+9,便会自动计算出结果。
    2016-08-03 16:06:01 回应
  • 第41页
    angular.module('app', []).controller('MyController', function ($scope, $interpolate) {
      $scope.$watch('emailBody', function (body) {
        console.log(body);
        if (body) {
          var template = $interpolate(body);
          $scope.previewText = template({to: $scope.to});
        }
      });
    });
    
    <div ng-controller="MyController">
      <input ng-model="to" type="email" placeholder="Recipient">
      <textarea ng-model="emailBody"></textarea>
      <pre>{{previewText}}</pre>
    </div>
    
    现在,在 {{ previewText }} 内部的文本中可以将 {{ to }} 当做一个变量来使用,并对文本的变化进行实时更新。
    在文本框中输入{{ to }},会转成<input ng-model="to" type="email" placeholder="Recipient">的内容。
    2016-08-03 16:55:41 回应

nico的其他笔记  · · · · · ·  ( 全部41条 )