開啟AngularJS 1.X的學習之路（1）

概念(1)

---

AngularJS 應用

• AngularJS 模塊（Module） 定義了 AngularJS 應用。
• AngularJS 控制器（Controller） 用于控制 AngularJS 應用。
• ng-app指令定義了應用, ng-controller 定義了控制器。

eg:

<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{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', []);

• 可以通過angular.module()方法操作模塊
• 注意：該方法只有在傳入兩個參數時才會創建模塊，否則為獲取已有模塊!獲取模塊var app = angular.module('myApp')

AngularJS 控制器

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

• AngularJS 應用程序被控制器控制。
• ng-controller 指令定義了應用程序控制器。
• 控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數創建。

應用解析：

AngularJS 應用程序由 ng-app 定義。應用程序在div內運行。

ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用于定義一個控制器。

myCtrl 函數是一個 JavaScript 函數。

AngularJS 使用$scope 對象來調用控制器。

在 AngularJS 中， $scope 是一個應用對象(屬于應用變量和函數)。

控制器的 $scope （相當于作用域、控制范圍）用來保存AngularJS Model(模型)的對象。

控制器在作用域中創建了兩個屬性 (firstName 和 lastName)。

ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）

AngularJS 指令

• AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
• ng-app 指令初始化一個 AngularJS 應用程序。
• ng-init 指令初始化應用程序數據。
• ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。

完整的指令內容可以參閱 AngularJS 參考手冊。