，翻译如下：

简介

我三年前开始使用 AngularJS，那时它还是一个新鲜事物。现在 AngularJS已经成为了一个最受欢迎的 JavaScript 框架之一，多亏了AngularJS 团队作出的努力。

这个教程使用的是1.3.4版本，涵盖非常基础东西，但是都是在使用过程中总结出来的最佳实践经验。

开始

开始前，你先创建一个文件夹，命名为 angularjs-tutorial ，然后在文件夹中建立下面几个文件，文件目录结构如下：

- angularjs-tutorial

    | - main.ctrl.js

    | - app.js

    | - index.html

打开 index.html 文件，输入一下简单的 HTML内容，文件头部引用来自其它站点CDN的 AngularJS文件和 Twitter Bootstrap样式文件。我们准备使用 Twitter Bootstrap 作为 CSS 框架，这样会让我们更容易更快地创建视图布局，可以让我们将注意力放在 AngularJS上面。如果你想了解更多 Twitter Bootstrap 有关的知识，请点击我的相关教程 Twitter Bootstrap Tutorial。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>AngularJS Tutorial</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

    <script src="app.js"></script>

    <script src="main.ctrl.js"></script>

</head>

<body>

</body>

</html>

这些 HTML 代码也引用了我们自己创建的 app.js 和main.ctrl.js 文件。

让你的网页Angular化

在我们的 app.js 我们要先搞一个 AngularJS module 出来用在我们的app里面。复制下面的代码到 app.js

angular.module('app', []);

这个 angular.module() 函数用作angular module的 setter 和getter 。第一个参数是 module 的名称，我们起名为 app, 第二个参数我们提供了一个数组。如果给出了一个数组，那么angular会创建并取得相应的app module，稍后我们创建自己的controller你就可以看到。

提示：在更复杂的应用中，我们会用module数组来代替上面所说的空数组。

现在我们需要告诉angular，我们想将这个module用在什么地方，打开 index.html ，将 ng-app='app' 添加到 <body> 标签，如下所示：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>AngularJS Tutorial</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

</head>

<body ng-app="app">

</body>

</html>

这里告诉了angular ，所有在body里面的东西都是我们 AngularJS application 的一部分，我们这里的AngularJS application 命名为 app.

控制器 controller

AngularJS 提供一种宽松的 MVC 结构，更准确来说是 MVVM 模式。控制器是你处理业务逻辑的地方，本质上来说，控制器是用来控制数据并且将数据提供给视图用于显示的东西。为了声明我们的 controller，打开 main.ctrl.js 文件，将下面的代码添加进去。

angular.module('app').controller("MainController", function(){

    var vm = this;

});

在声明的代码中，我们首先获取了一个我们之前声明的app module，然后用 controller 函数初始化一个新的controller。这个 controller 函数有两个参数，第一个参数是控制器名称，第二个参数是一个函数，这个函数是用来放我们的控制代码的，我们要实现的功能就是写在这个函数里面。

在我们使用这个控制器前，我们需要告诉 angular那部分HTML 代码是属于这个控制器管理的。在一个html文档中，你可以有很多个控制器，并且可能有多个控制器管理同一段html代码，控制器之间甚至可以嵌套。在我们非常简单的例子中，我们准备只用一个控制器来管理这个页面好了。我们可以用 controllerAs 语法来声明（等一下再细说），打开 index.html ，将下面代码放在 body 标签。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>AngularJS Tutorial</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

</head>

<body ng-app="app" ng-controller="MainController as main">

</body>

</html>

理解 scope

通常来说你可以将 $scope 注入到controller,然后将全部controller变量分配到这个scope对象，这样这些变量就可以在html使用了。然后，更好的途径，被AngularJS团队推荐的做法是使用 controllerAs 。这种方式提供了更 semantic 的途径在html中去声明 controllers ，并且防止当 multiple-nested controllers 出现的时候诸如 scope bleed 的问题。

