发表于: 2017-07-06 23:03:23

1 886


今天完成的事情:


关于Controller

controller由JavaScript的构造函数定义,主要用于增强angularJS的scope。


当controller通过ng-controller directive与DOM关联,angular将用指定的controller构造函数实例化一个新的controller对象,同时一个新的child scope将被创建,然后以参数$scope注入到controller中。


使用controller的情况:

1.$scope中对象的初始化

2.给$scope中对象增加一些行为


不使用controller的情况:

1.操作DOM,controller应该仅仅包含业务逻辑,把显示的逻辑放到controller中会影响它的可测试性,angular有很多数据绑定和封装了DOM操作的directives,完全没必要去操作DOM。

2.格式化输入,用angular form controls代替

3.过滤输出,用angular filters代替

4.在controller直接共享代码或状态,用angular services代替

5.管理其他组件的生命周期(如创建一个service实例)

创建一个angular应用时,需要先设置scope的初始状态。为scope设置一些属性,包含在view中预先声明的model,所有$scope的属性在controller注册的DOM里都是可用的。


 var myApp = angular.module('myApp', []);

    myApp.controller('GreetingController', ['$scope', function ($scope) {

        $scope.greeting = 'Hello!';

  }]);


创建了一个angular module : myApp,调用module的controller方法,给module增加了一个controller构造函数。controller相对应的DOM,greeting属性做了数据绑定,可以显示在controller中的值。


<div ng-controller="GreetingController">

  {{ greeting }}

</div>


为$scope对象增加方法的方式为他增加行为,这些方法可以被template/view调用。


var myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {

  $scope.double = function(value) { return value * 2; };

}]);


controller一旦被添加到DOM中,该方法就可以在template中被调用


<div ng-controller="DoubleController">

  Two times <input ng-model="num"> equals {{ double(num) }}

</div>


明天的计划:

完成任务7


问题:

Angular报注入错误,Error: [ng:areq] Argument 'fn' is not a function, got undefined


收获:

使用angularAMD动态加载CSS


返回列表 返回列表
评论

    分享到