首页 > 代码库 > 深究angularJS系列 - 第三弹
深究angularJS系列 - 第三弹
深究angularJS系列 - 初识
深究angularJS系列 - 第二弹
深究angularJS系列 - 第三弹，我们一起深入探究angular的服务和自定义指令O(∩_∩)O~~
Angular服务
$http：
- $http是angular中的一个核心服务;
- $http利用浏览器的xmlhttprequest或JSONP与远程HTTP服务器进行交互;
- $http的支持多种method的请求，get、post、put、delete、jsonp等。
下面通过JSONP方法进行$http服务的使用说明，如下：
1 //$http 利用XMLHttpRequest/JSONP2 var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=angular&json=1&p=3&sid=1461_21107_17001_21407_21378_21190_20929&req=2&csor=7&pwd=angula&cb=JSON_CALLBACK&_=1477454603449";3 $http({4 url:url,5 method:"JSONP" //方式有（GET/POST/DELETE/UPDATE/JSONP)等6 }).success(function(data){ //成功回调7 console.log(data.s);8 }).error(function(data){ //错误回调9 })
Angular服务三种定义方式：
- provider相当于注入$get定义的函数；
- factory相当于注入一个方法；
- service相当于注入一个函数。
1 <!DOCTYPE html> 2 <html lang="en" ng-app="demo"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 7 <link rel="stylesheet" href="lib/bootstrap.css"> 8 </head> 9 <body ng-controller="oneCtrl">10 <div>{{ view1 }}</div>11 <div>{{ view2 }}</div>12 <div>{{ view3 }}</div>13 <script src="lib/angular.js"></script>14 <script>15 (function(){16 angular.module("demo",[])17 .provider("oneProvider",function(){18 this.$get = function(){19 return "one provider";20 }21 })22 .factory("oneFactory",function(){23 return{24 lable: function(){25 return "two factory";26 }27 }28 })29 .service("oneService",function(){30 this.lable = "three service";31 })32 .controller("oneCtrl",function($scope,oneProvider,oneFactory,oneService){33 $scope.view1 = oneProvider;34 $scope.view2 = oneFactory.lable();35 $scope.view3 = oneService.lable;36 })37 })()38 </script>39 </body>
结果如下：
Angular中的$q与Promise
$q解决异步请求的框架；
promise一种编程模式，源于厂商和客户交易的一个故事：
客户对厂商发送了一次延期的请求（$q.defer）。
1 var defered = $q.defer();客户等待有两种结果success（defered.resolve），error(deferred.reject)；
1 .success(function(data){2 defered.resolve(data);3 }).error(function(data){4 defered.reject(data);5 });
厂商当时只能返回给客户的一个承诺 （defered.promise）
1 return defered.promise;这是一个异步事件，客户等待，厂商则准备商品；
交易中结果 $q.then；
1.厂商，签收，success 事情解决了；
2.厂商，失败，error 事情做不了；
3.厂商，签收，而且服务特别好 notice。
1 oneService.getBaiduList().then(function(success){2 console.log(success);3 },function(error){4 5 },function(notice){6 7 })
案例如下：
1 <!DOCTYPE html> 2 <html lang="en" ng-app="demo"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 7 <link rel="stylesheet" href="lib/bootstrap.css"> 8 </head> 9 <body ng-controller="oneCtrl">10 <script src="lib/angular.js"></script>11 <script>12 (function(){13 angular.module("demo",[])14 .service("oneService",function($q,$http){15 this.getBaiduList = function(){16 var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=angular&json=1&p=3&sid=1461_21107_17001_21407_21378_21190_20929&req=2&cb=JSON_CALLBACK&csor=1&pwd=angula&_=1477454603449";17 //为我们的http请求创建一个延期请求18 var defered = $q.defer();19 $http({20 url:url,21 method:"JSONP"22 }).success(function(data){23 defered.resolve(data);24 }).error(function(data){25 defered.reject(data);26 });27 return defered.promise;28 }29 })30 .controller("oneCtrl",function($scope,oneService){31 oneService.getBaiduList().then(function(success){32 console.log(success);33 },function(error){34 },function(notice){35 })36 })37 })()38 </script>39 </body>40 </html>
效果如下：
Angular自定义指令
- Directive(指令，命令)，内置的指令 ng-* 放在html标签上的 ng-app ng-click ng-controller；
- Directive(组件) 原生包装过的指令；
- Directive通过扩展html标签的方式，实现业务的可复用；
- Directive封装了js,css html,用指令就像用html标签一样简单。
自定义指令创建
1 <!DOCTYPE html> 2 <html lang="en" ng-app="demo"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 7 <link rel="stylesheet" href="lib/bootstrap.css"> 8 </head> 9 <body>10 <one></one>11 <script src="lib/angular.js"></script>12 <script>13 (function(){14 angular.module("demo",[])15 .directive("one",function(){16 return { //指令的配置项目17 // A:attribute E:element C:class M: 注释18 restrict:"E", //用于定义（限制）自定指令在页面上的创建方式19 template:"<div class=‘label-danger well‘>hello one</div>", //template内联 //外联 templateUrl20 replace: false, //true 默认,覆盖，false:不覆盖21 transclude:true22 }23 })24 })()25 </script>26 </body>27 </html>
效果如下：
指令间的嵌套
1 <!DOCTYPE html> 2 <html lang="en" ng-app="demo"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 7 <link rel="stylesheet" href="lib/bootstrap.css"> 8 </head> 9 <body>10 <one>11 <two></two>12 </one>13 <script src="lib/angular.js"></script>14 <script>15 (function(){16 angular.module("demo",[])17 .directive("one",function(){18 return {19 restrict:"AE", //AECM区分大小写20 template:"<div class=‘well‘ >hello one <div ng-transclude></div></div> ",21 replace:false,22 transclude:true23 }24 })25 .directive("two",function(){26 return {27 restrict:"AE",28 template:"<div class=‘well‘>hello two</div>"29 }30 })31 })()32 </script>33 </body>34 </html>
效果如下：
独立作用域的指令
1 <!DOCTYPE html> 2 <html lang="en" ng-app="demo"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 7 <link rel="stylesheet" href="lib/bootstrap.css"> 8 </head> 9 <body>10 <hello></hello>11 <hello></hello>12 <hello></hello>13 <hello></hello>14 <script src="lib/angular.js"></script>15 <script>16 (function(){17 angular.module("demo",[])18 .directive("hello",function(){19 return {20 scope:{}, // scope:{} 表示创建一个独立作用域的指令21 restrict:"AE",22 template:"<div class=‘well‘>" +23 "<input type=‘text‘ ng-model=‘txt‘> {{txt}}</div>"24 }25 })26 })()27 </script>28 </body>29 </html>
效果如下：
Link&compile
1 <!DOCTYPE html> 2 <html lang="en" ng-app="demo"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 7 <link rel="stylesheet" href="lib/bootstrap.css"> 8 </head> 9 <body>10 <hello cm="hi"></hello>11 <script src="lib/angular.js"></script>12 <script>13 (function(){14 angular.module("demo",[])15 .directive("hello",function(){16 return {17 restrict:"AE",18 template:"<div class=‘well‘>hello</div>",19 //指令解析的最后调用的一个方法20 compile:function(){21 return {22 //渲染到页面23 pre:function(scope,element,attr,ctrl){24 console.log("pre-link" + "--" + attr["cm"]);25 },26 post:function(scope,element,attr,ctrl){27 console.log("post-link" + "--" + attr["cm"]);28 }29 }30 },31 link:function(scope,element,attr,ctrl){32 console.log("----link----");33 }34 }35 })36 })()37 </script>38 </body>39 </html>
效果如下：
敬请留言指正补充交流！！
（未完待续~~）
深究angularJS系列 - 第三弹
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。