《中级前端5.3》AngularJS Services与指令的使用——value,constant,factory,service,ng-repeat

核心内容：1.自定义 Services 服务； 2.Services 在多个 controller 中共享数据； 3.常用指令的使用方法

 

自定义 Services 服务

<body style="padding:10px;" ng-app="app">
    <div ng-controller="MyCtrl">
        <h1>{{realname}}</h1>
        <h2>{{http}}</h2>
        <h2>{{data.msg}}</h2>
        <h2>{{uname}}</h2>
    </div>
</body>
 1 angular.module('app', [])
 2 .value('realname', 'wood')        
 3 .value('realname', 'zhangsan')        //是可以改变的
 4 .constant('http', 'www.baidu.com')        
 5 .constant('http', 'www.sohu.com')        //不可以改变
 6 .factory('Data', function(){
 7     return {
 8         msg : '你好啊',
 9         setMsg : function(){
10             this.msg = "我不好";
11         }
12     }
13 })
14 .service('User', function(){
15     this.firstname = "麦克";
16     this.lastname = "乔丹";
17     this.getName = function(){
18         return this.firstname + this.lastname;
19     }
20 })
21 .controller('MyCtrl', function($scope, realname, http, Data, User){
22     $scope.msg = "你好";
23     $scope.realname = realname;
24     $scope.http = http;
25     $scope.data = Data;
26     Data.setMsg();
27     $scope.uname = User.getName();
28 })

基本的services的创建有：value, constant, factory, service 四种，最常用的是factory，相当于一个全局对象的存在

 

Services 的应用

本课时讲解如何通过 Services 在多个 controller 中共享数据。

<body style="padding:10px;" ng-app="app">
    <div ng-controller="FCtrl">
        <input type="text" ng-model="data.msg">
        <h2>{{data.msg}}</h2>
    </div>
    <div ng-controller="SCtrl">
        <input type="text" ng-model="data.msg">
        <h2>{{data.msg}}</h2>
    </div>
</body>
angular.module('app', [])
.factory('Data', function(){
    return {
        msg : '我来自factory'
    };
})
.controller('FCtrl', function($scope, Data){
    $scope.data = Data;
})
.controller('SCtrl', function($scope, Data){
    $scope.data = Data;
})

通过services，使得两个controller可以共享数据。    factory，相当于一个全局对象的存在

 

 

 

常用指令的使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>AngularJS 进阶</title>
 6     <link rel="stylesheet" href="css/foundation.min.css">
 7     <style type="text/css">
 8         .tx{width:50px;height:50px;margin-bottom:10px;margin-left:80px;}
 9     </style>
10 </head>
11 <body style="padding:10px;" ng-app="app">
12     <div ng-controller="UserCtrl">
13         <form name="f" ng-submit="register(user)">
14         <fieldset>
15             <legend>基本信息</legend>
16             <img ng-src="{{user.icon}}" ng-show = "user.isShowImg" ng-class="{'tx':user.showicon}">
17             <div>
18                 <input type="text" ng-model="user.uname" placehlder="用户名" required >
19                 <input type="password" placehlder="密码" ng-model="user.pwd">
20                 职位：<select>
21                     <option value="">--请选择--</option>
22                     <option value="1" ng-selected="user.zw==1">JAVA工程师</option>
23                     <option value="2" ng-selected="user.zw==2">.NET工程师</option>
24                 </select>
25                 性别：
26                 <input type="radio" name="sex" ng-checked="user.sex==1">&nbsp;男&nbsp;
27                 <input type="radio" name="sex" ng-checked="user.sex==0">&nbsp;女&nbsp;
28             </div>
29         </fieldset>
30         <fieldset>
31             <legend>爱好</legend>
32             <div>
33                 <input type="checkbox" name="aihao" ng-checked="isChecked(1)">&nbsp;篮球&nbsp;
34                 <input type="checkbox" name="aihao" ng-checked="isChecked(2)">&nbsp;足球&nbsp;
35                 <input type="checkbox" name="aihao" ng-checked="isChecked(3)">&nbsp;排球&nbsp;
36             </div>
37         </fieldset>
38         <input type="submit" value="提交" class="button" ng-disabled="f.$invalid">
39         </form>
40     </div>
41 </body>
42 <script type="text/javascript" src="js/angular.min.js"></script>
43 <script type="text/javascript" src="js/zhiling.js"></script>
44 </html>

js:

 1 //ng-bind, {{}},  ng-model, ng-show/ng-hide, ng-if,
 2 //ng-checked, ng-src, ng-href, ng-class, ng-selected, ng-submit, ng-disabled
 3 angular.module('app', [])
 4 .controller('UserCtrl', function($scope) {
 5     $scope.user = {
 6         isShowImg:true,
 7         showicon:true,
 8         icon:'image/logo.jpg',
 9         uname: '',
10         pwd: '',
11         zw: '1',
12         sex: '0',
13         aihao: '[1,3]'
14     };
15     $scope.isChecked = function(n){
16         var isok = false;
17         for(var i=0; i<$scope.user.aihao.length; i++){
18             if(n == $scope.user.aihao[i]){
19                 isok = true;
20                 break;
21             }
22         }
23         return isok;
24     }
25     $scope.register=function(n){
26         console.log(n);
27     }
28 })

 

常用指令 ng-repeat 的使用

<body ng-app="app" ng-controller="AddressCtrl">
    <div style="padding:10px;font-weight:bold">地址管理</div>
    <li ng-repeat="item in list" class="ui-border-t" 
        ng-if="$last==false" ng-class="{'selected':true}">
        <h4>{{$index+1+'.'+item.address+' '+$first+' '+$last}}</h4>
    </li>
</body>
angular.module('app', [])
.controller('AddressCtrl', function($scope){
    $scope.list = [
        {id:1,address:'莲花小区14栋2层'},
        {id:2,address:'弗雷德小区17栋3层'},
        {id:3,address:'兴华路29号'},
        {id:4,address:'西湖好远的地方'}
    ];    
})

posted @ 2016-01-16 13:40  暖风叔叔  阅读(322)  评论(0)    收藏  举报