发表于: 2017-07-06 23:03:23
1 883
今天完成的事情:
关于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
评论