AngularJS基础概要整理（下）

五、AngularJS Scope(作用域)

　　Scope(作用域)是应用在HTML(视图)和JavaScript(控制器)之间的纽带。

　　Scope是一个对象，有可用的方法和属性。

　　Scope可应用在视图和控制器上。

1.如何使用Scope

　　创建控制器时，可以将$scope对象当作一个参数传递：

<div ng-app=”myApp” ng-controller=”myCtrl”>

　　<h1>{{carname}}</h1>

</div>

<script>

　　Var app = angular.module(‘myApp’,[]);

　　App.controller(‘myCtrl’,function($scope){

　　　　$scope.carname = “Volvo”;

　　});

</script>

<p>控制器中创建一个属性名”carname”，对应了视图中使用{{}}中的名称。</p>

　　当在控制器中添加$scope对象时，视图（HTML）可以获取这些属性。

　　视图中，不需要添加$scope前缀，只需要添加属性名即可，如：{{carname}}。

2.Scope概述

　　AngularJS应用组成如下：

　　·View(视图)，即HTML。

　　·Model(模型)，当前视图中可用的数据。

　　·Controller(控制器)，即JavaScript函数，可以添加或修改属性。

　　scope是模型。

　　Scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

　　如果你修改了视图，模型和控制器也会相应更新：

<div ng-app=”myApp” ng-controller=”myCtrl”>

　　<input ng-model=”name”>

　　<h1>我的名字是{{name}}</h1>

</div>

<script>

　　Var app = angular.module(‘myApp’,[]);

　　App.controller(‘myCtrl’,function($scope){

　　　　$scope.name = “John Doe”;

　　});

</script>

<p>当你修改输入框中的值时，会影响到模型(model)，当然也会影响到控制器对应的属性值。</p>

3.根作用域

　　所有的应用都有一个$rootScope，它可以作用在ng-app指令包含的所有HTML元素中。

　　$rootScope可作用于整个应用中。是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。

　　创建控制器时，将$rootScope作为参数传递，可在应用中使用：

<div ng-ap=”myApp” ng-controller=”myCtrl”>

　　<h1>姓氏为{{lastname}}家族成员：</h1>

　　<ul>

　　　　<li ng-repeat=”x in names”>{{x}}{{lastname}}</li>

　　</ul>

</div>

<script>

　　Var app = angular.module(‘myApp’,[]);

　　App.controller(‘myCtrl’,function($scope,$rootScope){

　　　　$scope.names = [“Emil”,”Tobias”,”Linus”];

　　　　$rootScope.lastname = “Refsnes”;

　　});

</script>

<p>注意$rootScope在循环对象内外都可以访问。</p>

六、AngularJS控制器

　　AngularJS控制器控制AngularJS应用程序的数据。

　　AngularJS控制器是常规的JavaScript对象。

1.AngularJS控制器

　　AngularJS应用程序被控制器控制。

　　Ng-controller指令定义了应用程序控制器。

　　控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。

<div ng-app=”myApp” ng-controller=”personCtrl”>

　　名：<input type=”text” ng-model=”firstName”><br>

　　姓：<input type=”text” ng-model=”lastName”><br>

　　<br>

　　姓名：{{firstName+” ”+lastName}}

</div>

<script>

Var app = angular.module(“myApp”,[]);

App.controller(‘personCtrl’,function($scope){

　　$scope.firstName = “John”;

　　$scope.lastName = “Doe”;

});

</script>

解析：

　　Ng-controller=”myCtrl”属性是一个AngularJS指令。用于定义一个控制器。

　　myCtrl函数是一个JavaScript函数。

　　AngularJS使用$scope对象来调用控制器。

　　在AngularJS中，$scope是一个应用对象（属于应用变量和函数）。

　　控制器的$scope（相当于作用域、控制范围）用来保存AngularJS Model（模型）的对象。

　　控制器在作用域中创建了两个属性（firstName和lastName）。

　　Ng-model指令绑定输入域到控制器的属性（firstName和lastName）。

2.控制器方法

　　上面的实例演示了一个带有lastName和firstName这两个属性的控制器对象。

