AngularJSAngularJS入门
备注
AngularJS是一个Web应用程序框架，旨在简化丰富的客户端应用程序开发。本文档适用于Angular 1.x ，它是更现代的Angular 2的前身，或者参见Angular 2的Stack Overflow文档 。
版本
| 版 | 发布日期 |
|---|---|
| 1.6.5 | 2017年7月3日 |
| 1.6.4 | 2017年3月31日 |
| 1.6.3 | 2017年3月8日 |
| 1.6.2 | 2017年2月7日 |
| 1.5.11 | 2017年1月13日 |
| 1.6.1 | 2016年12月23日 |
| 1.5.10 | 二〇一六年十二月十五日 |
| 1.6.0 | 2016年12月8日 |
| 1.6.0-rc.2 | 2016年11月24日 |
| 1.5.9 | 2016年11月24日 |
| 1.6.0-RC.1 | 2016年11月21日 |
| 1.6.0-rc.0 | 2016年10月26日 |
| 1.2.32 | 2016年10月11日 |
| 1.4.13 | 2016年10月10日 |
| 1.2.31 | 2016年10月10日 |
| 1.5.8 | 2016年7月22日 |
| 1.2.30 | 2016年7月21日 |
| 1.5.7 | 2016年6月15日 |
| 1.4.12 | 2016年6月15日 |
| 1.5.6 | 2016年5月27日 |
| 1.4.11 | 2016年5月27日 |
| 1.5.5 | 2016年4月18日 |
| 1.5.4 | 2016年4月14日 |
| 1.5.3 | 2016年3月25日 |
| 1.5.2 | 2016年3月19日 |
| 1.4.10 | 2016年3月16日 |
| 1.5.1 | 2016年3月16日 |
| 1.5.0 | 2016年2月5日 |
| 1.5.0 rc.2 | 2016年1月28日 |
| 1.4.9 | 2016年1月21日 |
| 1.5.0 RC.1 | 2016年1月16日 |
| 1.5.0 rc.0 | 2015年12月9日 |
| 1.4.8 | 二零一五年十一月二十零日 |
| 1.5.0 beta.2 | 二零一五年十一月十八日 |
| 1.4.7 | 2015年9月30日 |
| 1.3.20 | 2015年9月30日 |
| 1.2.29 | 2015年9月30日 |
| 1.5.0 beta.1 | 2015年9月30日 |
| 1.5.0 beta.0 | 2015年9月17日 |
| 1.4.6 | 2015年9月17日 |
| 1.3.19 | 2015年9月17日 |
| 1.4.5 | 2015年8月28日 |
| 1.3.18 | 2015年8月19日 |
| 1.4.4 | 2015年8月13日 |
| 1.4.3 | 2015年7月15日 |
| 1.3.17 | 2015年7月7日 |
| 1.4.2 | 2015年7月7日 |
| 1.4.1 | 2015年6月16日 |
| 1.3.16 | 2015年6月6日 |
| 1.4.0 | 2015年5月27日 |
| 1.4.0-rc.2 | 2015年5月12日 |
| 1.4.0-RC.1 | 2015年4月24日 |
| 1.4.0-rc.0 | 2015年4月10日 |
| 1.3.15 | 2015年3月17日 |
| 1.4.0-beta.6 | 2015年3月17日 |
| 1.4.0-beta.5 | 2015-02-24 |
| 1.3.14 | 2015-02-24 |
| 1.4.0-beta.4 | 2015年2月9日 |
| 1.3.13 | 2015年2月9日 |
| 1.3.12 | 2015年2月3日 |
| 1.4.0-beta.3 | 2015年2月3日 |
| 1.3.11 | 2015年1月27日 |
| 1.4.0-beta.2 | 2015年1月27日 |
| 1.4.0-beta.1 | 2015年1月20日 |
| 1.3.10 | 2015年1月20日 |
| 1.3.9 | 2015年1月15日 |
| 1.4.0-beta.0 | 2015年1月14日 |
| 1.3.8 | 情节中字 |
| 1.2.28 | 情节中字 |
| 1.3.7 | 情节中字 |
| 1.3.6 | 2014年12月9日 |
| 1.3.5 | 2014年12月2日 |
| 1.3.4 | 情节中字 |
| 1.2.27 | 2014年11月21日 |
| 1.3.3 | 情节中字 |
| 1.3.2 | 2014年11月7日 |
| 1.3.1 | 2014年10月31日 |
| 1.3.0 | 2014年10月14日 |
| 1.3.0 rc.5 | 2014年10月9日 |
| 1.2.26 | 2014年10月3日 |
| 1.3.0 rc.4 | 2014年10月2日 |
| 1.3.0 rc.3 | 2014年9月24日 |
| 1.2.25 | 2014年9月17日 |
| 1.3.0 rc.2 | 2014年9月17日 |
| 1.2.24 | 2014年9月10日 |
| 1.3.0 RC.1 | 2014年9月10日 |
| 1.3.0 rc.0 | 2014年8月30日 |
| 1.2.23 | 2014年8月23日 |
| 1.3.0 beta.19 | 2014年8月23日 |
| 1.2.22 | 2014年8月12日 |
| 1.3.0 beta.18 | 2014年8月12日 |
| 1.2.21 | 2014-07-25 |
| 1.3.0 beta.17 | 2014-07-25 |
| 1.3.0 beta.16 | 2014年7月18日 |
| 1.2.20 | 2014年7月11日 |
| 1.3.0 beta.15 | 2014年7月11日 |
| 1.2.19 | 2014年7月1日 |
| 1.3.0 beta.14 | 2014年7月1日 |
| 1.3.0 beta.13 | 2014年6月16日 |
| 1.3.0 beta.12 | 2014年6月14日 |
| 1.2.18 | 2014年6月14日 |
| 1.3.0 beta.11 | 2014年6月6日 |
| 1.2.17 | 2014年6月6日 |
| 1.3.0 beta.10 | 2014年5月24日 |
| 1.3.0 beta.9 | 2014年5月17日 |
| 1.3.0 beta.8 | 2014年5月9日 |
| 1.3.0 beta.7 | 2014年4月26日 |
| 1.3.0 beta.6 | 2014年4月22日 |
| 1.2.16 | 2014年4月4日 |
| 1.3.0 beta.5 | 2014年4月4日 |
| 1.3.0 beta.4 | 2014年3月28日 |
| 1.2.15 | 2014年3月22日 |
| 1.3.0 beta.3 | 2014年3月21日 |
| 1.3.0 beta.2 | 2014-03-15 |
| 1.3.0 beta.1 | 2014年3月8日 |
| 1.2.14 | 2014年3月1日 |
| 1.2.13 | 2014年2月15日 |
| 1.2.12 | 2014年2月8日 |
| 1.2.11 | 2014年2月3日 |
| 1.2.10 | 2014年1月25日 |
| 1.2.9 | 2014年1月15日 |
| 1.2.8 | 2014-01-10 |
| 1.2.7 | 2014年1月3日 |
| 1.2.6 | 二〇一三年十二月二十日 |
| 1.2.5 | 2013年12月13日 |
| 1.2.4 | 2013年12月6日 |
| 1.2.3 | 2013年11月27日 |
| 1.2.2 | 2013年11月22日 |
| 1.2.1 | 2013年11月15日 |
| 1.2.0 | 2013年11月8日 |
| 1.2.0-rc.3 | 二零一三年十月十四日 |
| 1.2.0-rc.2 | 2013年9月4日 |
| 1.0.8 | 2013年8月22日 |
| 1.2.0rc1 | 2013年8月13日 |
| 1.0.7 | 2013年5月22日 |
| 1.1.5 | 2013年5月22日 |
| 1.0.6 | 2013年4月4日 |
| 1.1.4 | 2013年4月4日 |
| 1.0.5 | 2013年2月20日 |
| 1.1.3 | 2013年2月20日 |
| 1.0.4 | 2013年1月23日 |
| 1.1.2 | 2013年1月23日 |
| 1.1.1 | 2012年11月27日 |
| 1.0.3 | 2012年11月27日 |
| 1.1.0 | 2012年9月4日 |
| 1.0.2 | 2012年9月4日 |
| 1.0.1 | 2012-06-25 |
| 1.0.0 | 2012-06-14 |
| v1.0.0rc12 | 2012-06-12 |
| v1.0.0rc11 | 2012-06-11 |
| v1.0.0rc10 | 2012-05-24 |
| v1.0.0rc9 | 2012-05-15 |
| v1.0.0rc8 | 2012-05-07 |
| v1.0.0rc7 | 2012-05-01 |
| v1.0.0rc6 | 2012-04-21 |
| v1.0.0rc5 | 2012-04-12 |
| v1.0.0rc4 | 2012-04-05 |
| v1.0.0rc3 | 2012-03-30 |
| v1.0.0rc2 | 2012-03-21 |
| G3-v1.0.0rc1 | 2012-03-14 |
| G3-V1.0.0-RC2 | 2012-03-16 |
| 1.0.0rc1 | 2012-03-14 |
| 0.10.6 | 2012-01-17 |
| 0.10.5 | 2011-11-08 |
| 0.10.4 | 2011-10-23 |
| 0.10.3 | 2011-10-14 |
| 0.10.2 | 2011-10-08 |
| 0.10.1 | 2011-09-09 |
| 0.10.0 | 2011-09-02 |
| 0.9.19 | 2011-08-21 |
| 0.9.18 | 2011-07-30 |
| 0.9.17 | 2011-06-30 |
| 0.9.16 | 2011-06-08 |
| 0.9.15 | 2011-04-12 |
| 0.9.14 | 2011-04-01 |
| 0.9.13 | 2011-03-14 |
| 0.9.12 | 2011-03-04 |
| 0.9.11 | 2011-02-09 |
| 0.9.10 | 2011-01-27 |
| 0.9.9 | 2011-01-14 |
| 0.9.7 | 2010-12-11 |
| 0.9.6 | 2010-12-07 |
| 0.9.5 | 2010-11-25 |
| 0.9.4 | 2010-11-19 |
| 0.9.3 | 2010-11-11 |
| 0.9.2 | 2010-11-03 |
| 0.9.1 | 2010-10-27 |
| 0.9.0 | 2010-10-21 |
AngularJS入门视频教程
egghead.io上的AngularJS框架有很多很好的视频教程
- https://egghead.io/courses/angularjs-app-from-scratch-getting-started
- https://egghead.io/courses/angularjs-application-architecture
- https://egghead.io/courses/angular-material-introduction
- https://egghead.io/courses/building-an-angular-1-x-ionic-application
- https://egghead.io/courses/angular-and-webpack-for-modular-applications
- https://egghead.io/courses/angularjs-authentication-with-jwt
- https://egghead.io/courses/angularjs-data-modeling
- https://egghead.io/courses/angular-automation-with-gulp
- https://egghead.io/courses/learn-protractor-testing-for-angularjs
- https://egghead.io/courses/ionic-quickstart-for-windows
- https://egghead.io/courses/build-angular-1-x-apps-with-redux
- https://egghead.io/courses/using-angular-2-patterns-in-angular-1-x-apps
入门
创建一个新的HTML文件并粘贴以下内容：
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, Angular</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
<label>Name</label>
<input ng-model="name" />
<span>Hello, {{ name }}!</span>
<p ng-bind="name"></p>
</body>
</html>
当您使用浏览器打开文件时，您将看到一个输入字段，后跟文本Hello, World! 。编辑输入中的值将实时更新文本，而无需刷新整个页面。
说明：
从Content Delivery Network加载Angular框架。
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>使用
ng-app指令将HTML文档定义为Angular应用ng-app<html ng-app>使用
ng-init初始化name变量<body ng-init=" name = 'World' ">请注意，ng-init仅用于演示和测试目的。构建实际应用程序时，控制器应初始化数据。
将数据从模型绑定到HTML控件上的视图。使用
ng-model将<input>绑定到name属性<input ng-model="name" />使用双括号
{{ }}显示模型中的内容<span>Hello, {{ name }}</span>绑定
name属性的另一种方法是使用ng-bind而不是把手"{{ }}"<span ng-bind="name"></span>
最后三个步骤建立了双向数据绑定 。对输入所做的更改会更新模型 ，这将反映在视图中 。
使用把手和ng-bind 之间存在差异。如果你使用把手，你可能会看到实际的Hello, {{name}} 因为页面在解析表达式之前加载（在加载数据之前），而如果使用ng-bind ，它只会在名称时显示数据已经解决了。作为替代方案，指令ng-cloak 可用于防止把手在编译之前显示。
Angular中的缩小
什么是缩小？
这是从源代码中删除所有不必要的字符而不更改其功能的过程。
普通语法
如果我们使用普通的角度语法来编写控制器，那么在微调我们的文件之后它将破坏我们的功能。
控制器（缩小前）：
var app = angular.module('mainApp', []);
app.controller('FirstController', function($scope) {
$scope.name= 'Hello World !';
});
使用缩小工具后，将如下所示缩小。
var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})
这里，minification从代码中删除了不必要的空格和$ scope变量。因此，当我们使用这个缩小的代码时，它不会在视图上打印任何内容。因为$ scope是控制器和视图之间的关键部分，现在它被小的'e'变量取代。因此，当您运行应用程序时，它将给出未知提供程序'e'依赖性错误。
有两种方法可以使用服务名称信息来注释您的代码，这些信息是安全的最小化：
内联注释语法
var app = angular.module('mainApp', []);
app.controller('FirstController', ['$scope', function($scope) {
$scope.message = 'Hello World !';
}]);
$ inject属性注释语法
FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
$scope.message = 'Hello World !';
}
var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);
缩小后，此代码将是
var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);
这里，angular将变量'a'视为$ scope，它将输出显示为'Hello World！'。
展示所有常见的Angular结构
以下示例在一个文件中显示常见的AngularJS构造：
<!DOCTYPE html>
<html ng-app="myDemoApp">
<head>
<style>.started { background: gold; }</style>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script>
function MyDataService() {
return {
getWorlds: function getWorlds() {
return ["this world", "another world"];
}
};
}
function DemoController(worldsService) {
var vm = this;
vm.messages = worldsService.getWorlds().map(function(w) {
return "Hello, " + w + "!";
});
}
function startup($rootScope, $window) {
$window.alert("Hello, user! Loading worlds...");
$rootScope.hasStarted = true;
}
angular.module("myDemoApp", [/* module dependencies go here */])
.service("worldsService", [MyDataService])
.controller("demoController", ["worldsService", DemoController])
.config(function() {
console.log('configuring application');
})
.run(["$rootScope", "$window", startup]);
</script>
</head>
<body ng-class="{ 'started': hasStarted }" ng-cloak>
<div ng-controller="demoController as vm">
<ul>
<li ng-repeat="msg in vm.messages">{{ msg }}</li>
</ul>
</div>
</body>
</html>
该文件的每一行解释如下：
-
ng-app="myDemoApp"，引导应用程序的ngApp指令 ，告诉角度DOM元素由名为"myDemoApp"的特定angular.module控制; -
<script src="angular.min.js">是引导AngularJS库的第一步;
声明了三个函数（ MyDataService ， DemoController 和startup ），这些函数在下面使用（和解释）。
与数组一起使用的
angular.module(...)作为第二个参数创建一个新模块。此数组用于提供模块依赖项列表。在这个例子中，我们链接调用module(...)函数的结果;.service(...)创建一个Angular Service并返回用于链接的模块;.controller(...)创建一个Angular Controller并返回链接模块;.config(...)使用此方法注册需要在模块加载时执行的工作。.run(...)确保代码在启动时运行并将一组项目作为参数。使用此方法注册在完成注入器加载所有模块时应执行的工作。- 第一项是让Angular知道
startup函数需要将内置的$rootScope服务作为参数注入; - 第二项是让Angular知道
startup函数需要将内置的$window服务作为参数注入; - 数组中的最后一项
startup，是启动时运行的实际函数;
- 第一项是让Angular知道
ng-class是用于设置动态class的ngClass指令 ，在此示例中动态地在$rootScope上使用hasStartedng-cloak是一个指令，用于防止在Angular完全加载应用程序之前简单显示未呈现的Angular html模板（例如“{{ msg }}”）。ng-controller是一个指令 ，要求Angular实例化一个具有特定名称的新控制器来编排DOM的那一部分;ng-repeat是使Angular迭代集合并为每个项目克隆DOM模板的指令 ;{{ msg }}展示插值 ：范围或控制器的一部分的现场渲染;
范围的重要性
由于Angular使用HTML扩展网页和普通Javascript来添加逻辑，因此可以使用ng-app ， ng-controller和一些内置指令（如ng-if ， ng-repeat等）轻松创建网页。使用新的控制器语法，Angular用户的新手可以将函数和数据附加到他们的控制器而不是使用$scope 。
但是，迟早，了解这个$scope 的内容是很重要的。它将不断出现在示例中，因此了解一些内容非常重要。
好消息是它是一个简单而强大的概念。
创建以下内容时：
<div ng-app="myApp">
<h1>Hello {{ name }}</h1>
</div>
名字住在哪里？
答案是Angular创建了一个$rootScope 对象。这只是一个常规的Javascript对象，因此name是$rootScope 对象的属性：
angular.module("myApp", [])
.run(function($rootScope) {
$rootScope.name = "World!";
});
就像Javascript中的全局范围一样，将项添加到全局范围或$rootScope 通常不是一个好主意。
当然，在大多数情况下，我们创建一个控制器并将我们所需的功能放入该控制器中。但是当我们创建一个控制器时，Angular会发挥作用并为该控制器创建一个$scope 对象。这有时被称为本地范围 。
所以，创建以下控制器：
<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{ name }}</h1>
</div>
</div>
允许通过$scope 参数访问本地范围。
angular.module("myApp", [])
.controller("MyController", function($scope) {
$scope.name = "Mr Local!";
});
没有$scope 参数的控制器可能由于某种原因根本不需要它。但重要的是要意识到， 即使使用controllerAs语法 ，也存在本地范围。
由于$scope 是一个JavaScript对象，因此Angular神奇地将其设置为原型继承自$rootScope 。正如您可以想象的那样，可以有一系列范围。例如，您可以在父控制器中创建模型，并将其作为$scope.model 附加到父控制器的作用域。
然后通过原型链，子控制器可以使用$scope.model 在本地访问该模型。
这一切都不是最初明显的，因为它只是Angular在背景中发挥其魔力。但了解$scope 是了解Angular如何工作的重要一步。
最简单的可能角度Hello World。
Angular 1是DOM编译器的核心。我们可以将HTML作为模板或仅作为常规网页传递，然后让它编译应用程序。
我们可以告诉Angular使用{{ }} 把手样式语法将页面区域视为表达式 。大括号之间的任何东西都将被编译，如下所示：
{{ 'Hello' + 'World' }}
这将输出：
HelloWorld
NG-应用
我们告诉Angular使用ng-app 指令将DOM的哪个部分视为主模板。指令是Angular模板编译器知道如何处理的自定义属性或元素。我们现在添加一个ng-app指令：
<html>
<head>
<script src="/angular.js"></script>
</head>
<body ng-app>
{{ 'Hello' + 'World' }}
</body>
</html>
我现在告诉body元素是根模板。其中的任何内容都将被编译。
指令
指令是编译器指令。它们扩展了Angular DOM编译器的功能。这就是为什么Misular的创造者Misko将Angular描述为：
“如果它是为Web应用程序构建的，那么Web浏览器应该是什么样的。
我们确实创建了新的HTML属性和元素，并让Angular将它们编译成应用程序。 ng-app 是一个简单地打开编译器的指令。其他指令包括：
-
ng-click，添加了一个点击处理程序， -
ng-hide，有条件地隐藏元素，和 -
<form>，它为标准HTML表单元素添加了额外的行为。
Angular附带了大约100个内置指令，可以让您完成大多数常见任务。我们也可以自己编写，这些将与内置指令一样对待。
我们用一系列指令构建一个Angular应用程序，与HTML连接在一起。
