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 |
egghead.io上的AngularJS框架有很多很好的视频教程
创建一个新的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
可用于防止把手在编译之前显示。
什么是缩小?
这是从源代码中删除所有不必要的字符而不更改其功能的过程。
普通语法
如果我们使用普通的角度语法来编写控制器,那么在微调我们的文件之后它将破坏我们的功能。
控制器(缩小前):
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!'。
以下示例在一个文件中显示常见的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(...)
确保代码在启动时运行并将一组项目作为参数。使用此方法注册在完成注入器加载所有模块时应执行的工作。
startup
函数需要将内置的$rootScope
服务作为参数注入; startup
函数需要将内置的$window
服务作为参数注入; startup
,是启动时运行的实际函数; ng-class
是用于设置动态class
的ngClass指令 ,在此示例中动态地在$rootScope
上使用hasStarted
ng-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如何工作的重要一步。
Angular 1是DOM编译器的核心。我们可以将HTML作为模板或仅作为常规网页传递,然后让它编译应用程序。
我们可以告诉Angular使用{{ }}
把手样式语法将页面区域视为表达式 。大括号之间的任何东西都将被编译,如下所示:
{{ 'Hello' + 'World' }}
这将输出:
HelloWorld
我们告诉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连接在一起。