AngularJS第三课（控制器（续），过滤器,服务）

控制器

实例：

<div ng-app="myApp" ng-controller="myCtrl" >    姓：<input type="text" ng-model="firstName" />    名：<input type="text" ng-model="lastName" />    姓名：{{firstName+lastName}}</div><script>    var app=angular.module('myApp',[]);    app.controller('myCtrl',function($scope){        $scope.firstName="张";        $scope.lastName="宇";    })</script>

ng-app：用来定义一个应用程序
ng-controller：用来定义一个控制器（js）
ng-model：用来绑定数据和输出域

控制器方法

实例：

<div ng-app="myApp" ng-controller="myCtrl" >    姓：<input type="text" ng-model="firstName" />    名：<input type="text" ng-model="lastName" />    姓名：{{fullName()}}</div><script>    var app=angular.module('myApp',[]);    app.controller('myCtrl',function($scope){        $scope.firstName="张";        $scope.lastName="宇";        $scope.fullName=function(){            return $scope.firstName+$scope.lastName;        }    })</script>

控制器方法（变量和属性）的编写和普通情况相同

引用外部文件中的控制器

实例：

<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 src="/statics/demosource/personController.js"></script>

在大型的应用程序中，通常直接在script标签中引入即可。

过滤器

使用方法：在表达式中：| 过滤规则。实例：

<div ng-app="myApp" ng-controller="myCtrl" >    姓：<input type="text" ng-model="firstName" />    名：<input type="text" ng-model="lastName" />    姓名：{{fullName()|uppercase}}</div><script>    var app=angular.module('myApp',[]);    app.controller('myCtrl',function($scope){        $scope.firstName="zhang";        $scope.lastName="yu";        $scope.fullName=function(){            return $scope.firstName+$scope.lastName;        }    })</script>

fullName（）使用了 | uppercase之后输出的英文字符是大写的。

所有过滤器：

• currency：把数字转化成货币
• lowercase：转化成小写
• uppercase：转化成大写
• filter：从数据项中选择子集
• orderBy：排列数组

PS：也可以向指令中添加过滤器，方法同上。

服务

AngularJS的服务就是特定的函数或者方法。比如$location服务（这个是预定义好的）,可以用来返回url地址。

实例：

<div ng-app="myApp" ng-controller="myCtrl" >    url地址：{{myURL}}</div><script>    var app=angular.module('myApp',[]);    app.controller('myCtrl',function($scope,$location){        $scope.myURL=$location.absUrl();    })</script>

$location服务是作为参数传递的。

timeout服务

实例：

<div ng-app="myApp" ng-controller="myCtrl" >    2s后：{{myHeader}}</div><script>    var app=angular.module('myApp',[]);    app.controller('myCtrl',function($scope,$timeout){        $scope.myHeader="Hello World";        $timeout(function(){            $scope.myHeader="Welcome";        },2000);    });</script>

timeout就是指定n秒之后执行某个函数。参数是方法和秒数。

interval服务

指定间隔n秒执行函数实例：

<div ng-app="myApp" ng-controller="myCtrl" >    显示时间：{{theTime}}</div><script>    var app=angular.module('myApp',[]);    app.controller('myCtrl',function($scope,$interval){        $scope.theTime=new Date().toLocaleTimeString();        $interval(function(){            $scope.theTime=new Date().toLocaleTimeString();        },1000);    });</script>

指定间隔1秒执行显示当前时间的函数。

自建服务

除了预定义的服务，还可以自己创建服务。实例：

<div ng-app="myApp" ng-controller="myCtrl" >    {{one}}</div><script>    var app=angular.module('myApp',[]);    //创建一个不论输入什么，都只输出1的服务    app.service('onlyOne',function(){        this.func=function(x){            return 1;        }    })    app.controller('myCtrl',function($scope,onlyOne){        $scope.one=onlyOne.func(255);    });</script>

需要创建服务的名字和方法的名字。