AngularJS快速入门

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

Disable Button	点击我!
显示按钮	Click Me!
隐藏按钮	Click Me!
Total click: {{ clickCounter }}	点击我!

26

..

这里我们使用 ng-app 指令和控制器使用 ng-controller 指令的应用模块。我们已经在主HTML页面导入 mainApp.js 和 studentController.js。

实例

下面的例子将展示上述所有模块。

testAngularJS.html

1

2

3

4

5

6

7

20

21

22

AngularJS 模块应用实例

23

42

43

mainApp.js

var mainApp = angular.module("mainApp", []);

studentController.js

1 mainApp.controller("studentController", function($scope) {

2 $scope.student = {

3 firstName: "周",

4 lastName: "杰伦",

5 fees:500,

6 subjects:[

7 {name:'物理',marks:78},

8 {name:'化学',marks:82},

9 {name:'语文',marks:68},

10 {name:'外语',marks:79},

11 {name:'Java',marks:87}

12 ],

13 fullName: function() {

14 var studentObject;

15 studentObject = $scope.student;

16 return studentObject.firstName + " " + studentObject.lastName;

17 }

18 };

19 });

输出结果

在浏览器中打开 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 指令。

Reset

验证数据

以下可用于跟踪错误。

$dirty - 状态指示值已被改变

$invalid- 指示值的状态是无效的

$error- 指出确切的错误

示例

下面的例子将展示上述所有指令。

testAngularJS.html

AngularJS 表单应用示例

输出结果

在浏览器中打开 textAngularJS.html。看到结果结果如下：

AngularJS Includes

HTML不支持HTML页面嵌入到HTML页面。为了实现这一函数通过以下方式被使用：

使用Ajax - 使服务器调用来获取相应的HTML页面，并将其设置在HTML控制的innerHTML。

使用服务器端包含 - JSP，PHP和其他Web端服务器技术可以包括HTML页面在动态页面内。

使用AngularJS，我们可以用ng-include 指令使嵌入一个HTML页面在HTML页面中。

实例

tryAngularJS.html

1

2

3

4

5

18

19

20

AngularJS Include示例

21

25

48

49

main.html

姓氏:
名字:
全名:	{{student.fullName()}}

subjects.html

科目:

名字	标记
{{ 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

1

2

3

4

5

6

19

20

21

AngularJS 应用示例

22

36

46

47

输出结果

要运行这个例子，需要部署 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-template

ng-template指令用于创建使用脚本标记的HTML视图。它包含一个“id”属性用于由 $routeProvider 映射带有控制器的视图。

使用

定义脚本块类型为 ng-template 的主模块 。

$routeProvider

$routeProvider是用来设置URL配置的关键服务，映射与对应的HTML页面或ng-template，并附加相同的控制器。

使用

定义脚本块类型为 ng-template 的主模块 。

使用

定义脚本块及主模块，并设置路由配置。

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

1

2

3

4

5

6

7

8

9

AngularJS 视图应用示例

10

23

24

51

52

结果

在浏览器中打开 textAngularJS.html 看到结果如下：

AngularJS 作用域

作用域是视图连接控制器起特殊作用的JavaScript对象。作用域包含模型数据。在控制器，模型数据通过$ scope对象访问。

以下是在上面的例子中要考虑的重点。

$scope被作为第一个参数在其构造器确定指示控制器。

$scope.message 和 $scope.type 在HTML页面中使用模型。

我们已经设置了模型的值，这将反映在应用模块，其控制器shapeController中。

也可以在 $scope 内定义函数。

继承作用域

作用域由控制器指定。如果我们定义嵌套控制器，那么子控制器将继承其父控制器的作用域范围。

以下是在上面的例子中要考虑的重点。

我们在shapeController设定模型的值。

我们重载子控制器 circleController 的消息。当模块的控制器 circleController 中的 “message” 一起使用，将重写消息。

示例

下面的例子将展示上述所有指令。

testAngularJS.html

1

2

3

4

5

6

7

AngularJS 表单应用示例

8

17

18

36

37

输出结果

在浏览器中打开 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

1

2

3

4

5

6

7

8

AngularJS 服务应用示例

9

14

36

37

结果

在浏览器中打开 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

1

2

3

4

5

6

7

AngularJS 依赖注入应用示例

8

13

14

54

55

结果

在浏览器中打开 textAngularJS.html 看到结果如下：

AngularJS自定义指令

自定义指令用于在AngularJS中来扩展HTML的功能。自定义指令使用“指令”函数定义。自定义指令只是替换了被激活的元素。AngularJS应用程序引导过程中找到匹配的元素，并使用自定义指令compile() 方法，一次使用基于指令的范围自定义指令link() 方法处理元素。AngularJS 为下面的元素类型创建自定义的指令提供支持。

元素指令 - 当遇到指令激活匹配的元素。

属性 - - 当遇到指令激活属性时匹配。

CSS - - 当遇到指令激活匹配CSS样式。

注释 - - 当遇到指令激活匹配的注释。

理解自定义指令

定义自定义HTML标签。

定义自定义指令来处理上面的自定义HTML标签。

1 var mainApp = angular.module("mainApp", []);

2

3 //Create a directive, first parameter is the html element to be attached.

4 //We are attaching student html tag.

5 //This directive will be activated as soon as any student element is encountered in html

6 mainApp.directive('student', function() {

7 //define the directive object

8 var directive = {};

9 //restrict = E, signifies that directive is Element directive

10 directive.restrict = 'E';

11 //template replaces the complete element with its text.

12 directive.template = "Student: {{student.name}} , Roll No: {{student.rollno}}";

13 //scope is used to distinguish each student element based on criteria.

14 directive.scope = {

15 student : "=name"

16 }

17 //compile is called during application initialization. AngularJS calls it once when html page is loaded.

18 directive.compile = function(element, attributes) {

19 element.css("border", "1px solid #cccccc");

20 //linkFunction is linked with each element with scope to get the element specific data.

21 var linkFunction = function($scope, element, attributes) {

22 element.html("Student: "+$scope.student.name +" , Roll No: "+$scope.student.rollno+"
");

23 element.css("background-color", "#ff00ff");

24 }

25 return linkFunction;

26 }

27 return directive;

28 });

29 //定义控制器以更新指令的作用域。这里我们使用名称属性的值作为子的作用域。

30

31 mainApp.controller('StudentController', function($scope) {

32 $scope.Mahesh = {};

33 $scope.Mahesh.name = "Mahesh Parashar";

34 $scope.Mahesh.rollno = 1;

35

36 $scope.Piyush = {};

37 $scope.Piyush.name = "Piyush Parashar";

38 $scope.Piyush.rollno = 2;

39 });

示例

1

2

3

4

5

6

7

AngularJS 自定义指令示例

8

12

13

50

51

结果

在Web浏览器中打开textAngularJS.htm。看到结果如下：

AngularJS国际化

AngularJS支持内置国际化三种类型的过滤器：货币，日期和数字。我们只需要根据国家的区域合并相应的JS。默认情况下它处理浏览器的语言环境。例如，使用丹麦语区域设置，使用下面的脚本：

使用中文区域设置示例

testAngularJS.html

1

2

3

4

5

6

AngularJS 国际化应用示例

7

12

13

14

24

25

结果

在Web浏览器中打开textAngularJS.htm。看到结果如下：

使用浏览器的语言环境示例

testAngularJS.html

1

2

3

4

5

6

AngularJS 区域语言设置(浏览器设置)

7

12

13

14

24

25

结果

在Web浏览器中打开textAngularJS.html。看到结果如下：