Y 分鐘速成 AngularJS Detail - angularjs,javascript,html,css,前端小X學技術 Blog

源代碼下載： learnangular-cn.html
AngularJS 教程

AngularJS 1.0 版在 2012 年發佈。
Miško Hevery, 一位 Google 員工，從 2009 年開始開發 AngularJS。
結果發現這個想法很好，從而該項目現在也被 Google 官方所支持了。
AngularJS 是一個 JavaScript 框架。它可以通過一個 "script" 標籤添加到一個 HTML 頁面中。
AngularJS 通過指令擴展了 HTML 屬性，並且通過表達式將數據綁定到 HTML。
你應該已經瞭解了的知識

在學習 AngularJS 之前，你應該對以下知識有了基本的瞭解：
HTML
CSS
JavaScript
// AngularJS 是一個 JavaScript 框架。它是一個用 JavaScript 寫的庫。
// AngularJS 以一個 JavaScript 文件的形式發佈，並且能通過一個 script 標籤添加到一個網頁中：
// <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

///////////////////////////////////
// AngularJS 擴展 HTML

//AngularJS 通過 ng-directives 擴展 HTML。
//ng-app 指令定義一個 AngularJS 應用。
//ng-model 指令將 HTML 控件 (input, select, textarea) 的值綁定到應用的數據上。
//ng-bind 指令將應用的數據綁定到 HTML 視圖上。
<!DOCTYPE html>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div ng-app="">
      <p>Name: <input type="text" ng-model="name"></p>
      <p ng-bind="name"></p>
    </div>
  </body>
</html>

/*
  * 例子解析：
  * AngularJS 在網頁加載後自動開啓。
  * ng-app 指令告訴 AngularJS： <div> 元素是 AngularJS 應用的 "所有者"。
  * ng-model 指令將 input 輸入框的值綁定到應用的 name 變量上。
  * ng-bind 指令將 <p> 元素的 innerHTML 綁定到應用的 name 變量上。
*/
<tag> 這裏是要解析的內容 </tag>

///////////////////////////////////
// AngularJS 表達式

// AngularJS 表達式寫在雙括號內： {{ 表達式 }}。
// AngularJS 表達式採用和 ng-bind 指令一樣的方式將數據綁定到 HTML。
// AngularJS 將在編寫表達式的原樣位置上 "輸出" 數據。
// AngularJS 表達式非常像 JavaScript 表達式：它們能包含文本，運算符和變量。
// 例如 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div ng-app="">
      <p>My first expression: {{ 5 + 5 }}</p>
    </div>
  </body>
</html>

//如果你刪除了 ng-app 指令， HTML 將原樣顯示錶達式，不對它進行解析：
<!DOCTYPE html>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div>
      <p>My first expression: {{ 5 + 5 }}</p>
    </div>
  </body>
</html>

// AngularJS 表達式採用和 ng-bind 指令一樣的方式將 AngularJS 數據綁定到 HTML。
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div ng-app="">
      <p>Name: <input type="text" ng-model="name"></p>
      <p>{{name}}</p>
    </div>
  </body>
</html>

// AngularJS 的數字類似 JavaScript 的數字：
<div ng-app="" ng-init="quantity=1;cost=5">
  <p>Total in dollar: {{ quantity * cost }}</p>
</div>

//AngularJS 的字符串類似 JavaScript 的字符串：
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
  <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

//AngularJS 的對象類似 JavaScript 的對象：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  <p>The name is {{ person.lastName }}</p>
</div>

//AngularJS 的數組類似 JavaScript 的數組：
<div ng-app="" ng-init="points=[1,15,19,2,40]">
  <p>The third result is {{ points[2] }}</p>
</div>

// 和 JavaScript 表達式一樣， AngularJS 表達式能包含文本，運算符和變量。
// 和 JavaScript 表達式不同， AngularJS 表達式能寫在 HTML 內。
// AngularJS 表達式不支持條件，循環和異常，而 JavaScript 表達式卻支持。
// AngularJS 表達式支持過濾器，而 JavaScript 表達式不支持。

