深究angularJS系列 - 初识
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深究angularJS系列 - 初识相关的知识，希望对你有一定的参考价值。
AngularJS是什么？概念？特征？优点？缺点？那都不是事，话不多说，直接搞起O(∩_∩)O~~
安装
1.官网http://angularjs.org/下载安装
2.开源库http://www.bootcdn.cn/下载安装
3.bower（一种包管理器）下载安装
bower install angular
MVC
MVC即“模型 - 视图 - 控制器”的简称，一种设计模式，MVC的从逻辑上将代码清晰地分割为三层，这样可以对每个部分进行独立开发、测试和维护。
-
模型/Model - 服务层（service）负责维护数据
-
视图/View - 展示层（diretive）负责将数据展现给用户
-
控制器/Controller - 控制层（control）负责控制Model和View之间的交互
AngularJS启动分析
案例1
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>
结果如下：
angualr应用创建基本步骤
1.引入angularJS
1 <script src="angular.js"></script>
2.标记ng-app
说明：ng-app是程序起动指令,用来标记 angularJS的管理边界,标记在html元素上面,则表示所有html内部的元素都在angularjs的管理范围
三种用法：
ng-app
1 <html lang="en" ng-app>
ng-app=""
1 <html lang="en" ng-app="">
ng-app=“根模块名”
1 <html lang="en" ng-app="demo">
3.创建项目的根的模块
1 angular.module("demo",[]);
4.angular进入自动启动
angualr应用创建完成
注：{{angular特有表达式}}
案例2
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>
结果如下：
问题：
1.为什么第二个表达式{{msg}}，输出结果是hello angular！？
答：下方的代码注册一个名为oneCtrl的控制器功能，控制器函数注册在Angular中，可以通过angular.module(...).controller(...) 的函数来调用。
1 angular.module("demo",[]) 2 .controller("oneCtrl",function($scope){ 3 $scope.msg = "hello angular!" 4 })
2.为什么第一个表达式{{msg}}，没有通过angular.module(...).controller(...)的函数来调用?
答：angularJS具有严格边界管理范围，第一个表达式{{msg}}，不在oneCtrl的控制器的管理范围
案例3
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.ng-app,ng-app="",ng-app="demo"三者的区别
答：ng-app有一个默认的模块。如果有多个ng-app，默认是加载第一个，而且只加载第一个。ng-app=“自定义的模块” 是一个使用了自定义的模块，该自定义的模块继承了那个初始的默认的模块，可以调用初始的默认的模块的方法第二者是第三者的特例。
2.为什么第二个{{1+1}} {{msg}}没有加载出来
答：看代码，要加载，只能是angular.module(...).controller(...)的函数来调用，而调用时首先就是找angular.module("demo",[])的根目录“demo”
然而源码中并没有标记“demo”根目录
案例4
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.为什么没有ng-app,也可以启动angular?
答：如果在当前的页面中包含有ng-app这个指令，angular会自动启动，如果不想在当前的页面中显示标识ng-app,我们可以代码的方式手动启动，即通过angular.bootstrap(document,["demo"])手动启动，等价于ng-app="demo";
2.angular.bootstrap(document.getElementById("box"),["demo"])的作用？
答：angular.bootstrap(启动位置,数组)，启动位置：表示管理范围，数组：表示把数组中的当成启动模块
案例5
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>
结果如下：
问题：
1.为何twoCtrl、threeCtrl控制器也输出hell oone！？
答：当我们的html元素出现嵌套关系的时候，内层继承外层的变量，造成值的重写问题
敬请留言指正补充交流！！
（初识 - 完~~）
以上是关于深究angularJS系列 - 初识的主要内容，如果未能解决你的问题，请参考以下文章
深究AngularJS——自定义服务详解(factoryserviceprovider)
深究AngularJS——Directive和Scope数据隔离与交互
深究AngularJS——angular-translate详解
初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段