深究angularJS系列 - 第二弹

首页 > 代码库 > 深究angularJS系列 - 第二弹

深究angularJS系列 - 第二弹

2024-08-17 19:13:57 218人阅读

深究angularJS系列 - 第二弹，在初步了解了Angular的基础上，进一步的针对Angular的控制器和作用域问题深入探究O(∩_∩)O~~

Angular控制器

控制器（Controller）的理解

控制器是对view的抽象，用来接收view的事件，响应view的请求；
控制器包含view的静态属性和动态的方法；
控制器与view是一对一的关系。

控制器（Controller）的结构

1 .controller("控制器的名字"，function($scoppe){
2     ......
3 })

说明：

1.控制器的命名：

业务名（view模块名）+Controller 见名之意，以登录（login）为例

1 .controller("loginController"，function(类1，类2，...){
2     ......
3 })

2.Angular中的$:

$:Angular内部类的标识，可借此区分一个类是angular的内部类，还是自定的类如：

1 $scope
2 $rootScope

3.Angular中类的声明：

Angular里面不能直接的类进行实例化调用，只能先声明后使用如：

1 .controller("oneCtrl",function($scope){  //类先声明
2     $scope.msg = "helle controller!";
3 })
4 
5 .controller("twoCtrl",function(){  //类没声明，会报错
6     var s = new $scope(); 　　　　//直接的类进行实例化  
7　　　$scope.msg = "helle controller!";
8 })

4.Angular中控制器与view是一对一的：

 1 <body>
 2      <div ng-controller="one">{{goods}}</div>
 3      <div ng-controller="two">{{goods}}</div>
 4 <script>
 5     (function(){
 6         var son = angular.module("one",[]);
 7         son.controller("oneCtrl",function($scope){
 8             $scope.goods="one goods"
 9         });
10         var grandson = angular.module("two",[]);
11         grandson.controller("twoCtrl",function($scope){
12             $scope.goods="two goods"
13         });
14     })()
15 </script>

5.Angular中控制器的继承关系：

当Controller之间出现嵌套关系的时候，内层继承外层的变量如：

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="demo">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>控制器之间的继承</title>
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 7     <link rel="stylesheet" href="../bootstrap.css">
 8 </head>
 9 <body>
10 <div class="well" ng-controller="oneCtrl">
11     {{msg}}
12     <div  class="well" ng-controller="twoCtrl">
13         {{msg}}
14         <div class="well"  ng-controller="threeCtrl">
15             {{msg}}
16         </div>
17     </div>
18 </div>
19 <script src="../angular.js"></script>
20 <script>
21     (function(){
22         angular.module("demo",[])
23             //当我们的html元素出现嵌套关系的时候，内层继承外层的变量
24             .controller("oneCtrl",function($scope){
25                 $scope.msg = "helle one!"
26 
27             })
28             .controller("twoCtrl",function($scope){
29 //              $scope.msg = "helle two!"
30             })
31             .controller("threeCtrl",function($scope){
32 //              $scope.msg = "helle three!"
33             })
34     })()
35 </script>
36 </body>
37 </html>

结果如下：

技术分享

6.Angular中的注入器（$injector）两种注入方式：

 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="../bootstrap.css">
 8 </head>
 9 <body>
10 <div ng-controller="one">{{msg}}</div>
11 <div ng-controller="two">{{msg}}</div>
12 <script src="../angular.js"></script>
13 <script>
14     (function(){
15         angular.module("demo",[])
16             //第一种直接声明注入（有缺陷，在gulp，webpack打包时,会把function(a)的参数压缩掉，导致声明失败）
17             .controller("one",function($scope,$rootScope){ 
18                 //$injector
19                 $scope.msg = "hi";
20             })
21             //第二种经常采用以下写法
22             .controller("two",["$scope","$rootScope",function($s,$rs){
23                 $s.msg = "hello";
24             }])
25     })()
26 </script>
27 </body>
28 </html>

7.Angular中的run（）方法：

run是Angular中的main方法，是 Angular 的入口方法
特点：run只会在angular生命周期内，只会调用一次

用于Angular中的条件判断，比如登录时的用户名和密码，只会调用一次存入localstorage,判断是否允许登录

 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="../bootstrap.css">
 8 </head>
 9 <body>
10 <script src="../angular.js"></script>
11 <script>
12     (function(){
13         angular.module("demo",[])
14             //整个程序级别
15             .run(function(){
16                 console.log("hello run");
17                 //条件的判断 localstorage 
18                 window.localStorage.setItem("ng","haha");
19             })
20     })()
21 </script>
22 </body>
23 </html>

Angular作用域

$rootScope类：

$rootScope是一个angular的内部类
$rootScope是用于根的模块的数据缓存
$rootScope用于解决Controller之间的数据共享问题

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="demo">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>$rootScope</title>
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 7     <link rel="stylesheet" href="../bootstrap.css">
 8 </head>
 9 <body>