///////////////////////////////////
// AngularJS 指令


//AngularJS 指令使用前綴 ng- 擴展 HTML 屬性。
//ng-app 指令初始化一個 AngularJS 應用。
//ng-init 指令初始化應用的數據。
//ng-model 指令將 HTML 控件 (input, select, textarea) 的值綁定到應用的數據上。
<div ng-app="" ng-init="firstName='John'">
  <p>Name: <input type="text" ng-model="firstName"></p>
  <p>You wrote: {{ firstName }}</p>
</div>

//使用 ng-init 並不常見。你將在有關控制器的章節中學習如何初始化數據。

//ng-repeat 指令會重複一個 HTML 元素：
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

//ng-repeat 指令用在一個對象數組上：
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
  <ul>
    <li ng-repeat="x  in names">
      {{ x.name + ', ' + x.country }}
    </li>
  </ul>
</div>

// AngularJS 最適合用於數據庫 CRUD (Create Read Update Delete) 的應用。
// 只需設想這些對象都是來自一個數據庫的記錄。

// ng-app 指令定義一個 AngularJS 應用的根元素。
// ng-app 指令將在頁面加載後自動啓動（自動初始化）應用。
// 稍後你將學習如何為 ng-app 設置一個值（如 ng-app="myModule"）， 來連接代碼模塊。

// ng-init 指令為一個 AngularJS 應用定義初始值。
// 通常，你不太使用 ng-init。你會轉而使用一個控制器或模塊。
// 你將在稍後學到更多有關控制器和模塊的內容。

//ng-model 指令將 HTML 控件 (input, select, textarea) 的值綁定到應用的數據上。
//ng-model 指令還能：
//為應用的數據提供類型驗證 (number, email, required)。
//為應用的數據提供狀態信息 (invalid, dirty, touched, error)。
//為 HTML 元素提供 CSS 類。
//將 HTML 元素綁定到 HTML 表單。

//ng-repeat 指令為集合（一個數組）中的每個元素克隆出 HTML 元素。

///////////////////////////////////
// AngularJS 控制器

// AngularJS 控制器控制 AngularJS 應用中的數據。
// AngularJS 控制器就是常規的 JavaScript 對象。

// AngularJS 應用由控制器控制。
// ng-controller 指令定義應用的控制器。
// 一個控制器就是一個 JavaScript 對象， 通過標準的 JavaScript 對象構建器創建。

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

//應用的解析：

//AngularJS 應用通過 ng-app="myApp" 定義。該應用運行在 <div> 內。
//ng-controller="myCtrl" 屬性是一個 AngularJS 指令。它定義了一個控制器。
//myCtrl 函數是一個 JavaScript 函數。
//AngularJS 將使用一個 $scope 對象來調用控制器。
//AngularJS 中， $scope 就是該應用對象（應用的變量和函數的所有者）。
//該控制器在 $scope 內創建了兩個屬性（即變量 firstName 和 lastName）。
//ng-model 指令將輸入表單項綁定到控制器的屬性上（firstName 和 lastName）。

//以上的例子演示了一個包含有兩個屬性 lastName 和 firstName 的控制器。
//一個控制器也可以有方法（函數的變量）：
<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

//在較大型的應用中， 通常是將控制器代碼保存在外部文件中。
//只需將 <script> </script> 標籤之間的代碼複製到一個名為 personController.js 的外部文件中：

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

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

// 為方便下個例子使用，我們將創建一個新的控制器文件：
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

//將文件保存為 namesController.js：
//然後在一個應用中使用該控制器：

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

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

///////////////////////////////////
// AngularJS 過濾器

// 過濾器可以通過一個管道符添加到表達式和指令上。
// AngularJS 過濾器能用來轉換數據：