我们将一个 controller 实例分配到变量 vm 中，这个变量代表了 ViewModel ，在 John Papa的文章 style guide 中推荐这样做。我们将分配所有需要在view中可访问的控制器变量到这个对象，这样angular 就可以起到诸如双向绑定等魔法般的作用了。

为了理解scope，我们声明一个简单的变量 title ，用来保存在我们页面上要显示的标题。打开 main.ctrl.js 添加下面的代码。

angular.module('app').controller("MainController", function(){

    var vm = this;

    vm.title = 'AngularJS Tutorial Example';

});

为了在我们的页面显示这个标题文本，我们使用下面的语法。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>AngularJS Tutorial</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

</head>

<body ng-app="app" ng-controller="MainController as main">

    <div class="container">

        <h1>{{main.title}}</h1>

    </div>

</body>

</html>

在上面的例子中，我们使用了两对花括号{{}}将title显示在h1标签中，两对花括号可以让 angular 知道这是个变量。之前我们用MainController as main来声明了一个控制器的别名，我们通过用控制器的别名main加变量来访问控制器 scope 里面的变量title，如{{main.title}}。现在想一下，如果我们一个文档中有几个不同的 controller，你如果不用别名加变量的形式，而是直接写{{title}}，那么你将很难区分那个变量是属于哪个控制器的。另外，如果不同的控制器里面有相同名称的变量，那么问题就更严重了 (例如： scope bleed).

如果你在一个网页打开 index.html ，你可以看到一个无聊title 的文本显示在网页上面。

理解绑定

双向绑定是 AngularJS 的主要卖点之一。让我们看一下什么情况。在main.ctrl.js 中增加一个变量 searchInput 如下：

angular.module('app').controller("MainController", function(){

    var vm = this;

    vm.title = 'AngularJS Tutorial Example';

    vm.searchInput = '';

});

打开 index.html ，添加一个简单的输入框：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>AngularJS Tutorial</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

    <script src="app.js"></script>

    <script src="main.ctrl.js"></script>

</head>

<body ng-app="app" ng-controller="MainController as main">

<div class="container">

    <h1>{{main.title}}</h1>

    <div class="input-group">

        <span class="input-group-addon">

            <span class="glyphicon glyphicon-search"></span>

        </span>

        <input type="text" class="form-control" ng-model="main.searchInput">

    </div>

    <p>{{main.searchInput}}</p>

</div>

</body>

</html>

除此以外添加双重花括号包住 searchInput 变量，这样输入框的值就显示在双重花括号的位置。在输入框中我们添加一个 ng-model 属性，并指定值为 searchInput ，这个值就是来自main controller的searchInput变量。现在输入框绑定了同名的变量，它可以受控制器管理。如果你在浏览器打开index.html 页面，在输入框中输入内容，你可以立刻看到{{main.searchInput}}的位置显示出文本框的内容。

使用 ngRepeat

AngularJS 提供很多内建的指令方便你完成常见的功能。ngRepeat 指令可让你枚举一个集合，然后显示在页面上。我们建一个数组来试一下。把 main.ctrl.js 改为下面这样。

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

        }

    ];

});

提示：在真实的开发场景，数据可能通过服务或者本地文件的API加载进来的。

现在我们有了一个数组，可以使用ngRepeat来遍历展示每一项数据。打开 index.html 添加如下代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>AngularJS Tutorial</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

    <script src="app.js"></script>

    <script src="main.ctrl.js"></script>

</head>

<body ng-app="app" ng-controller="MainController as main">

<div class="container">

    <h1>{{main.title}}</h1>

    <div class="input-group">

        <span class="input-group-addon">

            <span class="glyphicon glyphicon-search"></span>

        </span>

        <input type="text" class="form-control" ng-model="main.searchInput">

    </div>

    <h3>A list of TV shows</h3>

    <ul class="list-group">

        <li class="list-group-item" ng-repeat="show in main.shows">{{show.title}} <span class="badge">{{show.year}}</span></li>

    </ul>

