了解Angular
初始学习angular的时候，也去angular社区上面看了一下，可是上面的内容是基于node，对于我这种不太了解node的人来说，看起来太过于难受了，索性找来angular.js文件，然后在写一个html文件就可以学习了。
学习之前还是先了解一些宏观上的知识。
Angular是社么？
(1) 首先它是一个框架，不是一个类库（例如jquery）
简单而言，类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们呢的代码结构。
而框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC，为了实现M和V的解耦，把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案，提高开发效率，如果我们选择了使用某框架，就应该遵循该框架所规定的规则。
前端MVC框架思想
我们知道，传统的MVC模式将一个应用划分为——模型层（model）、视图层（view）、控制层（controller）。他们在应用系统中担当不同的角色，完成不同的任务。
Model：即数据模型，用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理，模型可以直接访问数据。
View：视图用来有目的显示数据，在视图中一般没有程序上的逻辑，为了实现视图上的最新功能，视图需要访问它监视的数据模型。
Controller：控制器调控模型和视图的联系，它控制应用程序的流程，处理事件并作出响应，事件不仅仅包括用户的行为还有数据模型上的改变。通过捕获用户事件，通知模型层作出相应的更新处理，同时将模型层的更新和改变通知给视图，使得视图作出相应改变。因此控制器保证了视图和模型的一致性。
那么，后台提供给我们是什么呢？ api接口，数据上的支持。具体前端页面的逻辑控制全部由前端自己处理。
(2) 核心其实是对HTML标签的增强
何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。
那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。
为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。
指令可以为HTML元素添加额外的行为（让HTML动起来）
通过{{}}进行数据绑定。
使用DOM控制结构来进行迭代或隐藏DOM片段。
支持表单和表单验证。
将逻辑代码关联到DOM元素上。
将一组HTML做成可重用的组件。
Angular是建立在这样的信念之上的：即声明式的代码用在构建用户界面和组装软件组件时更好，而命令式的代码更擅长展现业务逻辑。
将应用逻辑与DOM操作解耦，会大大提高代码的可测试性。
平等看待应用的测试和开发，测试的难度很大程度上取决于代码的结构。
将前端与服务器端解耦，这样使得前端的开发和服务器端的开发可以齐头并进，实现两边代码的重用。
框架在整个应用的开发流程中指导开发者：从用户界面设计到实现业务逻辑，再到测试。
化繁为简，化整为零总是好的。
(3) AngularJS 是基于声明式编程模式
命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。
声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。
我们用命令式编程风格实现，像下面这样：
var numbers = [1,2,3,4,5]
var doubled = []
for(var i = 0; i < numbers.length; i++) {
var newNumber = numbers[i] * 2
doubled.push (newNumber)
}
console.log (doubled) //=> [2,4,6,8,10]我们直接遍历整个数组，取出每个元素，乘以二，然后把翻倍后的值放入新数组，每次都要操作这个双倍数组，直到计算完所有元素。而使用声明式编程方法，我们可以用
Array.map 函数，像下面这样：
var numbers = [1,2,3,4,5]
var doubled = numbers.map (function (n) {
return n * 2
})
console.log (doubled) //=> [2,4,6,8,10]map利用当前的数组创建了一个新数组，新数组里的每个元素都是经过了传入map的函数(这里是function (n) { return n*2 })的处理。声明式编程让我们将注意力放在了除了将数组每个元素*2以外的事情，这种事情其实很容易在开发的过程中用到，没什么大不了的。
类比到angular中呢？在日常开发中比那些前端的代码，如果碰到动态的DOM操作，大部分都是直接使用js进行DOM操作，对于angular则是将DOM的操作放入了指令中，由指令完成DOM的操作，例如网上很多文章都提到的小石钟的例子，至于小石钟的代码编写完全可以给予其他的开发人员进行编写，我们着重于逻辑代码的编写，我们可以简单的和同事说，我需要一个具体需要**功能的小石钟。
PS: 这只是我在没有学习angular的简单理解，带着这个问题去后面的学习进行论证。
(4) angular特性
既然是一个框架，那我们关注的点就是你的长处是什么？我们为什么要用？
特性一：双向的数据绑定
数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。
我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。
传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析
这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。
这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。
<body ng-app="AngularStudy">
<div ng-controller='AngularController'>
<input type="text" name="" ng-model='title'/>
<button ng-click='reset()'>reset</button>
<br />
<span>$.title的value: {{title}}</span>
</div>
<script type="text/javascript">
var angularModule = angular.module("AngularStudy", []);
angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {
$scope.title = 'rod chen';
$scope.reset = function() {
$scope.title = 'rod chen'
}
}]);
</script>
</body>在这个例子当中绑定在元素input的值一旦发生变化，会同时更新到$scope.title上,同样当我们reset这个值得时候，也会更新元素上的value。
特性二：模板
在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。
HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。
我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。
最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。
这里有一个例子，我们使用ng-repeat指令来循环图片数组并且加入img模板，如下：
function AlbumCtrl($scope) {
scope.images = [
{"image":"img/image_01.png", "description":"Image 01 description"},
{"image":"img/image_02.png", "description":"Image 02 description"},
{"image":"img/image_03.png", "description":"Image 03 description"},
{"image":"img/image_04.png", "description":"Image 04 description"},
{"image":"img/image_05.png", "description":"Image 05 description"}
];
}
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>这里还有一件事值得提一句，AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。
特性三：MVC
针对客户端
应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Moodel-View-ViewModel)。
Model
model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。
ViewModel
viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。
viewmodel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
Controller
controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。
View
view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。
特性四：服务和依赖注入
AngularJS服务其作用就是对外提供某个特定的功能。
AngularJS拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：
function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}你也可以定义自己的服务并且让它们注入：
angular.module('MyServiceModule', []).
factory('notify', ['$window', function (win) {
return function (msg) {
win.alert(msg);
};
}]);
function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}
myController.$inject = ['$scope', 'notify'];
特性五：指令（Directives）
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
这里是一个例子，它监听一个事件并且针对的更新它的$scope ，如下：
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
然后，你可以使用这个自定义的directive来使用：
<my-component ng-model="message"></my-component>使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。
最后还有angular的关键特性：
以上就是目前所了解到的信息，那么接下来我们先了解什么呢，当然是指令。开始了解这些信息，是为了有一些侧重点去学习！