　　控制器也可以有方法（变量和函数）：

<div ng-app=”myApp” ng-controller=”personCtrl”>

　　名：<input type=”text” ng-model=”firstName”><br>

　　姓：<input type=”text” ng-model=”lastName”><br>

　　<br>

　　姓名：{{fullName()}}

</div>

<script>

Var app = angular.module(“myApp”,[]);

App.controller(‘personCtrl’,function($scope){

　　$scope.firstName = “John”;

　　$scope.lastName = “Doe”;

　　$scope.fullName = function(){

　　　　Return $scope.firstName + “ “ + $scope.lastName;

　　}

});

</script>

3.外部文件中的控制器

　　在大型的应用程序中，通常是把控制器存储在外部文件中。

　　只需要把<script>标签中的代码复制到名为personController.js的外部文件中即可：

<div ng-app=”myApp” ng-controller=”personCtrl”>

　　First Name:<input type=”text” ng-model=”firstName”><br>

　　Last Name:<input type=”text” ng-model=”lastName”><br>

　　<br>

　　Full Name:{{firstName + “ “ + lastName}}

</div>

<script src=”personController.js”></script>

personContrller.js里的代码：

Angular.module(‘myApp’,[]).controller(‘personCtrl’,function($scope){

　　　　$scope.firstName = “John”,

　　　　$scope.lastName = ”Doe”,

　　　　$scope.fullName = function(){

　　　　Return $scope.firstName + “ “ + $scope.lastName;

　　}

});

4.其他实例

　　以下实例创建一个新的控制器文件：

Angular.module(‘myApp’,[]).controller(‘namesCtrl’,function($scope){

　　$scope.names = [

　　　　{name:’Jani’,country:’Norway’},

　　　　{name:’Hege’,country:’Sweden’},

　　　　{name:’Kai’,country:’Denmark’}

　　];

});

　　保存文件为namesController.js

　　然后，在应用中使用控制器文件：

<div ng-app=”myApp” ng-controller=”namesCtrl”>

　　<ul>

　　　　<li ng-repeat=”x in names”>

　　　　　　{{ x.name + ‘,’ + x.country }}

　　　　</li>

　　</ul>

</div>

<script src=”namesController.js”></script>

七、AngularJS过滤器

　　过滤器可以使用一个管道字符(|)添加到表达式和指令中。

1.AngularJS过滤器

　　AngularJS过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
Uppercase	格式化字符串为大写

2.表达式中添加过滤器

　　过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。

　　（下面两个实例将使用前面提到的person控制器）

　　Uppercase过滤器将字符串格式化为大写：

<div ng-app=”myApp” ng-controller=”personCtrl”>

　　<p>姓名为{{lastName | uppercase}}</p>

</div>

Lowercase过滤器将字符串格式化为小写：

<div ng-app=”myApp” ng-controller=”personCtrl”>

　　<p>姓名为{{lastName | lowercase}}</p>

</div>

3.currency过滤器

Currency过滤器将数字格式化为货币格式：

<div ng-app=”myApp” ng-controller=”costCtrl”>

　　数量：<input type=”number” ng-model=”quantity”>

　　价格：<input type=”number” ng-model=”price”>

　　<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

<script>

Var app = angular.module(‘myApp’,[]);

App.controller(‘costCtrl’,function($scope){

　　$scope.quantity = 1;

　　$scope.price = 9.99;

});

</script>

4.向指令添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

orderBy过滤器根据表达式排列数组：

<div ng-app=”myApp” ng-controller=”namesCtrl”>

　　<ul>

　　　　<li ng-repeat=”x in names | orderBy:’country’”>

　　　　　　{{ x.name + ‘,’ + x.country }}

　　　　</li>

　　</ul>

</div>

5.过滤输入

　　输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

　　Filter过滤器从数组中选择一个子集：

<div ng-app=”myApp” ng-controller=”namesCtrl”>

　　<p><input type=”text” ng-model=”test”></p>

　　<ul>

　　　　<li ng-repeat=”x in names | filter:test | orderBy:’country’”>

