深究angularJS体系 – 初识

1.为什么twoCtrl、threeCtrl控制器也出口hell oone!?

 结果如下:

答:当大家的html成分出现嵌套关系的时候,内层继承外层的变量,造成值的重写难点

结果如下:

ng-app=””

案例2

 2.angular.bootstrap(document.getElementById(“box”),[“demo”])的作用?

AngularJS 1

特约留言指正补充沟通!!

AngularJS 2

1.官网http://angularjs.org/下载安装

申明:ng-app是先后运营指令,用来标记
angularJS的管制边界,标记在html成分上面,则代表全数html内部的因素都在angularjs的田间管理范围

AngularJS运营分析

AngularJS 3

MVC

答:ng-app有八个暗中同意的模块。借使有四个ng-app,暗中认可是加载第3个,而且只加载第③个。ng-app=“自定义的模块”
是贰个利用了自定义的模块,该自定义的模块继承了充裕起头的暗中认可的模块,能够调用发轫的默许的模块的艺术第2者是陌生人的特例。

结果如下:

唯独源码中并没有标记“demo”根目录

1.为何一向不ng-app,也得以运营angular?

(初识 – 完~~)

安装

1.为啥第三个表明式{{msg}},输出结果是hello angular!?

 

1.ng-app,ng-app=””,ng-app=”demo”三者的不一样

1 angular.module("demo",[])
2    .controller("oneCtrl",function($scope){
3          $scope.msg = "hello angular!"
4    })
bower install angular

2.开源库http://www.bootcdn.cn/下载安装

问题:

答:angularJS具有从严界限管理范围,第五个表明式{{msg}},不在oneCtrl的控制器的管制范围

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="demo">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>demo</title>
 6         <script src="angular.js"></script>
 7     </head>
 8     <body>
 9         {{1+1}}
10         <script>
11             (function(){   //匿名自执行函数,保证angular.js加载完后,立即执行其中的代码
12                 angular.module("demo",[])
13             })()
14         </script>
15     </body>
16 </html>

三种用法:

4.angular跻身活动运营

MVC即“模型 – 视图 –
控制器”的简称,一种设计情势,MVC的从逻辑中校代码清晰地分开为三层,那样能够对每个部分开始展览单独开发、测试和护卫。

注:{{angular特有表明式}}

结果如下:

3.bower(一种包管理器)下载安装

案例3

深究angularJS系列 –
第三弹

1 <script src="angular.js"></script>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <link rel="stylesheet" href="bootstrap.css">
 7     <script src="angular.js"></script>
 8 </head>
 9 <body>
10     {{1+1}} {{msg}}
11     <div id="box" ng-controller="oneCtrl">
12         {{1+1}} {{msg}}
13     </div>
14     <script>
15         (function(){
16             angular.module("demo",[])
17                 .controller("oneCtrl",function($scope){
18                     $scope.msg = "hello angular!"
19                 })
20             angular.bootstrap(document,["demo"]);        
21             angular.bootstrap(document.getElementById("box"),["demo"]); 
22         })()
23     </script>
24 </body>
25 </html>
 1 <!DOCTYPE html>
 2 <html lang="en" ng-app> //没有写成ng-app="demo"
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <link rel="stylesheet" href="bootstrap.css">
 7     <script src="angular.js"></script>
 8 </head>
 9 <body>
10     {{1+1}} {{msg}}
11     <div id="box" ng-controller="oneCtrl">
12         {{1+1}} {{msg}}
13     </div>
14     <script>
15         (function(){
16             angular.module("demo",[])
17                 .controller("oneCtrl",function($scope){
18                      $scope.msg = "hello angular!"
19                 })
20         })()
21     </script>
22 </body>
23 </html>
 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="demo">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <link rel="stylesheet" href="bootstrap.css">
 7     <script src="angular.js"></script>
 8 </head>
 9 <body>
10     {{1+1}} {{msg}}
11     <div id="box" ng-controller="oneCtrl">
12         {{1+1}} {{msg}}
13     </div>
14     <script>
15         (function(){
16             angular.module("demo",[])
17                .controller("oneCtrl",function($scope){
18                      $scope.msg = "hello angular!"
19                })
20         })()
21     </script>
22 </body>
23 </html>

AngularJS 4

1 <html lang="en" ng-app="demo">

答:看代码,要加载,只可以是angular.module(…).controller(…)的函数来调用,而调用时首先便是找angular.module(“demo”,[])的根目录“demo”

1 <html lang="en" ng-app>

ng-app=“根模块名”

答:angular.bootstrap(运转地点,数组),运维地方:表示管理范围,数组:表示把数组中的当成运维模块

ng-app

 答:假诺在当下的页面中包蕴有ng-app那个命令,angular会自动运行,假诺不想在脚下的页面中展现标识ng-app,大家得以代码的章程手动运营,即透过angular.bootstrap(document,[“demo”])手动运转,等价于ng-app=”demo”;

AngularJS, 案例5

1 <html lang="en" ng-app="">

2.为啥第四个表明式{{msg}},没有经过angular.module(…).controller(…)的函数来调用?

2.怎么第三个{{1+1}}
{{msg}}没有加载出来

1 angular.module("demo",[]);

问题:

3.创立项指标根的模块

问题:

1.引入angularJS

angualr应用创立落成

angualr应用创立基本步骤

答:下方的代码注册叁个名为oneCtrl的控制器效能,控制器函数注册在Angular中,能够通过angular.module(…).controller(…)
的函数来调用。

AngularJS是什么?概念?特征?优点?缺点?那都不是事,话不多说,直接搞起O(∩_∩)O~~

 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             .controller("oneCtrl",function($scope){
24                 $scope.msg = "helle one!"
25             })
26             .controller("twoCtrl",function($scope){
27 //              $scope.msg = "helle two!"
28             })
29             .controller("threeCtrl",function($scope){
30 //              $scope.msg = "helle three!"
31             })
32 
33     })()
34 </script>
35 </body>
36 </html>

AngularJS 5

案例1

问题:

案例4

深究angularJS系列 –
第二弹

  • 模型/Model – 服务层(service)负责掩护数据

  • 视图/View – 展现层(diretive)负责将数据表现给用户

  • 控制器/Controller – 控制层(control)负责控制Model和View之间的互相

结果如下:

2.标记ng-app

相关文章