</div>

</body>

</html>

在这个例子ngRepeat会复制列表的项，然后绑定数组的数据展示到页面。我们可以用 {{show.[property]}} 读取每一项的属性，然后去展示在<li>元素中。

隐藏和显示元素

其它AngularJS 指令可以让你用判断和表达式来显示和隐藏html元素、这些指令是 ngHide, ngShow, ngSwitch & ngIf。甚至通过这些指令达到相似的目的，这对于某些情况很有用。ngSwitch 指令很有用，当你碰到条件判断是，例如单选框切换。 ngHide, ngShow 和 ngIf 很相似。ngIf 会移除受影响的元素， ngHide 和 ngShow 只是增加一个 display: none;样式值来隐藏元素。

因此 ngIf 比 ngHide, ngShow等命令会节省一些内存。 ngHide 和 ngShow在有动画效果的隐藏和显示会好一些，ngIf会影响动画的效果。

在下面例子中，我们用ngIf指令我们被标记为喜欢的每一个列表项前面添加带一个星星图标：

<h3>A list of TV shows</h3>

<ul class="list-group">

    <li class="list-group-item" ng-repeat="show in main.shows"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>

</ul>

当 show.favorite的值为true的时候列表的元素增加了一个星星图标ng-if的值是一个表达式，所以也可以这样写 show.favorite == true 或者 show.favorite != false

在ngRepeat中使用过滤器

用AngularJS 很容易实现过滤筛选ngRepeat里面的条目。

<h3>A list of TV shows</h3>

<ul class="list-group">

    <li class="list-group-item" ng-repeat="show in main.shows | filter:main.searchInput"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>

</ul>

使用ng-repeat="show in main.shows | filter:main.searchInput"就行了，很容易对吧。

来复杂一点的，增加几种排序功能。改一下main.ctrl.js，列出排序的几种类型。

vm.orders = [

    {

        id: 1,

        title: 'Year Ascending',

        key: 'year',

        reverse: false

    },

    {

        id: 2,

        title: 'Year Descending',

        key: 'year',

        reverse: true

    },

    {

        id: 3,

        title: 'Title Ascending',

        key: 'title',

        reverse: false

    },

    {

        id: 4,

        title: 'Title Ascending',

        key: 'title',

        reverse: true

    }

];

vm.order = vm.orders[0];

现在增加一个选择菜单到 index.html ，用户可以用来选择不同的排序，然后增加一个过滤器到我们上面添加的 ngRepeat 。

<body ng-app="app" ng-controller="MainController as main">

<div class="container">

    <h1>{{main.title}}</h1>

    <div class="input-group">

        <span class="input-group-addon">

            <span class="glyphicon glyphicon-search"></span>

        </span>

        <input type="text" class="form-control" ng-model="main.searchInput">

    </div>

    <h3>A list of TV shows</h3>

    <ul class="list-group">

        <li class="list-group-item" ng-repeat="show in main.shows | filter:main.searchInput | orderBy:main.order.key:main.order.reverse"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>

    </ul>

    <select class="form-control pull-right" ng-model="main.order" ng-options="order as order.title for order in main.orders"></select>

</div>

</body>

在上面，我们已经增加了一个 orderBy 过滤器到 ngRepeat ，而且我们指定了用来排序的哪个属性，在这个例子中我们用title来排序。然后我们指定了排序的方向，这个例子中我们我们用了逆向排序 reverse。 为了组装好选择菜单，我们使用 ngOptions 指令，点击这里你可以了解更多

在菜单中，改变选中的值，体验一下吧。

表单检验

从表单中收集用户数据是网页应用开发的重点之一。AngularJS 使表单验证变得很容易。在下面这个简单的例子中，我们会创建一个表单允许用户添加一个新的节目到节目列表中。打开 index.html 代码，添加下面的内容

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>AngularJS Tutorial</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

    <script src="app.js"></script>

    <script src="main.ctrl.js"></script>

