前端开发者学习angular需要记住三点：1、性能陷阱；2、摆脱思维定式；3、深入理解框架。
一、angular简介
AngularJS是一个前端JavaScript框架，背后有Google支持。这个框架最早是09年发布的，随后发展迅速，尤其是最近，流行度很高。和其他框架不同，AngularJS有很多独特的特性，使得其非常与众不同。如果你对AngularJS不了解，推荐先去其官网([http://www.angularjs.org](http://www.angularjs.org))【需要翻墙】看看。不翻可以去（ [http://www.apjs.net/](http://www.apjs.net/) ），有很多例子。对于我来说，最吸引我的两个特性是双向绑定以及依赖注入。前者免去了开发时显示的刷新DOM，能让开发者更专注在逻辑上，而后者则使得测试以及集成变得非常方便。
二、angular特性
###1、MVC(MVVM)模式：
MVC顾名思义：Model-view-Controll设计模式，其实这个有点类似于Java的思想，模型、视图、控制器的分离。但是angular又有点不同于传统的MVC，严格意义上说它是MVVM（model-view-viewModel）。Model是简单的javascript对象；ViewModel是$scope对象，angular依靠$scope检测状态变化；Controller负责设置初始状态和参数化$scope方法用以控制行为；View是Angular解析渲染后生成的html。
**MVC的核心是$scope：**
$scope是一个POJO(Plain Old JavaScript Object)
$scope提供了一些工具方法$watch()/$apply()
$scope是表达式的执行环境（或者叫作用域）
$scope是一个树型结构，与DOM标签平行
子$scope对象会继承父$scope上的属性和方法
每一个Angular应用只有一个根$scope对象（一般位于ng-app上）
$scope可以传播事件，类似DOM事件，可以向上也可以向下
$scope不仅是MVC的基础，也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试
2、数据双向绑定：
这应该算Angular比较特有的属性，概括来说，Angular通过监听变量的变化来实现双向数据绑定。传统技术上，当model改变时，开发与人员需要手动处理DOM元素并将属性反映到变化中。而在Angular中，程序员可以轻轻松松解决这种问题，省掉了很多的代码。
** {{}}与ng-bind指令：**
3、指令：
指令比较有意思，可以帮助我们做很多的DOM操作，比如增删改查都可以用指令完成。指令自带的link方法有三个参数：scope、element、attrs。通过这三个参数我们可以完成很多功能，如：获取对象，改变css，变量传递等，这也是我用的比较多的方法。
4、模板：
» html模板将会被浏览器解析到DOM中。
» DOM然后成为AngularJS编译器的输入。
» AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。
» 所有的指令都负责针对view来设置数据绑定。
这里有一个例子，我们使用ng-repeat指令来循环图片数组并且加入img模板，如下：
五、服务和依赖注入：
Angular服务的作用就是对外提供某个特定的功能。Angular拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易开发，理解和测试应用。
比如，很多时候我们会引入第三方指令，这时候需要在module中加入模块依赖，比如项目上我想用ng-bind-html，引入$sce，这时候需要在module写：
javascript 代码片段
var app = angular.module(‘myapp’,[‘ngSanitize’]);
**Angular的依赖注入实现：**
每一个Angular应用都有一个injector
injector负责自动处理依赖关系、实例化对象
对用户代码来说，injector是透明的
injector会自动分析函数签名，注入所需要的对象
inJector注入有三种方式：http://www.cnblogs.com/lodingzone/p/4895275.html
依赖可以被使用者自己创建,通过 new 操作符.
依赖可以通过全局变量(如 window)来查找并引用
依赖可以在需要的地方被传入
DI可以用在各种不同的地方，主要用在controller和factory中
三、ng官方推荐的模块切分方式
任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的
用一个总的app模块作为入口点，它依赖其它所有模块
AngularJS的模块化实现
javascript 代码片段
function HelloAngular($scope) {
$scope.greeting={
text: “Hello”
};
}
/******* ↓ ********/
var helloModule = angular.module(“HelloAngualr”, []);
helloModule.controller(“helloNgCtrl”, [
“$scope”,
function($scope){
$scope.greeting={
text: “Hello”
};
}
]);
一个完整项目结构是什么样的？
Angular-seed github地址：https://github.com/glitchtank/angular-seed-master
四、Hello World!
开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：
html 代码片段
<!doctype html>
<html ng-app>
<head>
<script type=”text/javascript” src=”http://code.angularjs.org/angular-1.0.1.min.js”></script>
</head>
<body>
你的名字:
<input type=”text” ng-model=”yourname” placeholder=”名字”>
<br> {{yourname}}
</body>
</html>
五、何时用Controller、Directive、Service
AngularJS是一款非常强大的前端MVC框架。同时，它也引入了相当多的概念， Directive（指令），Controller（控制器），Service （服务）。
那我们该何时使用这些呢？
1、Service（服务）
Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西（指单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，这一点和工厂模式不同。基于这种思想，单例对象让我们可以 实现一些相当酷的功能，它可以让很多controller和directive访问内部的数值。
简单来说，如果你需要对一个数据做增删改查，那么我们会用Service做持久化，让不同Controller共享Service数据做处理，如果你还是不理解请看下面代码：
Service例子:
javascript 代码片段
module.service(“Book”, [
“$rootScope”,
function($rootScope){
varservice={
books: [
{ title:”如何勾搭妹子”, author:”隔壁老王”},
{ title:”如何学好前端”, author:”王小白”}
],
addBook:function(book){
service.books.push(book);
$rootScope.$broadcast(“books.update”);//事件派发，用于不同controller之间的信息传递
}
};
returnservice;
}
]);
2、Controller（控制器）
Controller应该纯粹地用来把service、依赖关系、以及其它对象串联到一起，然后通过scope把它们关联到view上。如果在你的 视图里面需要处理复杂的业务逻辑，那么把它们放到controller里面也是一个非常不错的选择。
如果我要add一本书籍应该怎么办呢？我应该在controller上面新增一个方法来处理这件事情吗？ 不，原因在下面解释。因为它是DOM交互/操作的一部分。
**Controller（控制器）-注意点：**
不要试图去复用Controller，一个控制器一般只负责一小块视图
不要在Controller中操作DOM，这不是控制器的职责
不要在Controller里面做数据格式化，ng有很好用的表单控件
不要在Controller里面做数据过滤操作，ng有$filter服务
一般来说，Controller是不会互相调用的，控制器之间的交互会通过事件进行
3、Directive(指令)
到目前为止，在我所编写的大量AngularJS应用中，应用中最主要的复杂部分都在directive（指令）中。有一个强大的工具可以用来操 作和修改DOM，它也是我们这里需要讨论的内容。我们来提供一个按钮，用户通过它可以向service里面添加一本图书。
Angular对directive的定义是一段代码片段，你 可以用它来操作DOM，但是我觉得directive也是进行用户交互的很好选择。我们来扩展前面的例子，为用户提供一个按钮，通过这个按钮可以向 service里面添加一本书籍。
html 代码片段
<html ng-app>
<head>
<script type=”text/javascript” src=”http://code.angularjs.org/angular-1.0.1.min.js”></script>
<script>
module.directive(“addBookButton”, [‘book’, function (book) {
return {
restrict: “A”,
link: function (scope, elem, attrs) {
elem.bind(‘click’, function () {
Book.addBook({
title: “jquery高级编程”,
author: “忘了”
});
});
}
}
}]);
</script>
</head>
<body>
<button add-book-button>增加书籍</button>
<!–由于没有service，这里不做代码运行，只需了解directive基本用法–>
</body>
</html>
Directive和Controller如何通信
你可能已经注意到了，上面代码中的directive中我使用了scope：{arrow=‘=’}，那这是什么意思呢？
除了“=”还有“@”和“&”。
“@”：把当前属性作为字符串传递。
“=”：与父scope中的属性进行双向绑定。
“&”：传递一个来自父scope的函数，稍后调用。
再看回上一个例子，我用的“=”，所以当directive中的arrow变化时，controller和视图中该变量也随之改变，它们之间通过变量传递信息。
此篇blog链接：http://www.cnblogs.com/lodingzone/p/4846978.html
六、Filter（过滤器）
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。
过滤器有两种用法：
1、模板中使用Filter；
2、Controller和Serivce中使用Filter
1、模板中使用Filter
<1>、我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：
{{ expression | filter }}
<2>、也可以多个filter连用，上一个filter的输出将作为下一个filter的输入
{{ expression | filter1 | filter2 | … }}
<3>、filter可以接收参数，参数用 : 进行分割，如下：
{{ expression | filter:argument1:argument2:… }}
2、Controller和Serivce中使用Filter
我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：
javascript 代码片段
app.controller(‘test’,function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
});
在模板中使用{{num}}就可以直接输出$123,534.00了！在服务中使用filter也是同样的道理。
七、Route(路由)
AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。
AngularJS的前端路由，虽然URL输入不一样，页面展示不一样，其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看，AngularJS做单页应用就有点标配的感觉了。
Route例子：
访问地址： https://www.rokub.com:8080/test/app/route.html
AngularJS 自动跳转到：
https://www.rokub.com:8080/test/app/route.html#/list， 跳转详细页的路由是/list/:id，id为参数。点击ID#跳转到route-list.html页面，显示为：“Route 3：detail.html”。打开控制台发现，查看详情后页面只加载了一次，再次点击其他ID进入详情不再加载route-list.html页面。这就是ng提供的单页面视图的局部刷新。可以下载下来看看代码（附代码压缩包）
Angular例子（route）
八、表单验证
1、属性
Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息，并且应用到了表单和输入.
属性类——|——描述
$valid——ng-valid——Boolean告诉我们这一项当前基于你设定的规则是否验证通过
$invalid——ng-invalid——Boolean告诉我们这一项当前基于你设定的规则是否验证未通过
$pristine——ng-pristine——Boolean如果表单或者输入框没有使用则为True
$dirty——ng-dirty——Boolean如果表单或者输入框有使用到则为True
Angular 也提供了有关表单及其输入框的类，以便你能够依据每一个状态设置其样式。
另外值得注意的是，HTML5自带验证在一些对H5支持性差的浏览器上显示有问题，所以我们在form加novalidate，禁止自带验证，我们自定义写会比较好。
2、验证例子
html 代码片段
<form method=”post” id=”loginForm” name=”loginForm” class=”login-form” ng-submit=”submit(loginForm.$valid)” onsubmit=”javascript:return false” role=”form”>
<divclass=”form-group” ng-class=”{ ‘has-error’ : loginForm.username.$invalid && !loginForm.username.$pristine }”>
<spanclass=”add-on bg_lg”><iclass=”icon-user”></i></span>
<inputtype=”text” name=”username” class=”form-control” placeholder=”用户名” autocomplete=”off” ng-model=”user.username” ng-keyup=”myKeyup($event)” ng-minlength=”3″ ng-maxlength=”32″ ng-trim=”true” requiredautofocus/>
<png-show=”loginForm.username.$error.minlength||loginForm.username.$error.maxlength” class=”help-block show-login-msg”>用户名必须在3-32个字符之间！</p>
</div>
<divclass=”form-group” ng-class=”{ ‘has-error’ : loginForm.password.$invalid && !loginForm.password.$pristine }”>
<spanclass=”add-on bg_ly”><iclass=”icon-lock”></i></span>
<inputtype=”password” name=”password” class=”form-control” placeholder=”密 码” ng-model=”user.password” ng-keyup=”myKeyup($event)” ng-minlength=”6″ ng-maxlength=”16″ ng-trim=”false” oncontextmenu=”return false” onpaste=”return false” requiredlogin-direct/>
<png-show=”loginForm.password.$error.minlength||loginForm.password.$error.maxlength” class=”help-block show-login-msg”>密码必须在6-16个字符之间！</p>
</div>
<divclass=”form-group”>
<buttonid=”login_button” class=”btn btn-primary btn-block” type=”submit”>登 录</button>
</div>
</form>
九、总结新手容易碰到的坑
Q1.<div ng-include=”views/user/show.html”></div> 错在哪里？
A1:如果你这么写过，会发现这个位置啥也没有加载出来，那么，错在哪里呢？错在ng-include需要的是一个变量，如果你在$scope中有这样一个变量 $scope.userShowTemplateUrl = “views/users/show.html”，并且把上面这句变为<div ng-include=”userShowTemplateUrl”></div>就能正常工作了。或者这样写也行：
<div ng-include=” ‘views/user/show.html’ “></div>
原因何在？
因为在ng-include中，是把它的参数当做变量来解释的，它会通过$eval对传入的值进行计算，然后作为模板地址去加载。
不过，更好的方法是把这些界面片段（partical）写成指令，那样你就不用在多处重复写路径了，更重要的是，将来你可以直接在这里扩展它的交互逻辑，从界面原型平滑的演化到线上系统。
Q2.我的指令怎么无效？
A2. 如果你排除了代码错误等问题，那么最可能的原因是restrict。restrict参数是用来规定你可以通过哪种方式来使用指令，而这个问题之所以容易成为坑，是因为restrict的默认值是A，也就是说，默认情况下，指令只能通过属性的形式使用，比如我写了一个指令叫做appHeader，那么默认情况下我只能用这样的形式使用它：<div app-header></div>，而<app-header></app-header>的形式则是无效的。
所以，如果你用返回函数的形式使用指令，那么你就只能使用属性的方式调用它，比如：
Q3.修改了变量怎么界面没反应？
A3. 首先你当然要检查有没有错误以及是否确实是scope变量，如果这些都没问题，那么多半儿是$apply导致的。对于大多数操作，$apply都会自动执行，所以你不用担心，但是如果你使用了angular之外的功能，比如直接调用了setTimeout函数、挂接了jquery的事件、使用了jquery的ajax操作等等，那么系统就没有机会帮你调用$apply，界面也就没有机会刷新了，但是你如果之后又做了其他会导致$apply的操作，你会发现以前“欠下”的那次界面刷新被正常执行了了 …… 迟到的刷新仍然是bug。
Q4. ng-click 写成 ng-class 导致的界面停止响应
A4. 这是我自己犯过的一个低级错误，属于深度依赖ide导致的问题。ide的自动代码提示功能，ng-cl的第一个候选项是ng-class，如果偷懒少打了一个字，那么本来想写ng-click的代码就会写成ng-class，结果就是，无休止的重新计算ng-class中的表达式，其中的原因还没来得及看源码研究。
如果遇到界面停止响应的问题，而且你也同样深度依赖ide，那么，从这个角度查查看吧。
Q5. 我知道你不拜金，但别忘了$
A5. 在angular中有一个通用的约定：angular的内部服务、方法、属性通常都会以$开头，而相应的，它也要求你自己的命名不要用$开头。比较容易忘记用$开头的主要是一些方法，特别是$apply, $watch, $on, $broardcast, $emit这些，而这些如果你写错了，在chrome中你将得到一个莫名其妙的提示 TypeError: undefined is not a function! 可恶的是，连函数名字都没有！所以，虽然我知道你不拜金，但是千万不要忘了写$！
Q6.注意作用域的原型继承问题！
A6. 在Angular中，作用域是通过原型链进行继承的。而这种继承有一个问题，那就是在子类中对变量进行赋值时，不会去修改父级的。
假设scopeA继承自scopeB，而在scopeB中定义了一个变量value: 1，这时候，读取scopeA.value可以正确取到值，但是如果赋值，就有问题了 scopeA.value = 2，这时候，scopeB.value的值是多少呢？你可能以为是2，但它是1！原因就在于原型继承时对变量的赋值不会修改原型中的值，而是直接在当前scope中创建一个同名的属性。
Q7. angular.module的两种写法：含义大不同
angular.module(‘name’, [])是创建一个新的module，[]表示它没有依赖任何其他模块，如果已经有了一个同名模块，则会覆盖现有的。
而angular.module(‘name’)是查找一个现有module，如果这个module不存在，则返回空值。
如果把带方括号的形式（创建）误用为不带方括号的形式（引用），那么在它的返回值上调用controller等函数会出现空指针错误。
而如果把引用形式误用为创建形式，则会导致难以理解的“对象不存在”错误，但是你却明明定义过那个service或者controller等对象！这种问题就是因为后面的模块定义覆盖了以前的模块定义，你定义过的那些对象都被随着以前的module而丢掉了！
Q8.第三方指令不起作用
A8:最可能的原因是你没有加入模块依赖。第三方指令通常会定义在自己的模块中，所以这个模块必须被你的app模块所依赖，其中包含的指令才能在view中使用。比如你要使用ui-select2指令，就必须在自己的模块定义中加入这个依赖。
Q9. ng事件中为变量的参数
A9. 举个例子把，比如有这么一段代码：
html 代码片段
<button type=”button” ng-click=”showMsg(msg)”>点我</button>
如果ng-click中的事件参数msg是一个表达式，你是不是想应该showMsg({{msg}})?NO！必须像我代码中写的，直接写变量值，不用加花括号便可。有意思的是你运行页面，查看元素发现该标签中事件的参数还是msg，但是已经功能却跟{{msg}}一样，ng会把该变量自动转化成表达式，所以你无须担心，只管用就行了。
十、介绍三个Angular学习参考网站
AngularJS中文API：http://docs.ngnice.com/guide
AngularJS基础：http://www.apjs.net/
AngularJS范例程序：http://ngnice.com/showcase/?utm_source=TZ#/home/home
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册