AngularJs 轻松学习: 第 2 集，共 15 集

• 下载源码 - 47.6 KB

回顾第 1 集: 点击这里

引言

在本文中，我们将介绍以下主题

• AngularJs 模块
• 创建模块
• AngularJs 控制器
• 关于作用域
• 创建控制器
• 作用域行为
• 带有过滤器示例的 ng-repeat 指令

AngularJs 模块

• 一个可分离的独立代码组件
• 一个 (逻辑) 容器或各种关键部分/组件的集合，例如指令、过滤器、控制器、服务等
• 执行应用程序的自动引导
• 提供更好的代码管理和松耦合
• 用于合理分解大型代码，以提高可读性
• 用于避免在全局命名空间中声明对象
• 并且，在依赖注入中起着重要的作用
• 可以内联定义，也可以保存在单独的 JavaScript (.js) 文件中

如何定义模块？

强制性：所有 AngularJs 模块或任何其他第三方模块都需要注册。

angular.module() – 使用此预定义函数创建模块

语法

没有依赖项

在上面的语法中，目前没有依赖项，但是如果有任何依赖项，您可以提及它们。

具有依赖项

注意

• 您可以根据应用程序需求在应用程序中创建单个或多个模块。
• 一个模块可以分配单个或多个相关控制器。
• 依赖模块也可以附加到任何模块。

AngularJs 控制器

• 是一个构造函数，一个 JavaScript 对象
• 保存函数的作用域（共享对象）
• 公开视图可以使用的函数行为
• 可分离的独立组件
• 模型和视图之间的中介（模型<==>控制器<==>视图）
• 包含业务逻辑
• 可以使用 ng-controller 指令创建

关于作用域？

• 包括控制器的属性
• 包括控制器的函数
• 控制器和单个视图之间的粘合剂
• 表达式也会针对作用域对象进行评估
• 从 $rootScope 继承功能（我们稍后会学习这个）

注意事项

• 使用作用域时要小心
• 作用域不是模型，而是一种访问模型的方式
• 避免直接从视图更改作用域 - 建议
• 保持作用域在视图内部为只读 - 建议
• 保持作用域在控制器内部为只写 - 建议

如何创建控制器？

语法

moduleName.controller("controllerName", function($scope){
define variables/properties and assign values
});

示例：单个模块和单个控制器

示例：单个模块和多个控制器

//controller definition for staff personal information
//$scope is predefined and having limit to its controller only
appModule.controller('personalInfoController', function ($scope) {
//declare dynamic variables and assign values
$scope.StaffName = 'Abhishek Maitrey';
$scope.Experience = '12 Years';
$scope.ContactNumber = '9990-123-456';
$scope.Email = 'support@domain.com';
});

//controller definition for staff educational information
//$scope will have scope within this controller.
appModule.controller('educationInfoController', function ($scope) {
//declare dynamic variables and assign values
$scope.LastQualification = 'MCA';
$scope.Stream = 'Computer Science';
$scope.YearOfPassing = '2000';
$scope.Grade = 'A';
});

使用控制器的视图

<div ng-controller="personalInfoController">
<p>
Personal Information<br />
--------------------------
</p>
Staff Name :<strong> {{StaffName}}</strong><br />
Relevant Experience :<strong> {{Experience}}</strong><br />
Contact Number : <strong>{{ContactNumber}}</strong><br />
Email : <strong>{{Email}}</strong>
</div>
<div ng-controller="educationInfoController">
<p>
Educational Information<br />
------------------------------
</p>
<!--Used data bining through ng-bind directive for first two values-->
<!--Used data bining through '{{}}' directive for first two values-->
Last Qualification :<strong><span
ng-bind="LastQualification"></span></strong><br />
Stream :<strong> <span ng-bind="Stream"></span></strong><br />
Year of Passing : <strong>{{YearOfPassing}}</strong><br />
Grade : <strong>{{Grade}}</strong>
</div>

输出

About the staff
Personal Information
--------------------------
Staff Name : Abhishek Maitrey
Relevant Experience : 12 Years
Contact Number : 9990-123-456
Email : support@domain.com
Educational Information
------------------------------
Last Qualification :MCA
Stream : Computer Science
Year of Passing : 2000
Grade : A

作用域行为和访问限制

您一定已经注意到每个控制器中都定义了 $scope 对象。每个控制器都必须有自己的 $scope 对象，并且此对象对其各自的控制器有限制。

例如：如果您尝试在 <div ng-controller="personalInfoController">中使用 $scope.LastQualification ，您不应该针对 LastQualification 变量获得所需的输出，因为它是在 educationInfoController 控制器下定义的。

带有过滤器的 ngRepeat 指令

• ng-repeat - 一个循环结构
• ng-repeat - 迭代集合
• filter - 转换模型数据
• filter - 视图的适当表示

输出

数组、ng-Repeat 指令和过滤器的示例

• ABHISHEK 来自 诺伊达 - 印度
• JACK 来自 新泽西 - 美国
• PHILIS 来自 伦敦 - 英国
• THIU 来自 曼谷 - 泰国

源代码可在本文中找到。

下一集

第 3 集：更多带有示例的指令，创建带有示例的自定义指令

总共有 15 集，内容正在开发中。