- **currency**:  將一個數字格式化成貨幣格式。
- **filter**:  從一個數組中選擇一組子集元素。
- **lowercase**: 將一個字符串格式化成小寫形式。
- **orderBy**: 依據一個表達式排序一個數組。
- **upper**: 將一個字符串格式化成大寫形式。

//一個過濾器可以通過一個管道符 (|) 及一個過濾器表達式添加到一個表達式上。
//（在下面的兩個例子中，我們將使用前一章中的 person 控制器）
//uppercase 過濾器將字符串格式化成大寫格式：
<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>

//lowercase 過濾器將字符串格式化成小寫格式：
<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

//currency 過濾器將一個數字格式化成貨幣格式：
<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div> 

//一個過濾器可以通過一個管道符 (|) 及一個過濾器表達式添加到一個指令上。
//orderBy 過濾器根據一個表達式排序一個數組：
<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

<div>

//一個輸入框過濾器可以通過一個管道符 (|) 
//以及後跟一個冒號和模式名的 filter 添加到一個指令上。
//該過濾器從一個數組中選擇一個子集：

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

///////////////////////////////////
// AngularJS AJAX - $http

//$http 是一個從遠程服務器讀取數據的 AngularJS 服務。

// 以下數據可由一個 web 服務器提供：
// http://www.w3schools.com/angular/customers.php
// **訪問 URL 來查看數據格式**

// AngularJS $http 是一個從 web 服務器上讀取數據的核心服務。
// $http.get(url) 這個函數用來讀取服務器數據。
<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function(response) {$scope.names = response.records;});
});
</script>

// 應用解析：

// AngularJS 應用由 ng-app 定義。該應用運行在一個 <div> 中。
// ng-controller 指令命名控制器對象。
// customersCtrl 函數是一個標準的 JavaScript 對象構造器。
// AngularJS 會使用一個 $scope 和 $http 對象來調用 customersCtrl。
// $scope 就是該應用對象（應用的變量和函數的所有者）。
// $http 是一個用於請求外部數據的 XMLHttpRequest 對象。
// $http.get() 從 http://www.w3schools.com/angular/customers.php 讀取 JSON 數據。
// 如果成功， 該控制器會根據來自服務器的 JSON 數據，在 $scope 中創建一個屬性 (names)。


// 向不同的服務器（不同於請求頁）請求數據，稱作跨站 HTTP 請求。
// 跨站請求在網站上很普遍。許多網頁會從不同的服務器加載 CSS，圖片和腳本。
// 在現代瀏覽器中，基於安全原因，從腳本內進行跨站 HTTP 請求是被禁止的。
// 下面的這行代碼，已被加入到我們的 PHP 例子中，以便允許跨站訪問。
header("Access-Control-Allow-Origin: *");


///////////////////////////////////
// AngularJS 表格

// 使用 angular 顯示錶格非常簡單：
<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

// 要排序表格，添加一個 orderBy 過濾器：
<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

// 要顯示錶格索引值，添加一個帶有 $index 的 <td>：
<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

