AngularJS 應用

上一頁： AngularJS模塊

下一頁： AngularJS實例

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

AngularJS 應用實例

您已經學習了足夠多關於AngularJS 的知識，現在可以開始創建您的第一個AngularJS 應用程序：

我的筆記

剩餘字數:100

應用程序講解

AngularJS 實例

< html ng-app= "myNoteApp" >
< head >
< meta charset = "utf-8" >
< script src= "http://apps.bdimg.com/libs/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 "的容器:

< html ng-app= "myNoteApp" >

<div>是HTML頁面中控制器: 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 >

應用庫文件需要在AngularJs 加載後才能執行：

< script src= "myNoteApp.js" > < /script >
< script src= "myNoteCtrl.js" > < /script >