开启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 参考手册。