上一篇：AngularJS 路由下一篇：AngularJS 實例

AngularJS 應用

你可以通過本章節(jié)的 AngularJS 應用程序來熟悉 AngularJS 的使用。

現(xiàn)在是時候創(chuàng)建一個真正的 AngularJS 單頁 Web 應用（single page web application，SPA）了。

AngularJS 應用實例

您已經(jīng)學習了足夠多關于 AngularJS 的知識，現(xiàn)在可以開始創(chuàng)建您的第一個 AngularJS 應用程序：

我的筆記

剩余字數(shù): 100

應用程序講解

AngularJS 實例

<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-controller="myNoteCtrl">

<h2>我的筆記</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">保存</button>
<button ng-click="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>

運行代碼 ?

應用程序文件 "myNoteApp.js":

var app = angular.module("myNoteApp", []);

控制器文件 "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 應用: ng-app="myNoteApp" 的容器:

<div> 是 HTML 頁面中控制器: ng-controller="myNoteCtrl" 的作用域:

ng-model 指令綁定了 <textarea> 到控制器變量 message:

兩個 ng-click 事件調用了控制器函數(shù) clear() 和 save():

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

ng-bind 指令綁定控制器函數(shù) left() 到<span> ，用于顯示剩余字符:

Number of characters left: <span ng-bind="left()"></span>

應用庫文件需要在 AngularJs 加載后才能執(zhí)行：