// 使用 $even 和 $odd
<table>
  <tr ng-repeat="x in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
    <td ng-if="$even">{{ x.Name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
    <td ng-if="$even">{{ x.Country }}</td>
  </tr>
</table>

///////////////////////////////////
// AngularJS HTML DOM

//AngularJS 有用於將應用的數據綁定到 HTML DOM 元素屬性的指令。

// ng-disabled 指令將 AngularJS 應用的數據綁定到 HTML 元素的 disabled 屬性上。

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>

</div>

//應用解析：

// ng-disabled 指令將應用的 mySwitch 數據綁定到 HTML 按鈕的 disabled 屬性上。
// ng-model 指令將 HTML checkbox 元素的值綁定到 mySwitch 的值上。
// 如果 mySwitch 的值求值為 true，則該按鈕將被禁用：
<p>
<button disabled>Click Me!</button>
</p>

// 如果 mySwitch 的值求值為 false，則該按鈕將不會被禁用：
<p>
  <button>Click Me!</button>
</p>

// ng-show 指令顯示或隱藏一個 HTML 元素。

<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>

// ng-show 指令基於 ng-show 的值顯示（或隱藏）一個 HTML 元素。
// 你可以使用任何能求值成 true 或 false 的表達式：
<div ng-app="">
<p ng-show="hour > 12">I am visible.</p>
</div>

///////////////////////////////////
// AngularJS 事件

// AngularJS 有它自己的 HTML 事件指令。

// ng-click 指令定義一個 AngularJS 點擊事件。
<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>

// ng-hide 指令可用於設置一個應用的部分區域的可見性。
// 值 ng-hide="true" 使得一個 HTML 元素不可見。
// 值 ng-hide="false" 使得一個 HTML 元素可見。
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-hide="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

//應用解析：

// personController 的第一部分和講述控制器章節中的一樣。
// 該應用有一個默認屬性（一個變量）：$scope.myVar = false：
// ng-hide 指令依據 myVar 的值（true 或 false），
// 設置 <p> 元素的可見性，該元素含有兩個輸入框。
// 函數 toggle() 將 myVar 在 true 和 false 間進行切換。
// 值 ng-hide="true" 使得該元素不可見。


// ng-show 指令也能用來設置一個應用的某部分的可見性。
// 值 ng-show="false" 使得一個 HTML 元素不可見。
// 值 ng-show="true" 使得一個 HTML 元素可見。
// 這個例子與上面的一樣，但用 ng-show 替代了 ng-hide：
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-show="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

///////////////////////////////////
// AngularJS 模塊

// 一個 AngularJS 模塊定義一個應用。
// 模塊是一個應用的不同部分所在的一個容器。
// 模塊是應用控制器的一個容器。
// 控制器總是隸屬於一個模塊。

// 這個應用 ("myApp") 有一個控制器 ("myCtrl")：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

// 在 AngularJS 應用中通常將模塊和控制器放置在 JavaScript 文件中。
// 在本例中，"myApp.js" 包含了一個應用模塊的定義，而 "myCtrl.js" 包含了控制器：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

//myApp.js
var app = angular.module("myApp", []); 

// 模塊定義中的 [] 參數可用來定義依賴的模塊。

// myCtrl.js
app.controller("myCtrl", function($scope) {
    $scope.firstName  = "John";
    $scope.lastName= "Doe";
});

// JavaScript 中應該避免使用全局函數。它們會非常容易地被覆蓋
// 或被其它腳本破壞。

// AngularJS 腳本通過將所有函數保存在模塊內，緩解了這種問題。

// 雖然 HTML 應用中通常是將腳本放置在
// <body> 元素的末尾，但還是推薦你要麼在
// <head> 中要麼在 <body> 的開頭處加載 AngularJS 庫。

// 這是因為對 angular.module 的調用只有在庫被加載後才能被編譯。

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>


///////////////////////////////////
// AngularJS 應用

// AngularJS 模塊定義 AngularJS 應用。
// AngularJS 控制器控制 AngularJS 應用。
// ng-app 指令定義該應用，ng-controller 定義該控制器。
<div ng-app="myApp" ng-controller="myCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{firstName + " " + lastName}}
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
      $scope.firstName= "John";
      $scope.lastName= "Doe";
  });
</script>

// AngularJS 模塊定義應用：
var app = angular.module('myApp', []);

// AngularJS 控制器控制應用：
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
來源 & 參考

例子
http://www.w3schools.com/angu...
參考
http://www.w3schools.com/angu...
http://www.w3schools.com/angu...
有建議？或者發現什麼錯誤？在Github上開一個 issue ，或者發起 pull request ！
小X學技術 Blog

@xiaoxxuejishu

Tags

前端 (1158)

Javascript (735)

Python (289)

教程 (207)

HTML (113)

Css (108)

angularjs (21)

python2.7 (13)

python2.x (2)

入門 (1)

Stories

Y 分鐘速成 AngularJS - Stories Detail

AngularJS 教程

你應該已經瞭解了的知識

來源 & 參考

Add a new Comments
