AngularJS浅谈-博客
AngularJS是啥？（一脸懵逼）
简介：
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 具体点说：
- AngularJS 是一个 JavaScript 框架
- AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
<script src="../libs/angular.js/1.4.6/angular.min.js"></script>- AngularJS 扩展了 HTML AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 ng-init 指令初始化 AngularJS 应用程序变量
- AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
那么，重点来了，AngularJs可以干啥啊？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素”背后”添加代码。 AngularJS 支持输入验证。
- 举个荔枝（例子）吧！12345678910111213141516171819202122232425262728293031<<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>例子</title> <script src="angular-1.0.1.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> 名：<input type="text" ng-model="lastName"><br> 姓：<input type="text" ng-model="firstName"><br> <br> 姓名：{{firstName+" "+ lastName}} <br> 姓名：{{fullName()}}</div><script> var app=angular.module('myApp',[]); app.controller('myCtrl',function($scope){ $scope.firstName="重庆"; $scope.lastName="黄"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } });</script> </body></html>
- 初始化加载流程
- 统一过程： 1、浏览器载入HTML，然后把它解析成DOM。 2、浏览器载入angular.js脚本。 3、AngularJS等到DOMContentLoaded事件触发。 4、AngularJS寻找ng-app指令，这个指令指示了应用的边界。 5、使用ng-app中指定的模块来配置注入器(\$injector)。 6、注入器($injector)是用来创建“编译服务(\$compile service)”和“根作用域(\$rootScope)”的。 7、编译服务(\$compile service)是用来编译DOM并把它链接到根作用域(\$rootScope)的。
- 具体过程： AngularJS 应用程序由 ng-app 定义。应用程序在 内运行。 ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。 AngularJS 使用$scope 对象来调用控制器。 在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。 控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。 控制器在作用域中创建了两个属性 (firstName 和 lastName)。 ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
- 记住一点：在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把
<script>标签中的代码复制到名为js文件.js的外部文件中即可，然后在script中引用js文件：
接下来说一下AngularJs中核心的集中特性吧！！
- 先来个图！
MVC 模块化 自动化双向数据绑定
MVC（Model模型 View视图 Controller控制器）
首先要知道为什么要MVC？
- AngularJs程序分为3部分：模板，表现层逻辑，数据（model）。 模板：我们用html，css写的ui视图代码，其中包含AngularJs的指令，表达式，并最终会被AngularJs编译机制编译为附加在dom树上。AngularJs的指令（directive）可以由我们自由扩展。 表现层逻辑：包括应用程序逻辑和行为。用javascript定义作为视图控制器逻辑。在AngularJs作为MVC框架，在控制器中我们无需添加对于dom级的事件监听，这些在AngularJs中已经内置了。在ui节点dom事件发生后AngularJs会自动转到scope上的某个行为（Action）逻辑。 数据：视图对象（viewobject）需要被AngularJs Scope（1.0中作为service出现）引用，可以使任何类型的javascript对象，数组，基本类型，对象。并且AngularJs会自动异步更新模型，即在ui发生改变的时他会自动刷新模型（mode），反之在模型发生改变的时候也会自动刷新ui。在这里我们不需要定义形如getter，setter的一些列方法。
- MVC之间的关系，下面这张图看一下MVC中都包含些什么东西
- 再看下面这张图-其中service是共用的的东西抽象出来的服务
模块化
- AngularJs的模块（module):它是一个集合，相当于一个框子，由模型，视图，过滤器，服务等等组成
- 我们都知道JavaScript很容易就写出全局函数，所以无论是用jQuery还是纯JavaScript，我们都会使用模块化的策略避免写出来的函数污染全局。
1234567891011121314 | HTML代码:<!doctype html><html ng-app="HelloAngular"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="helloNgCtrl"> <p>{{greeting.text}},Angular</p> </div> </body> <script src="js/angular-1.3.0.js"></script> <script src="NgModule1.js"></script></html> |
|---|
123456789101112 | //JS代码1:var modelName = angular.module('modelName',[]);modelName .controller('contollerName',['$scope',function($scope){ $scope.greeting = {$scope.greeting={text:'hello'};}}]);//JS代码2function HelloAngular($scope){ $scope.greeting={ text:'hello' };} |
|---|
很明显JS1代码函数污染了全局，而Js2代码通过一个模块进行封装，从而避免污染了全局。
在前面我们看到ng-app指令。它的作用是自动启动一个AngularJS应用，ng-app指令一般指派在应用的根元素上，比如，body或者html标签。在每一个HTML文档中，只能有一个AngularJS应用可以被自动启动，在HTML文档中第一个被找到定义在根元素上的ng-app指令将会作为自动启动的应用。 那我们在js代码中定义的模块和ng-app有什么关系呢？很明显，它是告诉AngularJS应用在启动时加载指定的模块，假设这里ng-app只是放一个纯标签，而不给它赋值。那么它就不知道这里该加载什么模块，于是，它也不认识在模块中定义的textController控制器。
- 但是，赋值与否和启动一个AngularJS的应用无关：12345<body ng-app> <div ng-controller="helloNgCtrl"> <p>{{greeting.text}},Angular</p> </div> </body>
这样也是可以启动AngularJS应用，并实现name模型的绑定。
- 看一下ng官方的模块切分方式
- 最后看一下模块化的完整项目结构，有利于大家对项目的整体认知
双向数据绑定
- 先来个官方例子：123456789101112131415161718<!doctype html> 2 <html ng-app> 3 4 <head> 5 6 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 7 8 </head> 9 10 <body>11 12 Your name: <input type="text" ng-model="yourname" placeholder="World">//一个输入框，默认内容为World13 14 <hr>15 16 Hello {{yourname || 'World'}}!18 </body>20 </html>
注:在输入框中输入任何字符都会立即绑定更新到页面. 这里采用ng-model指令（directive）绑定是模型scope属性yourname。 并采用表达式将yourname绑定到文本信息中。 这里只需要任何的dom时间监听，因为AngularJs内置了。