AugularJS从入门到实践（二）

来源：互联网发布：同业分销知乎编辑：程序博客网时间：2024/06/10 02:18

前言
前端
　 AngularJS是为了克服HTML在构建应用上的不足而设计的。（引用百度百科）

本篇学习主要有两个部分：
①【AngularJS 过滤器】
②【AngularJS 服务】
　
　　　　　　　　　　

1、AngularJS 过滤器

【常用指令】
　AngularJS 过滤器：过滤器可以使用一个管道字符（|）添加到表达式和指令中。


       >>>系统内置过滤器：

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

[lowercase、uppercase、currency]

    <body ng-app="app" ng-controller="ctrl">        <p>{{"aBcDeF"|lowercase}}</p>     // 输出为abcdef        <p>{{"aBcDeF"|uppercase}}</p>     //输出为ABCDEF            <p>{{123456|currency}}</p>        //输出为$123,456.00    </body>        <script language="JavaScript" src="angular-1.5.6/angular.js"></script>    <script type="text/javascript">        angular.module("app",[])        .controller("ctrl",function($scope){                    })        </script>

【filter和orderBy】

　　　　写到这里就不得不说一下angular中的 ng-repeat 指令　　　　

　　　　ng-repeat 指令用于循环输出指定次数的 HTML 元素。

　　　　集合必须是数组或对象。

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="UTF-8"> 5         <title></title> 6         <link rel="stylesheet" href="libs/bootstrap.css" /> 7     </head> 8      9     <body ng-app="app" ng-controller="ctrl">10         11         <form class="form-horizontal">12             13         </form>14         <div class="form-group">15             <label>请输入筛选信息：</label>16             <input type="text" ng-model="search" />17         </div>18         <table class="table table-bordered">19             <thead>20                 <tr>21                     <th>姓名</th>22                     <th>年龄</th>23                     <th>成绩</th>24                 </tr>25             </thead>26             <tr ng-repeat="item in classes| filter:search | orderBy:'grade'">27                 <td>{{item.name}}</td>28                 <td>{{item.age}}</td>29                 <td>{{item.grade}}</td>30             </tr>31         </table>    32     </body>33     <script src="libs/angular.js"></script>34     <script type="text/javascript">35         var app = angular.module("app",[])36          .controller("ctrl",function($scope){37             $scope.classes = [38                 {name:"张二",age:"22",grade:"88"},39                 {name:"张三",age:"21",grade:"89"},40                 {name:"李四",age:"20",grade:"90"},41                 {name:"李五",age:"21",grade:"91"},42                 {name:"王大麻子",age:"18",grade:"92"},43                 {name:"王二麻子",age:"17",grade:"93"}44               ];45             })46         47         48     </script>49 </html>

2、AngularJS 服务

　　　
　【服务Service】

       　　 $location：它可以返回当前页面的 URL 地址。
               $http 服务: 服务向服务器发送请求，应用响应服务器传送过来的数据。
             $timeout 服务: JS window.setTimeout 函数。
             $interval 服务: JS window.setInterval 函数

效果图：

 1     <body ng-app="app" ng-controller="ctrl"> 2         <pre>{{local}}</pre> 3         <p ng-bind="myHeader"></p> 4         <p ng-bind="num"></p> 5         <p>255转为16进制为{{gongneng}}</p> 6         <p>{{hex}}</p> 7         <p>{{123|filt}}</p> 8          9     </body>10     <script src="../libs/angular.js"></script>11     <script>12         13         angular.module("app",[])14         .controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){15             $scope.local = $location.$$host;16             $timeout(function () {17                 $scope.myHeader = "How are you today?";18             }, 2000);19             $scope.num = 0;20             $interval(function(){21                 $scope.num ++;22             },1000);23             24             $scope.gongneng = $hexafy.$$gongneng;25             $scope.hex = $hexafy.myFunc(255);26             27         })28         /*自定义服务*/29         .service('$hexafy', function() {30             this.$$gongneng = "将转入的数字，转为16进制";31             this.myFunc = function (x) {32                 return x.toString(16);33             }34         })35         .filter("filt",function(){36             return function(x){37                 return x.toString(16);38             }39         })    40     </script>

View Code

【自定义服务factory】

　　　　 factory 是一个函数用于返回值,通常我们使用 factory 函数来计算或返回值。(factory使用上，与service差距不大)

效果图：

 1     <body ng-app="app" ng-controller="ctrl"> 2         <p> 3             [功能]<br/> 4             {{gongneng}} 5         </p> 6         <p> 7             255转成16进制为：{{num}} 8         </p> 9     </body>10     <script src="../libs/angular.js"></script>11     <script>12         13         angular.module("app",[])14         .controller("ctrl",function($scope,hexafy){15             $scope.gongneng = hexafy.gongneng;16             $scope.num = hexafy.myFunc(255);17         })18         .factory('hexafy',function(){19             var obj = {20                 gongneng : "将转入的数字，转为16进制",21                 myFunc:function(x){22                     return x.toString(16);23                 }24             };25             return obj;26         })27         /*自定义服务*/28 //        .service('hexafy', function() {29 //            this.gongneng = "将转入的数字，转为16进制";30 //            this.myFunc = function (x) {31 //                return x.toString(16);32 //            }33 //        })34         35         36     </script>

View Code

　【自定义服务provide】

       　　 1、在AngularJS中，Service，factory都是基于provider实现的。
       　　 2、在provider中，通过$get()方法提供了factory的写法，用于返回 value/service/factory。；
     　　 3、provider是三种自定义服务中，唯一可以写进config配置阶段的一种。

效果图：

 1     <body ng-app="app" ng-controller="ctrl"> 2         <p> 3             [功能]<br/> 4             {{gongneng}} 5         </p> 6         <p> 7             255转成16进制为：{{num}} 8         </p> 9     </body>10     <script src="../libs/angular.js"></script>11     <script>12         13         angular.module("app",[])14         .controller("ctrl",function($scope,hexafy){15             $scope.gongneng = hexafy.gongneng;16             $scope.num = hexafy.myFunc(255);17         })18         19         /*定义一个provider服务*/20         .provider('hexafy',function(){21 //            this.gongneng = "将转入的数字，转为16进制";22             this.$get = function(){23                 var obj = {24                     gongneng : "将转入的数字，转为16进制",25                     myFunc : function(x){26                         return x.toString(16);27                     }28                 }29                 return obj;30             }31         })32         33 //        .factory('hexafy',function(){34 //            var obj = {35 //                gongneng : "将转入的数字，转为16进制",36 //                myFunc:function(x){37 //                    return x.toString(16);38 //                }39 //            };40 //            return obj;41 //        })42 43         /*自定义服务*/44 //        .service('hexafy', function() {45 //            this.gongneng = "将转入的数字，转为16进制";46 //            this.myFunc = function (x) {47 //                return x.toString(16);48 //            }49 //        })50         51         52     </script>

View Code

学习时候的笔记，可能会有一些错误的地方，欢迎各位的批评指点。

反思，复盘，每天收获一点---------------------期待更好的自己

阅读全文

0 0