深究angularJS类别 – 第壹弹

深究angularJS系列 –
第三弹

深究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内部类的标识,可借此区分3个类是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   s.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>

结果如下:

图片 1

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中的条件判断,比如登录时的用户名和密码,只会调用1回存入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
    2
    3
    4
    5 $rootScope
    6
    7 8
    9
    10

    11 {{msg}} {{txt}}
    12

    13 {{msg}}{{txt}}
    14

    15 {{msg}}{{txt}}
    16

    17

    18

    19
    20
    36
    37

意义如下:

图片 2

$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>

效率如下:

 图片 3

2.$scope事件数量传递

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

    1
    2
    3
    4
    5 demo
    6
    7 8
    9
    10

    11 {{msg}}
    12

    13
    14 sendEvent
    15

    16 {{msg}}
    17

    18

    19

    20
    21
    42
    43

功效如下:

图片 4

3.AngularJS在怎样情状下才实施双向绑定?

  • 手动触发dirty checking ->
    $scope.$apply()
  • 继续努力触发(ng-指令绑定值 
    $服务类)

dirty checking
绑定的值与上2遍缓存中的值有没有转变,假设有转变,数据dirty,怎么才能明了绑定的值发生了变化吧?

当我们在$scope下面绑定2本性质的时候,angular就会在那个本性上添加3个$$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>

效益如下:

图片 5

特约留言指正补充沟通!

(未完待续~~)

 

相关文章