Angular入门教程一

1 前言

前端技术的发展是如此之快，各类优秀技术、优秀框架的出现简直让人应接不暇，紧跟时代潮流，学习掌握新知识天然是不敢怠慢。

AngularJS是google在维护，其在国外已经十分火热，但是国内的使用状况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面做为本身学习路程上的记录，另外一方面也给有兴趣的同窗一些参考。

首先我本身也是一名学习者，会以学习者的角度来整理个人行文思路，这里可能只是些探索，有理解或是技术上的错误还请你们指出；其次我特别喜欢编写小例子来把一件事情说明白，故在文中会尽量多的用示例加代码讲解，我相信这会是一种比较好的方式；最后，我深知AngularJS的使用方式跟jquery的使用方式有很大不一样，在你们都有jquery、ext经验的条件下对于angular的学习会困难重重，不过我更相信在你们的坚持下，可以快速的学好AngularJS，至少咱也能深刻了解到AngularJS的基本思想，对我们之后本身的插件开发、项目开发都会有很大的启示。

2 AngularJS概述

2.1 AngularJS是什么？

AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT同样提供一整套方案用于设计web应用。它不只仅是一个javascript框架，由于它的核心实际上是对HTML标签的加强。

何为HTML标签加强？其实就是使你可以用标签完成一部分页面逻辑，具体方式就是经过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操做，可以随用户操做不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操做比较多的应用，而非是游戏或图像处理类应用。

为了实现这些，ng引入了一些很是棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。经过数据与模板的绑定，可以让咱们摆脱繁琐的DOM操做，而将注意力集中在业务逻辑上。

　另一个疑问，ng是MVC框架吗？仍是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不彻底是MVC，由于在书写代码时咱们确实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让咱们把目光移到官网那个非醒目的title上：“AngularJS — Superheroic JavaScript MVW Framework”。

2.2 AngularJS简单介绍

AngularJS 从新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线，它

非但不畏缩不前，反而正面出击，提出了有效的解决方案。

不少前端应用的开发框架，好比Backbone、EmberJS等，都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处，但它没必要要地污染了开发者本身代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此咱们仍是接受了这种方式，由于网络最初的设计没法提供 咱们今天所需的交互性，因而咱们须要框架，来帮咱们填补JavaScript和HTML之间的鸿沟。并且有了它，你不用再“直接”操控DOM，只要给你的DOM注上metadata（即AngularJS里的directive们），而后让AngularJS来帮你操纵DOM。同时，AngularJS不依赖（也不妨碍）任何其余的框架。你甚至能够基于其它的框架来开发AngularJS应用。

API地址：http://docs.angularjs.org/api/；

AngularJS在github上的中文粗译版地址：https://github.com/basestyle/angularjs-cn。

2.3 何时该用AngularJS

AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专一于扩展HTML的功能，提供动态数据绑定（data binding），并且它能跟其它框架（如jQuery）合做融洽。

若是你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。可是像游戏开发之类对DOM进行大量操纵、又或者单纯须要 极高运行速度的应用，就不是AngularJS的用武之地了。

3 AugularJS特性

AngularJS是一个新出现的强大客户端技术，提供给你们的一种开发强大应用的方式。这种方式利用而且扩展HTML，CSS和javascript，而且弥补了它们的一些很是明显的不足。本应该使用HTML来实现而如今由它开发的动态一些内容。

AngularJS有五个最重要的功能和特性：

3.1 特性一：双向的数据绑定

数据绑定多是AngularJS最酷最实用的特性。它可以帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你能够专一于你的应用。

咱们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射能够无缝的，绝不影响的应用到web应用中。

传统来讲，当model变化了。 开发人员须要手动处理DOM元素而且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另外一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，由于开发人员须要处理和解析

这些互动，而后融合到一个model中，而且更新View。这是一个手动的复杂过程，当一个应用很是庞大的时候，将会是一件很是费劲的事情。

这里确定有更好的解决方案！那就是AngularJS的双向数据绑定，可以同步DOM和Model等等。

这里有一个很是简单的例子，用来演示一个input输入框和<h1>元素的双向绑定(例01)：

 

说明：实际效果请你们看AngularJS/demo/index.html

3.2 特性二：模板

在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="http://m.cnblogs.com/142260/{{image.thumbnail}}" rel="nofollow"/>

    </li>

  </ul>

</div>

这里还有一件事值得提一句，AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。

3.3 特性三：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处理布局和互动。

3.4 特性四：服务和依赖注入

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']; 

3.5 特性五：指令（Directives）

指令是我我的最喜欢的特性。你是否是也但愿浏览器能够作点儿有意思的事情？那么AngularJS能够作到。

指令能够用来建立自定义的标签。它们能够用来装饰元素或者操做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>

使用一系列的组件来建立你本身的应用将会让你更方便的添加，删除和更新功能。