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

深究angularJS系列 - 第二弹

安装

1.官网下载安装

2.开源库下载安装

3.bower（一种包管理器）下载安装

bower install angular

MVC

MVC即“模型 - 视图 - 控制器”的简称，一种设计模式，MVC的从逻辑上将代码清晰地分割为三层，这样可以对每个部分进行独立开发、测试和维护。

模型/Model - 服务层（service）负责维护数据

视图/View - 展示层（diretive）负责将数据展现给用户

控制器/Controller - 控制层（control）负责控制Model和View之间的交互

AngularJS启动分析

案例1

demo {{1+1}} ,[]) 13 })()

结果如下：

angualr应用创建基本步骤

1.引入angularJS

2.标记ng-app

说明：ng-app是程序起动指令,用来标记 angularJS的管理边界,标记在html元素上面,则表示所有html内部的元素都在angularjs的管理范围

三种用法：

ng-app

ng-app=""

ng-app=“根模块名”

3.创建项目的根的模块

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

4.angular进入自动启动

angualr应用创建完成

注：{{angular特有表达式}}

案例2

demo {{1+1}} {{msg}} {{1+1}} {{msg}} (){ ,[]) ($scope){ 　　　}) 20 })()

结果如下：

问题：

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

//没有写成ng-app="demo" demo {{1+1}} {{msg}} {{1+1}} {{msg}} (){ ,[]) ($scope){ }) 20 })()

结果如下：

问题:

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

demo {{1+1}} {{msg}} {{1+1}} {{msg}} (){ ,[]) ($scope){ }) ]); ]); 22 })()

 结果如下：

问题：

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(启动位置,数组)，启动位置：表示管理范围，数组：表示把数组中的当成启动模块

 

敬请留言指正补充交流！！

（初识 - 完~~）