AngularJS 應用

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

AngularJS 應用程式實例

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

應用程式講解

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">

<h2>我的笔记</h2>


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

<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>

<p>剩余字数: <span ng-bind="left()"></span></p>

<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" 的作用域:

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

兩個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>