10 <div class="well" ng-controller="oneCtrl">
11     {{msg}} {{txt}}
12     <div  class="well" ng-controller="twoCtrl">
13         {{msg}}{{txt}}
14         <div class="well"  ng-controller="threeCtrl">
15             {{msg}}{{txt}}
16         </div>
17     </div>
18 </div>
19 <script src="../angular.js"></script>
20 <script>
21     (function(){
22         angular.module("demo",[])
23             .controller("oneCtrl",function($scope,$rootScope){
24                 $scope.msg = "helle one!";
25 
26             })
27             .controller("twoCtrl",function($scope){
28 //                    $scope.msg = "helle two!"
29             })
30             .controller("threeCtrl",function($scope,$rootScope){
31 //                    $scope.msg = "helle three!"
32                 $rootScope.txt = "hello root";
33             })
34     })()
35 </script>
36 </body>
37 </html>

效果如下：

技术分享

$scope类

$scope是用于绑定view的抽象（属性和方法）
$scope是连接controller与view之间的数据桥梁
$scope是实现angular中的mvvm模块的核心类
$scope是实现双向数据绑定的关键类
$scope是用来监视view，Model值之间的数据变化，并通知对方，从而实现view与model之间的数据同步
$scope可以实现controller与controller之间的事件传递 js事件冒泡事件捕获

1.作用域

如案例：$rootScope，$scope，var msg2 = "hello2"的不同作用域

 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="../bootstrap.css">
 8 </head>
 9 <body >
10 <div ng-controller="one">
11     {{msg}}
12     {{msg2}}
13     {{txt}}
14 </div>
15 <div ng-controller="tow">
16     {{msg}}
17     {{txt}}
18 </div>
19 <script src="../angular.js"></script>
20 <script>
21     (function(){
22         angular.module("demo",[])
23             .controller("one",function($scope,$rootScope){
24                 $scope.msg = "hello";
25                 var msg2 = "hello2";
26                 $rootScope.txt = "hello3"
27             })
28             .controller("tow",function($scope){
29 
30             })
31     })()
32 </script>
33 </body>
34 </html>

效果如下：

技术分享

2.$scope事件数据传递

$scope.$emit是向上一级控制器发送事件冒泡
$scope.$broadcast 向下传递事件捕获
$scope.$on用来接收事件的值

 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="../bootstrap.css">
 8 </head>
 9 <body>
10 <div class="well" ng-controller="one">
11      {{msg}}
12     <div class="well" ng-controller="two">
13 
14          <a class="btn btn-danger" ng-click="sendEvent()">sendEvent</a>
15         <div class="well" ng-controller="three">
16             {{msg}}
17         </div>
18     </div>
19 </div>
20 <script src="../angular.js"></script>
21 <script>
22     (function(){
23         angular.module("demo",[])
24             .controller("one",["$scope",function(s){
25                 s.$on("sendOne",function(event,data){
26                     s.msg = data;
27                 });
28             }])
29             .controller("two",["$scope",function(s){
30                 s.sendEvent = function(){
31                     s.$emit("sendOne","a gift from two ");
32                     s.$broadcast("sendThree","a command from two");
33                 }
34             }])
35             .controller("three",["$scope",function(s){
36                 s.$on("sendThree",function(event,data){
37                     s.msg = data;
38                 });
39             }])
40     })()
41 </script>
42 </body>
43 </html>

效果如下：

技术分享

3.AngularJS在什么情况下才执行双向绑定?

手动触发dirty checking -> $scope.$appply()
主动触发(ng-指令绑定值 $服务类)/被动

dirty checking 绑定的值与上一次缓存中的值有没有变化，如果有变化，数据dirty，怎么才能知道绑定的值发生了变化呢?

当我们在$scope上面绑定一个属性的时候，angular就会在这个属性上添加一个$$watcher(): 多长时间后缓存一次数据。

$watcher会执行值的比较。当这次比较的值不相等的时候，表示watcher的值，需要进行数据同步

data $digest $watherlist date ->$wathe()->把model-view之间的数据进行更新同步

 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="../bootstrap.css">
 8 </head>
 9 <body ng-controller="one">
10     <input type="text" ng-model="txt">  {{txt}}
11     {{date}}
12     <script src="../angular.js"></script>
13     <script>
14         (function(){
15             angular.module("demo",[])
16                 .controller("one",function($scope,$interval){
17                     $scope.date = new Date().toLocaleTimeString()
18                     //$interval(触发dirtychecking) == setInterval
19                     $interval(function(){
20                         $scope.date = new Date().toLocaleTimeString()
21                     },1000);
22                 })
23         })()
24     </script>
25 </body>
26 </html>

效果如下：

技术分享

敬请留言指正补充交流！

（未完待续~~）

深究angularJS系列 - 第二弹

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 深究angularJS系列 - 第二弹

深究angularJS系列 - 第二弹

看完仍有疑问？有类似问题直接问程序猿