是时候创建一个真正的AngularJS单页面应用程序了（SPA）。
一个AngularJS应用程序示例
你已经了解了足够多的内容来创建第一个AngularJS应用程序：
My Note
Number of characters left: 100
程序代码即解释
<html ng-app="myNoteApp"><script src='/images/loading.gif' data-original="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><div ng-controller="myNoteCtrl"><h2>My Note</h2><p><textarea ng-model="message" cols="40" rows="10"></textarea></p><p><button ng-click="save()">Save</button><button ng-click="clear()">Clear</button></p><p>Number of characters left: <span ng-bind="left()"></span></p></div><script src='/images/loading.gif' data-original="myNoteApp.js"></script><script src='/images/loading.gif' data-original="myNoteCtrl.js"></script></body></html>
运行
application文件"myNoteApp.js"代码：
var app = angular.module("myNoteApp", []); controller文件"myNoteCtrl.js"代码：
app.controller("myNoteCtrl", function($scope) { $scope.message = ""; $scope.left = function() {return 100 - $scope.message.length;}; $scope.clear = function() {$scope.message = "";}; $scope.save = function() {alert("Note Saved");};}); 元素<html>被指定为AngularJS application的容器：ng-app="myNoteApp"：
<html ng-app="myNoteApp">
页面中的<div>元素指定了控制器的作用域：ng-controller="myNoteCtrl"：
<div ng-controller="myNoteCtrl">
ng-model指令将<textarea>元素绑定到控制器的message变量中：
<textarea ng-model="message" cols="40" rows="10"></textarea>
两个ng-click事件分别调用了控制器中的clear()函数和save()函数：
<button ng-click="save()">Save</button><button ng-click="clear()">Clear</button>
ng-bind指令将控制器的left()函数绑定到<span>元素上，用以显示剩余可以输入的字符数：
Number of characters left: <span ng-bind="left()"></span>
application libraries被添加到页面上（在AngularJS类库引用之后）：
<script src='/images/loading.gif' data-original="myNoteApp.js"></script><script src='/images/loading.gif' data-original="myNoteCtrl.js"></script>
AngularJS应用程序框架
通过上面的示例，你已经拥有了一个真正的AngularJS应用程序框架（或者称之为脚手架），它是一个单页面应用程序（SPA）。
ng-app指令所在的HTML元素被定义为AngularJS应用程序的容器。
指令ng-controller所在的元素定义了AngularJS应用程序控制器的作用域。
在一个应用程序中你可以拥有多个控制器。
一个application文件（例如my...App.js）定义了一个application模块的代码。
一个或多个控制器文件（例如my...Ctrl.js）定义了控制器的代码。
它是如何工作的？
ng-app指令被放在application的根元素上。
对单页面应用程序（SPA）而言，application的根元素即<html>元素。
一个或多个ng-controller指令定义了application中不同的控制器。每一个控制器都有它自己的作用域：即包含该指令定义的HTML元素。
当HTML的DOMContentLoaded事件被执行时AngularJS会被自动调用。如果找到ng-app指令，AngularJS将会加载所有以指令命名的模块，并对以ng-app定义的application的根元素内的DOM进行编译。
application的根可以是整个页面，也可以是页面中的一小部分。AngularJS application定义的部分越小，application编译和执行的速度越快。
上一章 - AngularJS快速入门指南17：Includes
下一章 - AngularJS快速入门指南19：示例代码
原标题：AngularJS快速入门指南18：Application
关键词：JS
我知道了 