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>

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