</head>

<body ng-app="app" ng-controller="MainController as main">

<div class="container">

    <h1>{{main.title}}</h1>

    <div class="input-group">

        <span class="input-group-addon">

            <span class="glyphicon glyphicon-search"></span>

        </span>

        <input type="text" class="form-control" ng-model="main.searchInput">

    </div>

    <h3>A list of TV shows</h3>

    <ul class="list-group">

        <li class="list-group-item" ng-repeat="show in main.shows | filter:main.searchInput | orderBy:main.order.key:main.order.reverse"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>

    </ul>

    <select class="form-control pull-right" ng-model="main.order" ng-options="order as order.title for order in main.orders"></select>

    <div class="clearfix"></div>

    <h3>Add a new TV Show</h3>

    <form name="main.addForm" class="form">

        <div class="form-group">

            <label>Title</label>

            <input type="text" class="form-control" ng-model="main.new.title" required />

        </div>

        <div class="form-group">

            <label>Year</label>

            <input type="number" min="1900" max="2030" class="form-control" ng-model="main.new.year" required />

        </div>

        <div class="row">

            <div class="col-xs-6">

                <label>Favorite: <input type="checkbox" ng-model="main.new.favorite" /></label>

            </div>

            <div class="col-xs-6">

                <button class="btn btn-success pull-right"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>

            </div>

        </div>

    </form>

</div>

</body>

</html>

这个简单的表单允许用户输入一个节目标题、年份以及指定此节目是否是否是自己喜欢的。在标题和年份字段我们增加了一个 required 属性用来指定这个字段是必填的。另外我们还指定了年份字段的类型为 number ，限制只能输入数字，我们还增加了 min 和 max 属性用来限制输入数字的大小范围。当用户点击添加按钮是，会自动给用户实时反馈。如果用户没有在必填字段中输入内容，会提示一个错误消息。另外如果用户输入的数字不在1900到2030范围内，也会有相应的错误提示。自己试一下吧。

了解更多关于AngularJS表单的知识，请点击这里

简单的事件响应

在教程最后的一部分，讲一下AngularJs的事件吧。事件在Js框架当中总是处于很重要的地位，即使是对于AngularJs的双向绑定来说

在 MainController底部添加如下代码：

vm.new = {};

vm.addShow = function() {

    vm.shows.push(vm.new);

    vm.new = {};

};

上面的代码声明了一个叫做new的对象，表单用来存放来自ngModel输入的值 (例如 ng-model="main.new.year")。另外 addShow 函数用来将 new 对象放到 shows 数组，然后添加到视图上的列表。

AngularJS 提供了多种时间指令例如ngClick, ngChange, ngFocus, 等待。我们可以用来相应各种动作。在我们的例子我们使用ngSubmit 指令在表单被成功提交后触发调用 addShow 函数。打开 index.html，增加相应的指令代码：

<form name="main.addForm" class="form" ng-submit="main.addShow()">

现在，当表单通过验证后，用户点击按钮， addShow 函数就会被调用，新的节目就会显示到界面上的节目单上面。

这是一个AngularJs提供的一个非常简单的例子，如果想了解更多请查看相关文档。

结语

在这个快速入门教程里，你现在应该掌握了几个AngularJS 概念，你可以用这些知识搭建一下简单的网页应用了。 AngularJS 提供了更多功能，在30分钟的教程里我很难一一列举，如果你喜欢这个教程，请到原文中订阅，随时获得最新的更高级的教程。

（终于翻译完了，可能有一些错误字和一些不通顺的语义，请大家见谅）

AngularJS 30分钟快速入门【译】的更多相关文章