　　　　　　{{ (x.name | uppercase) + ‘,’ + x.country }}

　　　　</li>

　　</ul>

</div>

<script src=”namesController.js”></script>

八、AngularJS服务(Service)

　　AngularJS中你可以创建自己的服务，或使用内建服务。

1.什么是服务

　　在AngularJS中，服务是一个函数或对象，可在你的AngularJS应用中使用。

　　AngularJS内建了30多个服务。

　　有个$location服务，它可以返回当前页面的URL地址。

var app = angular.module(‘myApp’,[]);

App.controller(‘customersCtrl’,function($scope,$location){

　　myUrl = $location.absUrl();

});

　　注意$location服务是作为一个参数传递到controller中。如果要使用它，需要在controller中定义。

2.为什么使用服务

　　$http是AngularJS应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

　　使用$http服务向服务器请求数据：

var app = angular.module(‘myApp’,[]);

App.controller(‘myCtrl’,function($scope,$http){

　　$http.get(“welcome.htm”).then(function (response) {

　　　　$scope.myWelcome = response.data;

　　});

});

3.$timeout服务

　　AngularJS$timeout服务对应了JSwindow.setTimeout函数。

　　两秒后显示信息：

Var app = angular.module(‘myApp’,[]);

App.controller(‘myCtrl’,function($scope,$timeout){

　　$scope.myHeader = “Hello World!”;

　　$timeout(function(){

　　　　$scope.myHeader = “How are you today?”;

　　},2000);

});

4.$interval服务

　　AngularJS$interval服务对应了JSwindow.setInterval函数。

　　每秒显示信息：

Var app = angular.module(‘myApp’,[]);

App.controller(‘myCtrl’,function($scope,$interval){

　　$scope.theTime = new Date().toLocaleTimeString();

　　$interval(function(){

　　　　$scope.theTime = new Date().toLocaleTimeString();

　　},1000);

});

5.创建自定义服务

　　可以创建自定义的访问，链接到模块中：

　　创建名为hexafy的访问：

App.service(‘hexafy’,function(){

　　this.myFunc = function (x) {

　　　　Return x.toString(16);

　　}

});

　　要使用自定义的访问，需要在定义过滤器的时候独立添加；

　　使用自定义的服务hexafy将一个数字转换为16进制数：

App.controller(‘myCtrl’,function($scope,hexafy){

　　$scope.hex = hexafy.myFunc(255);

});

6.过滤器中，使用自定义服务

　　当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

　　在过滤器myFormat中使用服务hexafy:

App.filter(‘myFormat’,[‘hexify’,function(hexafy){

　　Return function(x) {

　　　　Return hexafy.myFunc(x);

　　};

}]);

　　在从对象会数组中获取值时你可以使用过滤器：

　　创建服务hexafy:

<ul>

　　<li ng-repeat=”x in counts”>{{x | myFormat}}</li>

</ul>

示例：

<div ng-app=”myApp” ng-controller=”myCtrl”>

　　<p>在获取数组[255,251,200]值时使用过滤器：</p>

　　<ul>

　　　　<li ng-repeat=”x in counts”>{{x | myFormat}}</li>

　　</ul>

　　<p>过滤器使用服务将10进制转换成16进制。</p>

</div>

<script>

var app = angular.module(‘myApp’,[]);

App.service(“hexafy”,function(){

　　this.myFunc = function (x) {

　　　　Return x.toString(16);

　　}

});

App.filter(‘myFormat’,[‘hexafy’,function(hexafy){

　　Return function(x){

　　　　Return hexafy.myFunc(x);

　　};

}]);

</script>

其他：

ng-app:使用AngularJS自定义的ng-appHTML属性引导AngularJS库，只有被具有ng-app属性的Dom元素包含的元素才会受AngularJS的影响。

ng-init:在模板渲染前，可用ng-init初始化模型name，并通过{{name}}表达式来传递它的值。

AngularJS模板系统的重要特征：

·使用自定义的HTML标签与属性，为静态的HTML文档添加动态行为。

·使用双花括号作为输出模型值的表达式的分隔符。