標籤：
是時候建立一個真正的AngularJS單頁面應用程式了（SPA）。
一個AngularJS應用程式樣本你已經瞭解了足夠多的內容來建立第一個AngularJS應用程式：
My NoteNumber of characters left: 100
程式碼即解釋<html ng-app="myNoteApp"><script src="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="myNoteApp.js"></script><script src="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="myNoteApp.js"></script><script src="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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