Python 30分钟快速入门指南
学习地址中文版:Python 30分钟入门指南英文版:Learn X in Y minutes 学习时间 2019/03/10 19:00 - 19:32,多用了2分钟.
30 分钟快速入门 Docker 教程
原文地址:梁桂钊的博客博客地址:http://blog.720ui.com 欢迎关注公众号:「服务端思维」.一群同频者,一起成长,一起精进,打破认知的局限性. 一.欢迎来到 Docker 世界 1. ...
vue.js-vue入门教程教你如何html中使用vue（30分钟快速入门）
前后端分离.微服务框架是当下比较流行的词汇,而vue就是前端框架的佼佼者.下面重点介绍一下vue的用法: vue起步:1.引包 2.启动new Vue({el:目的地,template:模板内容 ...
30分钟快速掌握AngularJs
[后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs 一.前言对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来 ...
Vue.js——60分钟快速入门（转）
vue:Vue.js——60分钟快速入门 <!doctype html> <html lang="en"> <head> <meta ch ...
不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门
Vue.js——60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...
2016windows（10） wamp 最简单30分钟thrift入门使用讲解，实现php作为服务器和客户端的hello world
2016最简单windows(10) wamp 30分钟thrift入门使用讲解,实现php作为服务器和客户端的hello world thrift是什么最简单解释 thrift是用来帮助各个编程语 ...
一分钟快速入门openstack
一.它是什么,能干什么想认识一个事物,必须先弄明白它是什么,能干什么.首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让大家认识更清晰些.op ...
Vue.js 60 分钟快速入门
Vue.js 60 分钟快速入门转载作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...

随机推荐

log4j日志工具
一.关于日志 1.日志定义: 项目在运行阶段产生的信息 2.日志级别最常见的日志级别有4个: error :错误日志 warn:警告日志 info:流程日志 debug:调试日志优先级从高到低 ...
线程安全的无锁RingBuffer的实现
这里的线程安全,是指一个读线程和一个写线程,读写两个线程是安全的,而不是说多个读线程和多个写线程是安全的.. 在程序设计中,我们有时会遇到这样的情况,一个线程将数据写到一个buffer中,另外一个线程 ...
IIS ARR 负载均衡
阅读:http://www.cnblogs.com/jesse2013/p/dlws-loadbalancer2.html 自定义端口:http://www.th7.cn/Program/net/20 ...
使用excel计算指数平滑和移动平均
指数平滑法原数数据如下: 点击数据——数据分析选择指数平滑最一次平滑由于我们选择的区域是B1:B22,第一个单元格“钢产量”,被当做标志,所以我们应该勾选标志.当我们勾选了标志后,列中的第 ...
ASP.NET学习链接
张子阳个人ASP.NET技术博客:http://www.tracefact.net/Asp-Net/ 动态加载asp.net分页控件:http://www.cnblogs.com/cresuccess ...
PHP之static静态变量详解（二）
在看别人项目过程中,看到函数里面很多static修饰的变量,关于static修饰的变量,作用域,用法越看越困惑,所以查了下资料. static用法如下: 1.static 放在函数内部修饰变量 2.s ...
php glob()函数实现目录文件遍历与寻找与模式匹配的文件路径
采用PHP函数glob实现寻找与模式匹配的文件路径,主要讨论glob()函数的作用和用法,利用glob函数读取目录比其它的要快N倍,因为glob函数是内置函数处理起来自然要快. 一,函数原型 arra ...
Linux Socket编程
“一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览 ...
2.3属性在 ASP.NET Web API 2 路由
路由是 Web API 如何匹配 URI 的行动.Web API 2 支持一种新型的路由,称为属性路由.顾名思义,属性路由使用属性来定义路由.属性路由给你更多的控制 Uri 在您的 web API.例 ...
php引用
1.需求了解php引用 2.变量的引用目前为止看到的引用是变量的引用, 例子1 $a="ABC"; $b =&$a; echo $a;//这里输出:ABC echo $ ...

AngularJS 30分钟快速入门【译】