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

下載電子書