[译]AngularJS1.3.0 开发者指南(四) -- 控制器
来源:互联网 发布:数据分析 培训 编辑:程序博客网 时间:2024/05/17 01:11
理解Controllers
在AngularJS中, Controller是一个Javascript构造函数, 常常被用来扩展 Angular Scope 对象.
控制器通过 ng-controller 指令依附在DOM元素上, Angular通过指定的控制器构造函数, 实例化一个新的Controller对象. 这时, 一个被声明为$scope
的新的子作用域被注入到控制器的构造函数中.
使用Controllers我们将可以:
- 设置
$scope
对象的初始化状态 - 给
$scope
对象添加行为
不要使用Controllers进行以下操作:
- 操作dom --- Controllers应该只包含业务逻辑. 把表现逻辑放到Controllers中会影响它的可测试性. Angular使用数据绑定机制来处理大多数实例, 并且通过指令机制封装DOM操作.
- 格式化输入 --- 应该使用 angular form controls 来代替这个操作.
- 过滤输出 --- 应该使用 angular filters代替.
- 通过控制器公用代码或共享状态 --- 应该使用 anguler services 来实现.
- 管理其他组件的生命周期(例如, 创建service实例)
设置$scope对象的初始状态
通常, 在你创建一个应用时, 你需要为Angular的$scope
对象设置初始状态. 通过在$scope
对象上附加属性的方式完成设置初始状态的操作. 这些属性包括了视图模型(即要在视图中展示的模型). 在注册控制器的DOM中, 所有的$scope
属性对于模板都是可用的.
下面的示例中, 创建了一个名为 GreetingController 控制器, 在这个控制器中, 将一个字符串属性'Hola!'添加在$scope
对象上:
var myApp = angular.module('myApp',[]);myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hola!';}]);
在应用中, 创建了一个Angular Module (模块), myApp
. 然后, 我们使用.controller()
方法给模板添加一个控制器的构造函数. 这使得控制器的构造函数不会污染全局作用域.
对Angular提供的$scope
服务, 我们可以用内联式注解指定控制器所需要的依赖, 详情见Dependency Injection.
我们可以使用ng-controller
指令将控制器添加到DOM元素上. greeting
属性现在可以通过数据绑定机制被绑定到模板上:
<div ng-controller="GreetingController">{{ greeting }}</div>
为作用域对象添加行为
为了在视图中响应事件或者执行计算, 我们必须在作用域提供相应的行为. 我们可以通过为$scope
对象赋加方法的方式, 在作用域中添加行为. 这些方法可以在模板或视图中被调用到.
在下面的示例中, 通过控制器在作用域中添加了一个方法, 这个方法实现的数值翻倍:
var myApp = angular.module('myApp',[]);myApp.controller('DoubleController', ['$scope', function($scope) { $scope.double = function(value) { return value * 2; };}]);
一旦为DOM元素指定了某个控制器, 在模板中就可以通过Angular表达式调用double
方法:
<div ng-controller="DoubleController">Two times <input ng-model="num"> equals {{ double(num) }}</div>
正如本指南的概念部分所讨论的, 分配到作用域上的任何对象(或原语)都作为模型的属性. 分配到作用域上的方法对于模板和视图来说都是可用的, 都可以通过Angular表达式和ng
事件处理指令(例如: ng-click)来调用.
正确地使用控制器
通常, 控制器不应该做太多事情, 它应该只包括展示单个视图所需要的业务逻辑.
使得控制器简单的最觉的方式是封闭功能, 即把哪些不属于控制器的功能封闭到服务中, 然后在控制器中通过依赖注入的方式使用这些服务. 这一点将在本指南的依赖注入服务部分讨论.
将控制器和Angular作用对象联系起来
可以隐匿的通过ng-controller
指令和$route
服务将控制器和作用对象关联.
简单控制器示例
为了进一步说明控制器在Angular中是怎样工作的, 我们用下列组件创建一个小app:
- 包含两个按钮和一个简单展示信息的模板
- 包含一个字符串的模型, 此字符串命名为
spice
- 包含两个函数的控制器, 这两个函数可以对
spice
进行赋值
这个展示信息与spice
模型绑定, 而这个模型默认值为"very". 根据点击的按钮, spice
模板被设值为chili
或者jalapeño
, 展示信息通过数据绑定机制自动更新为新的值.
<div ng-controller="SpicyController"> <button ng-click="chiliSpicy()">Chili</button> <button ng-click="jalapenoSpicy()">Jalapeño</button> <p>The food is {{spice}} spicy!</p></div>
var myApp = angular.module('spicyApp1', []);myApp.controller('SpicyController', ['$scope', function($scope) { $scope.spice = 'very'; $scope.chiliSpicy = function() { $scope.spice = 'chili'; }; $scope.jalapenoSpicy = function() { $scope.spice = 'jalapeño'; };}]);
以上示例的注意事项:
ng-controller
用于为我们的模板(隐匿的)创建一个作用域, 而此作用在控制器SpicyController
得以加强(管理).SpicyController
只是一个普通的JavaScript函数. 作为(可选的)命名惯例, 命名要以大写字母开关, 并以"Controller"结尾.- 给
$scope
对象添加属性即创建或更新了模型. - 控制器中的方法可以通过直接给作用域赋值的形式创建出来(见
chiliSpicy
方法). - 在模板中可以使用控制器中的方法和属性(例如
<div>
元素和它的子元素).
带参示例
控制器方法也可以传参数, 下面的示例对前一示例加以改动以展示效果:
<div ng-controller="SpicyController"> <input ng-model="customSpice"> <button ng-click="spicy('chili')">Chili</button> <button ng-click="spicy(customSpice)">Custom spice</button> <p>The food is {{spice}} spicy!</p></div>
var myApp = angular.module('spicyApp2', []);myApp.controller('SpicyController', ['$scope', function($scope) { $scope.customSpice = "wasabi"; $scope.spice = 'very'; $scope.spicy = function(spice) { $scope.spice = spice; };}]);
注意SpicyController
控制器中只定义了一个spicy
方法, 这个方法声名了spice
参数. 然后模板引入这个控制器方法, 并在第一个按钮事件中传入字符串常量chili
, 在第二个按钮事件中传入模型属性customSpice
(与输入框绑定).
作用域继承示例
通过会将控制器添加到不同的DOM层次结构中. 由于ng-controller
指令会创建一个新的子作用域, 所以我们将得到一个存在继承关系的作用域树. 每一个控制器都会接收$scope
对象, 这个$scope
对象可以访问更高一级控制器中定义的属性和方法. 关于作用域继承机制更多信息见Understanding Scopes(理解作用域)
<div class="spicy"> <div ng-controller="MainController"> <p>Good {{timeOfDay}}, {{name}}!</p> <div ng-controller="ChildController"> <p>Good {{timeOfDay}}, {{name}}!</p> <div ng-controller="GrandChildController"> <p>Good {{timeOfDay}}, {{name}}!</p> </div> </div> </div></div>
var myApp = angular.module('scopeInheritance', []);myApp.controller('MainController', ['$scope', function($scope) { $scope.timeOfDay = 'morning'; $scope.name = 'Nikki';}]);myApp.controller('ChildController', ['$scope', function($scope) { $scope.name = 'Mattie';}]);myApp.controller('GrandChildController', ['$scope', function($scope) { $scope.timeOfDay = 'evening'; $scope.name = 'Gingerbread Baby';}]);
div.spicy div { padding: 10px; border: solid 2px blue;}
注意我们是怎样在模板中构建了三层ng-controller
指令, 这实际上是为我们的视图创建了四层作用域:
- root scope, 根作用域
MainController
作用域, 包含timeOfDay
和name
属性ChildController
作用域, 继承了timeOfDay
属性, 重写(隐藏)了父作用域中的name
属性GrandChildController
作用域, 重写(隐藏)了定义在MainController
控制器中的timeOfDay
属性以及定义在ChildController
控制器中的name
属性
对于方法, 继承机制同样有效. 因此在上面示例中, 所有的属性可以被返回值为字符串的方法所代替.
- [译]AngularJS1.3.0 开发者指南(四) -- 控制器
- [译]AngularJS1.3.0 开发者指南(四) -- 控制器
- [译]AngularJS1.3.0 开发者指南(四) -- 控制器
- angularJs1.x<二、控制器Controller>
- AngularJS1.X学习笔记6-控制器和作用域
- Cordys云开通服务开发者指南(四)
- Chrome开发者工具不完全指南(四、性能进阶篇)
- Chrome开发者工具不完全指南(四、性能进阶篇)
- Chrome开发者工具不完全指南(四、性能进阶篇)
- Chrome开发者工具不完全指南(四、性能进阶篇)
- 开发者指南
- Flash开发者学习jQuery指南(译)
- VR系列——Oculus Rift 开发者指南:四、高级渲染配置(四)
- angularjs1.3.0源码解析之service
- angularjs1.3.0源码解析之directive
- firefox附加组件开发者指南(四)——使用XPCOM:实现高级处理
- VR系列——Oculus Rift 开发者指南:三、Oculus Rift的渲染(四)
- VR系列——Oculus Rift 开发者指南:四、高级渲染配置(一)
- (架构设计)观察者模式+redis队列实现不同项目之间数据的交互
- Android 最全面面试整理
- 通讯录的内容提供者(查询手机通讯录的数据)
- Calendar 类的应用
- hls 网络上的m3u8视频源地址(可用的)
- [译]AngularJS1.3.0 开发者指南(四) -- 控制器
- noi-7546-统计数字字符个数
- Cordova-----3、Cordova使用插件
- Java的文件相关操作
- 2017百度前端技术学院
- hibernate中文教程
- es6学习之路(2):作用域,不存在变量提升,避免暂时性死区,与全局对象的属性脱钩
- DAG上的动态规划
- 最强 Android Studio 使用小技巧和快捷键(三)