AngularJS是一个开源Web应用程序框架。它最初是由Misko Hevery和Adam Abrons开发于2009年。现在是由谷歌维护。
AngularJS的定义,它的官方文档介绍如下:
AngularJS是动态的Web应用程序结构框架。它可以让你使用HTML作为模板语言,扩展HTML的语法清晰,简洁地表达应用程序的组件。Angular分明的数据绑定和依赖注入必须编写代码。而这一切都在浏览器内发生,这使得它与任何服务器技术的理想合作伙伴。
AngularJS是一个功能强大的基于JavaScript开发框架来创建富互联网应用(RIA)。
AngulajJS为开发者提供选项来编写客户端应用程序(使用JavaScript)在一个干净的MVC(模型 - 视图 - 控制器)的方式。
AngularJS应用是跨浏览器兼容的。自动AngularJS处理适用于每个浏览器的javascript代码。
AngularJS是开源的,完全免费的,并且由数千名世界各地的开发。它是根据Apache许可证2.0版许可。
总体而言,AngularJS是一个框架可以用来构建大规模,高性能的网络应用,同时也易于维护。
以下是AngularJS的最重要的核心的功能:
数据绑定:它是模型和视图组件之间的数据的自动同步。
适用范围:这些是指模型对象。充当控制器和视图之间的胶水。
控制器:这些是绑定到特定范围的Javascript函数。
服务:AngularJS配有多个内置的服务,例如$http提供XMLHttpRequest。这些是在应用程序实例化一次的单一对象。
过滤器:这些从数组项目中选择一个子集,并返回一个新的数组。
指令:指令是关于DOM元素标记(如元素,属性,CSS等等)。这些可以被用来创建作为新的自定义窗口小部件自定义的HTML标签。 AngularJS有内置的指令(ngBind,ngModel...)
模板:这些都与控制器和模型信息呈现的视图。这些可以使用“谐音”的单个文件(如index.html),或在一个页面上的多个视图。
路由:它是切换视图的概念。
模型 - 视图 :MVC是一个设计模式将应用划分为不同的部分(称为模型,视图和控制器),每一个具有不同的责任。 AngularJS没有传统意义上的MVC实现,而是更接近于MVVM(模型 - 视图 - 视图模型)。AngularJS团队让它作为模型视图而不管。
深层链接:深层链接能够使其可书签应用程序的状态进行编码的URL。应用程序可以从该URL为相同的状态恢复。
依赖注入: AngularJS有一个内置的依赖注入子系统,通过使应用程序帮助开发人员更易于开发,理解和测试。
下图描绘了AngularJS,我们将详细在随后的章节讨论的一些重要部分。
AngularJS提供在一个非常干净和维护方式来创建单页的应用。
AngularJS提供了数据绑定功能为HTML从而给用户提供丰富而敏感的体验
AngularJS代码可单元测试。
AngularJS使用依赖注入和运用关注点分离。
AngularJS提供了可重用的组件。
AngularJS能为开发人员编写更少的代码,并获得更多的功能。
在AngularJS,视图都是纯HTML页面,并用JavaScript编写控制器完成业务处理。
AngularJS应用程序可以在所有主要浏览器和智能手机,包括Android和iOS系统的手机/平板电脑上运行。
虽然AngularJS带有许多加分,但是我们应该考虑以下几点:
不安全:JavaScript只有框架编写的应用程序在AngularJS是不安全的。服务器端的认证和授权是必须的,以保持应用程序的安全。
不可降解:如果应用程序的用户禁用JavaScript的话用户将只能看到基本的页面,仅此而已。
AngularJS框架可分为以下三个主要部分组成:
ng-app : 该指令规定,并链接一个AngularJS应用程序的HTML。
ng-model : 该指令结合AngularJS应用数据的值到HTML的输入控件。
ng-bind : 该指令子带AngularJS应用数据的HTML标签。
在本章中,我们将讨论如何建立AngularJS库在Web应用程序开发中使用。我们还将简要地学习目录结构和它的内容。
打开链接https://angularjs.org/(打不开可能需要),会看到有两个下载AngularJS库的选项:
View on GitHub- 单击此按钮跳到GitHub,并获得所有最新的脚本。
此屏幕给出了使用AngularJS如下多种选择:
Downloading and hosting files locally
有两种不同的选择:旧版和最新版。旧版是版本低于1.2.x版本,最新是1.3.x版本。
我们也可以使用缩小,非压缩或压缩版本。
CDN access: 也可以使用一个CDN。CDN全世界可访问,它放在谷歌主机区域性数据中心。 这也提供了一个优点,即如果访问者的网页已经从相同的CDN 下载了AngularJS的副本,它不必再重新下载。
在本教程中我们使用的是CDN版本库
现在让我们使用AngularJS库编写一个简单的例子。让我们创建一个HTML文件 first-angular.html 如下:
第一个AngularJS程序 你好 !第一个{{helloTo.title}}程序示例
下面的章节详细描述上面的代码:
我们已经包括了AngularJS的JavaScript文件到HTML页面中,所以我们可以用AngularJS:
在其官方网站检查AngularJS的最新版本。
接下来我们指示HTML的哪一部分包含了AngularJS应用程序。这可以通过ng-app属性到AngularJS应用程序的根HTML元素。可以把它添加到HTML元素或body元素,如下所示:
ng-app="myapp">
这是视图的一部分:
ng-controller="HelloController" >
Welcome {{helloTo.title}} to the world of Yiibai tutorials!
ng-controller 告诉AngularJS什么控制器使用在视图中。helloTo.title告诉AngularJS将命名helloTo.title的值写入到HTML的“model”中。
这里是控制器部分:
angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; });
此代码注册一个名为HelloController的控制器功能,在myapp模块。 我们将学习更多关于它们在各自的模块和控制器章节。控制器函数注册在Angular中,通过angular.module(...).controller(...) 的函数来调用。
传递给控制器函数的$scope参数是模型。控制器函数增加了helloTo的 JavaScript对象,并在该对象它增加了一个标题字段。
将以上代码保存为 first-angular.html ,并在浏览器中打开它。会看到如下的输出:
当页面在浏览器中加载,输出下面的结果:
HTML文档加载到浏览器,并且由浏览器进行评估计算。AngularJS JavaScript文件被加载,Angular 全局对象被创建。接下来,JavaScript一个注册控制器的函数被执行。
接下来AngularJS通过HTML扫描,以寻找AngularJS应用程序和视图。当视图的定位后,它连接视图到对应的控制器函数。
接下来,AngularJS执行控制器函数。然后,它呈现通过控制器模型数据来自填充的视图。此时网页已准备就绪。
模型视图控制器(Model View Controller)或MVC,因为它是俗称,是一种Web应用程序开发设计模式。
模型-视图-控制器模式由以下三部分组成:
Model - 是一个最低水平负责维护数据的模式。
View - 这是负责显示所有或一部分的数据到用户。
Controller - 软件代码控制模型和视图之间的相互作用。
MVC是很流行的,因为它从用户界面层和支持分离关注隔离了应用逻辑。在这里,控制器接收应用程序的所有请求,然后使用Model,以准备视图需要的数据。然后视图使用控制器准备的数据,以产生一个最终的像样响应的数据输出。 MVC的抽象图形可以表示如下。
模型负责管理应用程序的数据。它响应从视图请求,同时也从控制器响应指令到自我更新。
在一个特定的格式的呈现数据,由控制器决定呈现数据触发。 它们都是基于脚本的模板系统,如JSP,ASP,PHP也很容易使用AJAX技术来集成。
控制器负责响应于用户输入并执行交互数据模型对象。控制器接收输入,并验证输入,然后执行修改数据模型的业务操作的状态。
AngularJS是一个基于MVC的框架。在接下来的章节中,让我们看看AngularJS如何使用MVC方法论。
表达式用于应用程序绑定数据到HTML。表达式编写在双括号就如:{{ expression}}. 表达式中的行为方式与 ng-bind 指令相同。AngularJS应用表达式是纯JavaScript表达式和输出正在使用的数据。
Expense on Books : {{cost * quantity}} Rs
Hello {{student.firstname + " " + student.lastname}}!
Roll No: {{student.rollno}}
Marks(Math): {{marks[3]}}
下面的例子将展示上述所有表达式。
sampleAngularJS.htmlAngularJS 表达式 Sample Application
Hello {{student.firstname + " " + student.lastname}}!
Expense on Books : {{cost * quantity}} Rs
Roll No: {{student.rollno}}
Marks(Math): {{marks[3]}}
在浏览器中打开:sampleAngularJS.html, 看到结果如下:
AngularJS应用主要依赖于控制器来控制数据流在应用程序中.控制器使用 ng-controller 指令定义。控制器是一个包含属性/属性和函数的JavaScript对象。每个控制器接受$scope作为参数引用到应用程序/模块,由控制器来控制。
ng-app="" ng-controller="studentController">
...
在这里,我们采用 ng-controller 指令声明控制器studentController。作为下一个步骤,我们将定义 studentController 如下:
function studentController($scope) { $scope.student = { firstName: "李", lastName: "四", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }
studentController定义一个以 $scope 作为参数的JavaScript对象。
$scope表示应用程序,它使用studentController对象。
$ scope.student是studentController对象的属性。
firstName 和 lastName 是 $scope.student 对象的两个属性。我们已经为它们设置了缺省值。
fullName是 $scope.student 对象的函数,其任务是返回合并后的名字。
在fullName函数中我们得到了 student 对象,然后返回合并后的名字。
我们还可以定义控制器对象在单独的JS文件,并参考(引入)该文件在HTML页面。
现在,我们可以在studentController使用ng-model或表达式来获取学生的属性。
Enter first name: <input type="text" ng-model="student.firstName"><br> Enter last name: <input type="text" ng-model="student.lastName"><br>
You are entering: {{student.fullName()}}
绑定 student.firstName 和 student.lastname 两个输入框。
绑定student.fileName()到HTML。
现在,只要输入名字和姓氏在输入框中,可以看到全名(fullname)自动更新。
下面的例子将展示控制器的使用。
testAngularJS.htmlAngular JS Controller AngularJS应用示例
Enter first name:
Enter last name:
您输入的名字是: {{student.fullName()}}
在浏览器中打开:textAngularJS.html ,将看以下的结果:
过滤器用来改变修改的数据,并可以在表达式或使用管道字符指令来过滤。以下是常用的过滤器的列表。
S.No. | 名称 | 描述 |
---|---|---|
1 | uppercase | 转换文本为大写文字。 |
2 | lowercase | 转换文本为小写文字。 |
3 | currency | 以货币格式格式化文本。 |
4 | filter | 过滤数组到根据提供标准的一个子集。 |
5 | orderby | 排序基于提供标准的数组。 |
添加大写字母过滤器使用管道符表达式。在这里,我们添加大写过滤器中的所有字母为大写,并打印学生的名字。
Enter first name:<input type="text" ng-model="student.firstName"> Enter last name: <input type="text" ng-model="student.lastName"> Name in Upper Case: {{student.fullName() | uppercase}}
添加小写过滤器使用管道符表达式。在这里,我们添加小写过滤器全部以小写字母打印学生的名字。
Enter first name:<input type="text" ng-model="student.firstName"> Enter last name: <input type="text" ng-model="student.lastName"> Name in Upper Case: {{student.fullName() | lowercase}}
添加货币过滤器使用管道符返回数的表达式。在这里,我们添加货币过滤器使用货币格式的打印费用。
Enter fees: <input type="text" ng-model="student.fees"> fees: {{student.fees | currency}}
若要仅显示必修科目,我们使用subjectName作为过滤器。
Enter subject: <input type="text" ng-model="subjectName"> Subject:<li ng-repeat="subject in student.subjects | filter: subjectName"> {{ subject.name + ', marks:' + subject.marks }} li> ul>
由标记来排序科目,我们使用的OrderBy标记。
Subject:<li ng-repeat="subject in student.subjects | orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} li> ul>
下面的例子将展示上述所有过滤器。
testAngularJS.htmlAngular JS Filters AngularJS过滤器应用示例
Enter first name: Enter last name: Enter fees: Enter subject:
Name in Upper Case: {{student.fullName() | uppercase}} Name in Lower Case: {{student.fullName() | lowercase}} fees: {{student.fees | currency}} Subject:
- {{ subject.name + ', marks:' + subject.marks }}
在浏览器中打开:textAngularJS.html,看到结果如下:
表中的数据本质上是通常可重复。 ng-repeat 指令可轻松用于绘制表格。下面的例子是使用 ng-repeat 指令来绘制表格。
Name
Marks
ng-repeat="subject in student.subjects">
{{ subject.name }}
{{ subject.marks }}
表可以使用CSS样式设置样式。
table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; }
下面的例子将展示上述所有指令。
testAngularJS.html 文件内容:AngularJS表格示例 AngularJS 表格应用示例
姓: 名: 名字: {{student.fullName()}} 科目:
名字 标记 {{ subject.name }} {{ subject.marks }}
在浏览器中打开:textAngularJS.html ,看到结果如下:
下面的指令可用于绑定应用程序数据到HTML DOM元素的属性。
S.No. | 名称 | 描述 |
---|---|---|
1 | ng-disabled | 禁用给定的控制 |
2 | ng-show | 显示了一个给定的控制 |
3 | ng-hide | 隐藏一个给定的控制 |
4 | ng-click | 表示一个AngularJS click事件 |
添加ng-disabled属性到一个HTML按钮,并把它传递模型。绑定模型到复选框,来看看变化。
type="checkbox" ng-model="enableDisableButton">Disable Button
添加 ng-show 属性到HTML按钮,并把它传递到模型。该模型绑定复选框。
type="checkbox" ng-model="showHide1">Show Button
添加 ng-hide 属性到HTML按钮,并把它传递模型。该模型绑定复选框。
type="checkbox" ng-model="showHide2">Hide Button
添加ng-click属性到一个HTML按钮,更新模型。绑定模型到HTML如下所示。
Total click: {{ clickCounter }}
下面的例子将展示上述所有指令。
testAngularJS.htmlAngularJS HTML DOM 示例 AngularJS HTML DOM 应用示例
Disable Button 显示按钮 隐藏按钮 Total click: {{ clickCounter }}
在浏览器中打开:textAngularJS.html ,看到结果如下:
AngularJS支持模块化方法。模块用于单独的逻辑表示服务,控制器,应用程序等。为保持代码简洁,我们在单独的 js 文件中定义模块,并将其命名为 module.js文件。 在这个例子中,我们要创建两个模块。
应用模块 - 控制器用于初始化应用程序。
控制器模块 - 用于定义控制器。
var mainApp = angular.module("mainApp", []);
在这里,我们声明了使用 angular.module 函数的应用程序mainApp模块。我们已经传递一个空数组给它。这个数组通常包含依赖模块。
mainApp.controller("studentController", function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Hindi',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; });
在这里,我们声明了使用 mainApp.controller 函数的一个控制器 studentController 模块。
ng-app="mainApp" ng-controller="studentController">
..
这里我们使用 ng-app 指令和控制器使用 ng-controller 指令的应用模块。我们已经在主HTML页面导入 mainApp.js 和 studentController.js。
实例
下面的例子将展示上述所有模块。
testAngularJS.html
Angular JS 模块实例
AngularJS 模块应用实例
姓:
名:
姓名: {{student.fullName()}}
科目:
名字
标记
{{ subject.name }}
{{ subject.marks }}
mainApp.js
var mainApp = angular.module("mainApp", []);
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "周",
lastName: "杰伦",
fees:500,
subjects:[
{name:'物理',marks:78},
{name:'化学',marks:82},
{name:'语文',marks:68},
{name:'外语',marks:79},
{name:'Java',marks:87}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
输出结果
在浏览器中打开 textAngularJS.html; 看到的结果如下所示:
AngularJS表单
AngularJS丰富表格填写和验证。 我们可以用ng-click来处理AngularJS点击按钮,使用$dirty和$invalid 来做验证。使用 novalidate 以及表单来声明禁止浏览器做特定的验证。表单控件大量使用Angular事件。让我们首先快速浏览一下事件。
事件
AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。下面是支持Angular JS事件。
-
ng-click
-
ng-dbl-click
-
ng-mousedown
-
ng-mouseup
-
ng-mouseenter
-
ng-mouseleave
-
ng-mousemove
-
ng-mouseover
-
ng-keydown
-
ng-keyup
-
ng-keypress
-
ng-change
ng-click
表格的复位数据上使用 on-click 指令。
验证数据
以下可用于跟踪错误。
-
$dirty - 状态指示值已被改变
-
$invalid- 指示值的状态是无效的
-
$error- 指出确切的错误
示例
下面的例子将展示上述所有指令。
testAngularJS.html
AngularJS 表单
AngularJS 表单应用示例
输出结果
在浏览器中打开 textAngularJS.html。看到结果结果如下:
AngularJS Includes
HTML不支持HTML页面嵌入到HTML页面。为了实现这一函数通过以下方式被使用:
-
使用Ajax - 使服务器调用来获取相应的HTML页面,并将其设置在HTML控制的innerHTML。
-
使用服务器端包含 - JSP,PHP和其他Web端服务器技术可以包括HTML页面在动态页面内。
使用AngularJS,我们可以用ng-include 指令使嵌入一个HTML页面在HTML页面中。
ng-app="" ng-controller="studentController">
ng-include="'main.htm'">
ng-include="'subjects.htm'">
实例
tryAngularJS.html
Angular JS Includes 示例
AngularJS Include示例
main.html
border="0">
姓氏: type="text" ng-model="student.firstName">
名字: type="text" ng-model="student.lastName">
全名: {{student.fullName()}}
subjects.html
科目:
名字
标记
ng-repeat="subject in student.subjects">
{{ subject.name }}
{{ subject.marks }}
输出结果
要运行这个例子,需要部署textAngularJS.html,main.html 和 subjects.html 到Web服务器。使用 URL 访问服务器并在 Web 浏览器中打开 textAngularJS.html。看到结果如下:
AngularJS Ajax
AngularJS提供 $http 控制,可以作为一种服务从服务器读取数据。服务器可以建立数据库调用来获取记录。AngularJS需要JSON格式的数据。一旦数据准备好,$http可以用以下面的方式从服务器得到数据。
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
在这里,data.txt中包含了学生记录。$http服务使 Ajax 调用并设置响应到学生的属性。 "students" 模型可以用于绘制 HTML 表格。
示例
data.txt
[
{
"Name" : "周杰伦",
"RollNo" : 104,
"Percentage" : "80%"
},
{
"Name" : "陈小春",
"RollNo" : 231,
"Percentage" : "71%"
},
{
"Name" : "张学友",
"RollNo" : 391,
"Percentage" : "75%"
},
{
"Name" : "邓紫祺",
"RollNo" : 451,
"Percentage" : "77%"
}
]
testAngularJS.html
Angular JS Includes示例
AngularJS 应用示例
名字
号码
百分比
{{ student.Name }}
{{ student.RollNo }}
{{ student.Percentage }}
输出结果
要运行这个例子,需要部署 textAngularJS.html,data.txt 到 Web 服务器。在服务器使用 URL 在Web浏览器中打开textAngularJS.html。看到结果如下:
AngularJS 视图
AngularJS支持通过单个页面上的多个视图单页应用。要做到这一点AngularJS提供了ng-view 、 ng-template 指令和 $routeProvider 服务。
ng-view
NG-view标记简单地创建一个占位符,其中一个相应的视图(HTML或ng-template视图),可以根据配置来放置。
使用
定义主模块使用一个 div 及ng-view。
ng-app="mainApp">
...
ng-view>
ng-template
ng-template指令用于创建使用脚本标记的HTML视图。它包含一个“id”属性用于由 $routeProvider 映射带有控制器的视图。
使用
定义脚本块类型为 ng-template 的主模块 。
ng-app="mainApp">
...
$routeProvider
$routeProvider是用来设置URL配置的关键服务,映射与对应的HTML页面或ng-template,并附加相同的控制器。
使用
定义脚本块类型为 ng-template 的主模块 。
ng-app="mainApp">
...
使用
定义脚本块及主模块,并设置路由配置。
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
以下是在上面的例子中要考虑的重点。
-
$ routeProvider定义作为一个函数在mainApp模块的配置下,使用键 '$routeProvider'.
-
$routeProvider定义URL “/addStudent”,然后映射到“addStudent.htm”。addStudent.htm 存在于相同的路径的主html页面。如果HTM网页没有定义,那么NG-模板使用id="addStudent.htm"。我们使用ng-template。
-
"otherwise" 用于设置的默认视图。
-
"controller" 用于为视图设置相应的控制器。
示例
下面的例子将展示上述所有指令。
testAngularJS.html
Angular JS 视图
AngularJS 视图应用示例
结果
在浏览器中打开 textAngularJS.html 看到结果如下:
AngularJS 作用域
作用域是视图连接控制器起特殊作用的JavaScript对象。作用域包含模型数据。在控制器,模型数据通过$ scope对象访问。
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
以下是在上面的例子中要考虑的重点。
-
$scope被作为第一个参数在其构造器确定指示控制器。
-
$scope.message 和 $scope.type 在HTML页面中使用模型。
-
我们已经设置了模型的值,这将反映在应用模块,其控制器shapeController中。
-
也可以在 $scope 内定义函数。
继承作用域
作用域由控制器指定。如果我们定义嵌套控制器,那么子控制器将继承其父控制器的作用域范围。
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
以下是在上面的例子中要考虑的重点。
-
我们在shapeController设定模型的值。
-
我们重载子控制器 circleController 的消息。当模块的控制器 circleController 中的 “message” 一起使用,将重写消息。
示例
下面的例子将展示上述所有指令。
testAngularJS.html
Angular JS 表单
AngularJS 表单应用示例
{{message}}
{{type}}
{{message}}
{{type}}
{{message}}
{{type}}
输出结果
在浏览器中打开 textAngularJS.html 看到结果如下:
AngularJS Services
AngularJS使用服务架构支持“分离 - 关注”的概念。服务(Services)是JavaScript函数,并负责只做一个特定的任务。这使得它们维护和测试单个的实体。控制器,过滤器可以基于请求调用它们。服务注入正常使用AngularJS的依赖注入机制。
AngularJS提供例如,$http, $route, $window, $location等许多内置服务,每个服务负责例如一个特定的任务,$http是用来做AJAX调用来从服务器获取数据。 $route用来定义路由信息等。内置的服务总是以$符号为前缀。
有两种方法来创建服务。
-
factory
-
service
使用工厂方法
使用工厂方法,我们首先定义一个工厂,然后分配方法给它。
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
使用服务方法
使用服务的方法,我们定义了一个服务,然后分配方法给它。 也可以注入已可用的服务给它。
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
示例
下面的例子将展示上述所有指令。
testAngularJS.html
Angular JS 服务示例
AngularJS 服务应用示例
ng-app="mainApp" ng-controller="CalcController">
输入一个数字: type="number" ng-model="number" />
结果: {{result}}
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
mainApp.controller('CalcController', function($scope, CalcService) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
结果
在浏览器中打开 textAngularJS.html 看到结果如下:
AngularJS依赖注入
依赖注入是部件赋予的,不是硬组件内的编码的依赖设计模式。这从定位减轻组件的依赖,使依赖可配置。这有助于使组件可重复使用,维护和测试。
AngularJS提供了一个至高无上的依赖注入机制。它提供了一种可被注入彼此作为依赖以下核心组件。
-
值 - value
-
工厂 - factory
-
服务 - service
-
提供者 - provider
-
常量 - constant
值
值是简单的JavaScript对象,并用它在配置阶段传递值到控制器。
//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
工厂
工厂是一个函数用于返回结果值。它根据需要创建一个值,当一个服务或控制器需要时。它通常使用一个工厂函数来计算和返回结果值
//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
...
服务
服务是一个单独的JavaScript包含了一组函数对象来执行某些任务。服务正在使用 service() 函数,然后注射到控制器中。
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
提供者
提供者使用AngularJS内部创建的服务,工厂等。在配置阶段(第一阶段AngularJS引导自身期间)。下面提及的脚本可以被用来创建,我们已经在前面创建了MathService。提供者是一个特殊的工厂方法使用get()方法来返回值/服务/工厂。
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
常量
常量用于通过配置的相应值,考虑到值不能在配置阶段传递使用。
mainApp.constant("configParam", "constant value");
示例
下面的例子将展示上述所有指令的使用。
testAngularJS.html
AngularJS 依赖注入
AngularJS 依赖注入应用示例
输入一个整数:
结果值: {{result}}
结果
在浏览器中打开 textAngularJS.html 看到结果如下:
AngularJS自定义指令
自定义指令用于在AngularJS中来扩展HTML的功能。自定义指令使用“指令”函数定义。自定义指令只是替换了被激活的元素。AngularJS应用程序引导过程中找到匹配的元素,并使用自定义指令compile() 方法,一次使用基于指令的范围自定义指令link() 方法处理元素。AngularJS 为下面的元素类型创建自定义的指令提供支持。
-
元素指令 - 当遇到指令激活匹配的元素。
-
属性 - - 当遇到指令激活属性时匹配。
-
CSS - - 当遇到指令激活匹配CSS样式。
-
注释 - - 当遇到指令激活匹配的注释。
理解自定义指令
定义自定义HTML标签。
name="Mahesh">
name="Piyush">
定义自定义指令来处理上面的自定义HTML标签。
var mainApp = angular.module("mainApp", []);
//Create a directive, first parameter is the html element to be attached.
//We are attaching student html tag.
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
//define the directive object
var directive = {};
//restrict = E, signifies that directive is Element directive
directive.restrict = 'E';
//template replaces the complete element with its text.
directive.template = "Student: {{student.name}} , Roll No: {{student.rollno}}";
//scope is used to distinguish each student element based on criteria.
directive.scope = {
student : "=name"
}
//compile is called during application initialization. AngularJS calls it once when html page is loaded.
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
//linkFunction is linked with each element with scope to get the element specific data.
var linkFunction = function($scope, element, attributes) {
element.html("Student: "+$scope.student.name +" , Roll No: "+$scope.student.rollno+"
");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
定义控制器以更新指令的作用域。这里我们使用名称属性的值作为子的作用域。
mainApp.controller('StudentController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});
示例
Angular JS 自定义指令
AngularJS 自定义指令示例
结果
在Web浏览器中打开textAngularJS.htm。看到结果如下:
AngularJS国际化
AngularJS支持内置国际化三种类型的过滤器:货币,日期和数字。我们只需要根据国家的区域合并相应的JS。默认情况下它处理浏览器的语言环境。例如,使用丹麦语区域设置,使用下面的脚本:
使用中文区域设置示例
testAngularJS.html
Angular JS 国际化
AngularJS 国际化应用示例
{{fees | currency }}
{{admissiondate | date }}
{{rollno | number }}
结果
在Web浏览器中打开textAngularJS.htm。看到结果如下:
使用浏览器的语言环境示例
testAngularJS.html
Angular JS 浏览器语言设置示例
AngularJS 区域语言设置(浏览器设置)
{{fees | currency }}
{{admissiondate | date }}
{{rollno | number }}
结果