AngularJS入门

Download angularjs eBook

备注

AngularJS是一个Web应用程序框架,旨在简化丰富的客户端应用程序开发。本文档适用于Angular 1.x ,它是更现代的Angular 2的前身,或者参见Angular 2Stack 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框架有很多很好的视频教程

在此处输入图像描述

入门

创建一个新的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! 。编辑输入中的值将实时更新文本,而无需刷新整个页面。


说明:

  1. 从Content Delivery Network加载Angular框架。

    <!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>
     
  2. 使用ng-app 指令将HTML文档定义为Angular应用ng-app

    <!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>
     
  3. 使用ng-init 初始化name 变量

    <!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>
     

    请注意,ng-init仅用于演示和测试目的。构建实际应用程序时,控制器应初始化数据。

  4. 将数据从模型绑定到HTML控件上的视图。使用ng-model<input> 绑定到name 属性

    <!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>
     
  5. 使用双括号{{ }} 显示模型中的内容

    <!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>
     
  6. 绑定name 属性的另一种方法是使用ng-bind 而不是把手"{{ }}"

    <!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>
     

最后三个步骤建立了双向数据绑定 。对输入所做的更改会更新模型 ,这将反映在视图中

使用把手和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($scope) {
    $scope.name= 'Hello World !';  
});
 

这里,minification从代码中删除了不必要的空格和$ scope变量。因此,当我们使用这个缩小的代码时,它不会在视图上打印任何内容。因为$ scope是控制器和视图之间的关键部分,现在它被小的'e'变量取代。因此,当您运行应用程序时,它将给出未知提供程序'e'依赖性错误。

有两种方法可以使用服务名称信息来注释您的代码,这些信息是安全的最小化:

内联注释语法

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});
 

$ inject属性注释语法

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});
 

缩小后,此代码将是

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= '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>
 

该文件的每一行解释如下:

现场演示

  1. ng-app="myDemoApp" ,引导应用程序的ngApp指令 ,告诉角度DOM元素由名为"myDemoApp" 的特定angular.module 控制;
  2. <script src="angular.min.js">引导AngularJS库的第一步;

声明了三个函数( MyDataServiceDemoControllerstartup ),这些函数在下面使用(和解释)。

  1. 与数组一起使用的angular.module(...) 作为第二个参数创建一个新模块。此数组用于提供模块依赖项列表。在这个例子中,我们链接调用module(...) 函数的结果;

  2. .service(...) 创建一个Angular Service并返回用于链接的模块;

  3. .controller(...) 创建一个Angular Controller并返回链接模块;

  4. .config(...) 使用此方法注册需要在模块加载时执行的工作。

  5. .run(...) 确保代码在启动时运行并将一组项目作为参数。使用此方法注册在完成注入器加载所有模块时应执行的工作。

  6. ng-class 是用于设置动态class 的ngClass指令 ,在此示例中动态地在$rootScope 上使用hasStarted

  7. ng-cloak一个指令,用于防止在Angular完全加载应用程序之前简单显示未呈现的Angular html模板(例如“ {{ msg }} ”)。

  8. ng-controller一个指令 ,要求Angular实例化一个具有特定名称的新控制器来编排DOM的那一部分;

  9. ng-repeat 是使Angular迭代集合并为每个项目克隆DOM模板的指令 ;

  10. {{ msg }} 展示插值 :范围或控制器的一部分的现场渲染;

范围的重要性

由于Angular使用HTML扩展网页和普通Javascript来添加逻辑,因此可以使用ng-appng-controller和一些内置指令(如ng-ifng-repeat等)轻松创建网页。使用新的控制器语法,Angular用户的新手可以将函数和数据附加到他们的控制器而不是使用$scope

但是,迟早,了解这个$scope 的内容是很重要的。它将不断出现在示例中,因此了解一些内容非常重要。

好消息是它是一个简单而强大的概念。

创建以下内容时:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>
 

名字住在哪里?

答案是Angular创建了一个$rootScope 对象。这只是一个常规的Javascript对象,因此name$rootScope 对象的属性:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>
 

就像Javascript中的全局范围一样,将项添加到全局范围或$rootScope 通常不是一个好主意。

当然,在大多数情况下,我们创建一个控制器并将我们所需的功能放入该控制器中。但是当我们创建一个控制器时,Angular会发挥作用并为该控制器创建一个$scope 对象。这有时被称为本地范围

所以,创建以下控制器:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>
 

允许通过$scope 参数访问本地范围。

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>
 

没有$scope 参数的控制器可能由于某种原因根本不需要它。但重要的是要意识到, 即使使用controllerAs语法 ,也存在本地范围。

由于$scope 是一个JavaScript对象,因此Angular神奇地将其设置为原型继承自$rootScope 。正如您可以想象的那样,可以有一系列范围。例如,您可以在父控制器中创建模型,并将其作为$scope.model 附加到父控制器的作用域。

然后通过原型链,子控制器可以使用$scope.model 在本地访问该模型。

这一切都不是最初明显的,因为它只是Angular在背景中发挥其魔力。但了解$scope 是了解Angular如何工作的重要一步。

最简单的可能角度Hello World。

Angular 1是DOM编译器的核心。我们可以将HTML作为模板或仅作为常规网页传递,然后让它编译应用程序。

我们可以告诉Angular使用{{ }} 把手样式语法将页面区域视为表达式 。大括号之间的任何东西都将被编译,如下所示:

{{ 'Hello' + 'World' }}
 

这将输出:

{{ 'Hello' + 'World' }}
 

NG-应用

我们告诉Angular使用ng-app 指令将DOM的哪个部分视为主模板。指令是Angular模板编译器知道如何处理的自定义属性或元素。我们现在添加一个ng-app指令:

{{ 'Hello' + 'World' }}
 

我现在告诉body元素是根模板。其中的任何内容都将被编译。

指令

指令是编译器指令。它们扩展了Angular DOM编译器的功能。这就是为什么Misular的创造者Misko将Angular描述为:

“如果它是为Web应用程序构建的,那么Web浏览器应该是什么样的。

我们确实创建了新的HTML属性和元素,并让Angular将它们编译成应用程序。 ng-app 是一个简单地打开编译器的指令。其他指令包括:

  • ng-click ,添加了一个点击处理程序,
  • ng-hide ,有条件地隐藏元素,和
  • <form> ,它为标准HTML表单元素添加了额外的行为。

Angular附带了大约100个内置指令,可以让您完成大多数常见任务。我们也可以自己编写,这些将与内置指令一样对待。

我们用一系列指令构建一个Angular应用程序,与HTML连接在一起。

Stats

4876 Contributors: 47
Monday, July 17, 2017
许可下: CC-BY-SA

不隶属于 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下载电子书