每当我要逼自己去学习点新东西的时候，我总是强迫自己去认真读完一系列关于此类知识或是技术的一看上去就不错的文章，所谓开卷有益；但鄙人有个坏习惯就是喜欢一目十行断章取义，可能互联网的快餐式节奏让我和我的小伙伴们都渐渐趋于浮躁了，当然也许趋于浮躁的只有鄙人也说不定，小伙伴们可能都很淡定，无故拉上不明真相的群众垫背纯属鄙人以小人之心度君子之腹； 于是，本文就在这样的大背景下诞生了； 本文为译文，翻译自原文：http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/ 同理按我以前翻(xue)译(xi) )其他文章的尿性，标题通常保留原文标题，属于不被待见的范畴，标题君默默哭晕在厕所； ============================== 我是分割线 ==============================
摘要
本AngularJS教程将会在30分钟里以一套合理优化过的知识介绍带你浏览整个AngularJS的世界，带你装逼带你飞（译者注）。当看完本篇篇幅不长但内容细致的教程后，您将能快速的创建强大且直观的web应用程序。 观看演示 查看源代码
简介
我从三年前开始使用AngularJS，那时Angular属于新兴技术且相对不为世人所知。从那时起，AngularJS便慢慢变成最流行的JavaScript开发框架。AngularJS的开发小组为了让Angular处于它所能够处于的最好的状态付出了极大地努力和专注。 本AngularJS教程将会使用Angular版本1.3.4（截止本文发布，Angular最新的稳定版本是1.3.15，译者注），将会覆盖Angular相关基础知识，且实现方式会符合google推荐的最佳实践和本人自己的相关经验。
准备
首先创建一个文件夹angularjs-tutorial，并且按照下面的目录结构创建文件： [cc lang=”javascript”] - angularjs-tutorial | - main.ctrl.js | - app.js | - index.html [/cc] 打开index.html，用下面简单的HTML代码创建一个包含AngularJS和Twitter Bootstrap的简单web页面，其中AngularJS和BootStrap都是从CDN上拿到的。我们将使用Twitter Bootstrap作为本教程的CSS框架，这样我们能够快速的创建layout并且集中注意力到AngularJS本身上。如果你想学习更多关于Twitter Bootstrap的知识可以参考我另外一篇关于Twitter Bootstrap的教程。 [cc lang=”html” nowrap=”false”] AngularJS Tutorial [/cc] 这份HTML文档也加入了对app.js和main.ctrl.js的引用，这两个文件就是我们上面刚刚创建的。
Angular化你的网页
在app.js文件里面我们需要实例化一个AngularJS模块以便在应用程序里面使用。拷贝下面的代码进入app.js [cc lang=”javascript”] angular.module(‘app’, []); [/cc] angular.module()方法会充当angular模块的getter和setter角色。其中第一个参数是这个模块的名字，第二个参数我们传递了一个array数组。如果第二个参数传递了数组，那么angular会创建一个app模块而不是去取回这个模块，您将会在下面我们创建controller的时候看到。 [cc nowrap=”false”] [信息] 在更复杂的应用程序里面，您可能需要提供一份包含这个模块所有依赖的模块的列表数组，而不是像这里的空数组。 [/cc] 现在我们需要告诉angular哪里将会使用到这个模块，打开index.html，在标签加入ng-app=’app’，如下： [cc lang=”html” nowrap=”false”] AngularJS Tutorial [/cc] 这会告诉angular所有在body下的DOM将是我们AngularJS应用程序的一部分，其名称就叫做app。
控制器
AngularJS提供了一份更为宽松的MVC架构，准确的讲，其应该被称为MVVM架构。业务逻辑应该被放置在控制器里面完成，控制器本质上应该“控制”数据并且提供数据给view去显示。打开main.ctrl.js，添加如下的javascript代码来声明我们的主控制器。 [cc lang=”javascript” nowrap=”false”] angular.module(‘app’).controller(“MainController”, function(){ var vm = this; }); [/cc] 在上面的代码中，我们首先去取回了那个我们之前创建的app模块，然后使用controller方法实例化了一个新的控制器。这个controller方法接受两个参数，第一个参数是这个控制器的名字，第二个参数则是一个函数，在这个函数里面我们能放置我们的控制代码。 在我们使用这个控制器之前，我们需要先告诉angular这个控制器可以控制哪部分的html文档。在一份文档里面可以有很多不同的控制器，不同的控制器可以控制相同部分的html片段，也可以控制不同部分的html片段，嵌套的控制器也是支持的。在我们这个异常简单的例子里面我们将只会有一个控制器控制整个页面，我们使用controllerAs这个语法来声明它（后面还会提到），打开index.html并且在body标签加入下面的代码。 [cc lang=”html” nowrap=”false”] AngularJS Tutorial [/cc]
理解scope
通常人们会把$scope注入到控制器里，然后把所有的控制器变量赋值到这个scope对象上，然后所有这些变量便会在view里面可以访问。然而，AngularJS团队推荐另外一种更好的办法，那就是使用controllerAs语法。这提供了一种更语义化的方法来定义控制器，并且规避了一些诸如在多个嵌套控制器存在的时候会出现scope bleed问题（不知道其确切含义，待译者来日深入研究后再议）。 我们把这个控制器的实例赋值给了一个叫vm的变量，这个vm是指ViewModel（页面model），John Papa的style guide里面也是这么推荐的。然后我们将所有需要在view里面能访问的变量赋值到这个对象上，这样angular就可以开始施展它的魔法，比如双向数据绑定（two-way data binding）。 为了更好的理解scope，我们定义一个简单的变量title用来保存我们想在页面上显示的标题文字。打开main.ctrl.js并加入如下代码： [cc lang=”javascript” nowrap=”false”] angular.module(‘app’).controller(“MainController”, function(){ var vm = this; vm.title = ‘AngularJS Tutorial Example’; }); [/cc] 用下面的语法形式来显示这个标题文字： [cc lang=”html” nowrap=”false”] AngularJS Tutorial
{ {main.title}}
[/cc] 在上面的例子中，h1标签里面的标题文字是用一对双大括号来显示的，这样angular就知道这是个变量。我们访问控制器scope的前缀也和我们之前用ControllerAs语法定义的变量相符。现在想象一下在同一个文档里面有多个控制器，而你还在以传统的方法引用多个变量，比如 { {title}}。这样就很难看出这个变量究竟是属于哪个scope。另外，这样也更容易导致很多不同的变量却意外的拥有相同的名字的问题（比如 scope bleed）（大概明白scope bleed啥意思了，译者注） 如果用网页的形式打开index.html，应该就能看到看到标题文字，虽然这网页目前还极其无聊。
See the Pen AngularJS Tutorial Example by Leon Revill (@RevillWeb) on CodePen.
理解绑定
双向数据绑定是AngularJS的一大主要卖点，所有就让我们来看看它到底是什么。在main.ctrl.js里面加上另外一个变量searchInput，就像下面这样： [cc lang=”javascript” nowrap=”false”] angular.module(‘app’).controller(“MainController”, function(){ var vm = this; vm.title = ‘AngularJS Tutorial Example’; vm.searchInput = ‘’; }); [/cc] 打开index.html并加入一些简单的可以让用户输入搜索条件的代码。 [cc lang=”html” nowrap=”false” height=”450”] AngularJS Tutorial
{ {main.title}}
{ {main.searchInput}}
[/cc] 除了加了一个搜索输入框之外，我们又一次使用大括号把变量searchInput的值输出到页面上。在text input的html标签上我们加上了ng-model的指令(directive)，并用主控制器的searchInput变量进行赋值。这样这个input输入框就和我们的变量绑定了，这个input输入值不仅会在这个controller代码里可用而且所有该controller控制的html文档内部也可以访问到该input值。如果现在在浏览器里面打开index.html，在搜索框输入一些搜索条件之后你将会在搜索框下面立刻看到你所输入的搜索条件。您可以在下面的live预览里面亲自试试。
See the Pen QwjpdP by Leon Revill (@RevillWeb) on CodePen.
使用ngRepeat
AngularJS提供了广泛的内置指令（directive）来帮助我们完成一些平时常用的工作。ngRepeat指令允许你在一个列表里面迭代并且显示在页面上。让我们创建一个包含一些对象的数组，从而我们可以对其进行迭代。更新main.ctrl.js文件让其拥有下面的数组。 [cc lang=”javascript”] angular.module(‘app’).controller(“MainController”, function(){ var vm = this; vm.title = ‘AngularJS Tutorial Example’; vm.searchInput = ‘’; vm.shows = [ { title: ‘Game of Thrones’, year: 2011, favorite: true }, { title: ‘Walking Dead’, year: 2010, favorite: false }, { title: ‘Firefly’, year: 2002, favorite: true }, { title: ‘Banshee’, year: 2013, favorite: true }, { title: ‘Greys Anatomy’, year: 2005, favorite: false } ]; }); [/cc] [cc nowrap=”false”] [信息] 在现实情景下，像这样的数据通常会通过一些API服务的调用而得多，并且得到后会将其存于本地。 [/cc] 现在我们有了一个可以用ngRepeat进行迭代循环的数组，循环遍历其中的每部TV show从而可以在页面上创建一个无序列表。打开index.html并加入如下代码。 [cc lang=”html”] AngularJS Tutorial
{ {main.title}}
A list of TV shows
- { {show.title}} { {show.year}}
[/cc] 在这个例子里，ngRepeat会为我们TV shows数组里面的每份内容做一份
