AngularJS是一個開源Web應用程序框架。它最初是由Misko Hevery和Adam Abrons開發于2009年?，F在是由谷歌維護。
AngularJS的定義，它的官方文檔介紹如下：
AngularJS是動態的Web應用程序結構框架。它可以讓你使用HTML作為模板語言，擴展HTML的語法清晰，簡潔地表達應用程序的組件。Angular分明的數據綁定和依賴注入必須編寫代碼。而這一切都在瀏覽器內發生，這使得它與任何服務器技術的理想合作伙伴。特點
AngularJS是一個功能強大的基于Javascript開發框架來創建富互聯網應用（RIA）。
AngulajJS為開發者提供選項來編寫客戶端應用程序（使用JavaScript）在一個干凈的MVC（模型 - 視圖 - 控制器）的方式。
AngularJS應用是跨瀏覽器兼容的。自動AngularJS處理適用于每個瀏覽器的javascript代碼。
AngularJS是開源的，完全免費的，并且由數千名世界各地的開發。它是根據Apache許可證2.0版許可。
總體而言，AngularJS是一個框架可以用來構建大規模，高性能的網絡應用，同時也易于維護。
核心功能
以下是AngularJS的最重要的核心的功能：
數據綁定：它是模型和視圖組件之間的數據的自動同步。
適用范圍：這些是指模型對象。充當控制器和視圖之間的膠水。
控制器：這些是綁定到特定范圍的Javascript函數。
服務：AngularJS配有多個內置的服務，例如$http提供xmlHttPRequest。這些是在應用程序實例化一次的單一對象。
過濾器：這些從數組項目中選擇一個子集，并返回一個新的數組。
指令：指令是關于DOM元素標記（如元素，屬性，CSS等等）。這些可以被用來創建作為新的自定義窗口小部件自定義的HTML標簽。 AngularJS有內置的指令（ngBind，ngModel...）
模板：這些都與控制器和模型信息呈現的視圖。這些可以使用“諧音”的單個文件（如index.html），或在一個頁面上的多個視圖。
路由：它是切換視圖的概念。
模型 - 視圖 ：MVC是一個設計模式將應用劃分為不同的部分（稱為模型，視圖和控制器），每一個具有不同的責任。 AngularJS沒有傳統意義上的MVC實現，而是更接近于MVVM（模型 - 視圖 - 視圖模型）。AngularJS團隊讓它作為模型視圖而不管。
深層鏈接：深層鏈接能夠使其可書簽應用程序的狀態進行編碼的URL。應用程序可以從該URL為相同的狀態恢復。
依賴注入： AngularJS有一個內置的依賴注入子系統，通過使應用程序幫助開發人員更易于開發，理解和測試。
概念
下圖描繪了AngularJS，我們將詳細在隨后的章節討論的一些重要部分。
AngularJS的優點
AngularJS提供在一個非常干凈和維護方式來創建單頁的應用。
AngularJS提供了數據綁定功能為HTML從而給用戶提供豐富而敏感的體驗
AngularJS代碼可單元測試。
AngularJS使用依賴注入和運用關注點分離。
AngularJS提供了可重用的組件。
AngularJS能為開發人員編寫更少的代碼，并獲得更多的功能。
在AngularJS，視圖都是純HTML頁面，并用JavaScript編寫控制器完成業務處理。
AngularJS應用程序可以在所有主要瀏覽器和智能手機，包括Android和iOS系統的手機/平板電腦上運行。
AngulaJS的缺點
雖然AngularJS帶有許多加分，但是我們應該考慮以下幾點：
不安全：JavaScript只有框架編寫的應用程序在AngularJS是不安全的。服務器端的認證和授權是必須的，以保持應用程序的安全。
不可降解：如果應用程序的用戶禁用JavaScript的話用戶將只能看到基本的頁面，僅此而已。
AngularJS組件
AngularJS框架可分為以下三個主要部分組成：
ng-app : 該指令規定，并鏈接一個AngularJS應用程序的HTML。
ng-model : 該指令結合AngularJS應用數據的值到HTML的輸入控件。
ng-bind : 該指令子帶AngularJS應用數據的HTML標簽。
AngularJS環境設置
在本章中，我們將討論如何建立AngularJS庫在Web應用程序開發中使用。我們還將簡要地學習目錄結構和它的內容。
打開鏈接https://angularjs.org/(打不開可能需要翻墻)，會看到有兩個下載AngularJS庫的選項：
View on GitHub- 單擊此按鈕跳到GitHub，并獲得所有最新的腳本。
Download- 或者點擊此按鈕，會看到屏幕如下：
此屏幕給出了使用AngularJS如下多種選擇：
Downloading and hosting files locally
有兩種不同的選擇：舊版和最新版。舊版是版本低于1.2.x版本，最新是1.3.x版本。
我們也可以使用縮小，非壓縮或壓縮版本。
CDN access: 也可以使用一個CDN。CDN全世界可訪問，它放在谷歌主機區域性數據中心。 這也提供了一個優點，即如果訪問者的網頁已經從相同的CDN 下載了AngularJS的副本，它不必再重新下載。
在本教程中我們使用的是CDN版本庫示例
現在讓我們使用AngularJS庫編寫一個簡單的例子。讓我們創建一個HTML文件 first-angular.html 如下：
<!doctype html><html> <head> <script src="https://Ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <title>第一個AngularJS程序</title> </head> <body ng-app="myapp"> <div ng-controller="HelloController" > <h2>你好 ！第一個{{helloTo.title}}程序示例</h2> </div> <script> angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; }); </script> </body></html>下面的章節詳細描述上面的代碼：
包括AngularJS
我們已經包括了AngularJS的JavaScript文件到HTML頁面中，所以我們可以用AngularJS：
<head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script></head>在其官方網站檢查AngularJS的最新版本。
指向AngularJS應用程序
接下來我們指示HTML的哪一部分包含了AngularJS應用程序。這可以通過ng-app屬性到AngularJS應用程序的根HTML元素。可以把它添加到HTML元素或body元素，如下所示：
<body ng-app="myapp"></body>視圖
這是視圖的一部分：
<div ng-controller="HelloController" > <h2>Welcome {{helloTo.title}} to the world of Yiibai tutorials!</h2></div>ng-controller 告訴AngularJS什么控制器使用在視圖中。helloTo.title告訴AngularJS將命名helloTo.title的值寫入到HTML的“model”中。
控制器
這里是控制器部分：
<script> angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; });</script>此代碼注冊一個名為HelloController的控制器功能，在myapp模塊。 我們將學習更多關于它們在各自的模塊和控制器章節?？刂破骱瘮底栽贏ngular中，通過angular.module(...).controller(...) 的函數來調用。
傳遞給控制器函數的$scope參數是模型?？刂破骱瘮翟黾恿薶elloTo的 JavaScript對象，并在該對象它增加了一個標題字段。
執行
將以上代碼保存為 first-angular.html ，并在瀏覽器中打開它。會看到如下的輸出：
當頁面在瀏覽器中加載，輸出下面的結果：
HTML文檔加載到瀏覽器，并且由瀏覽器進行評估計算。AngularJS JavaScript文件被加載，Angular 全局對象被創建。接下來，JavaScript一個注冊控制器的函數被執行。
接下來AngularJS通過HTML掃描，以尋找AngularJS應用程序和視圖。當視圖的定位后，它連接視圖到對應的控制器函數。
接下來，AngularJS執行控制器函數。然后，它呈現通過控制器模型數據來自填充的視圖。此時網頁已準備就緒。
AngularJS MVC 架構
模型視圖控制器(Model View Controller)或MVC，因為它是俗稱，是一種Web應用程序開發設計模式。
模型-視圖-控制器模式由以下三部分組成：
Model - 是一個最低水平負責維護數據的模式。
View - 這是負責顯示所有或一部分的數據到用戶。
Controller - 軟件代碼控制模型和視圖之間的相互作用。
MVC是很流行的，因為它從用戶界面層和支持分離關注隔離了應用邏輯。在這里，控制器接收應用程序的所有請求，然后使用Model，以準備視圖需要的數據。然后視圖使用控制器準備的數據，以產生一個最終的像樣響應的數據輸出。 MVC的抽象圖形可以表示如下。
模型
模型負責管理應用程序的數據。它響應從視圖請求，同時也從控制器響應指令到自我更新。
視圖
在一個特定的格式的呈現數據，由控制器決定呈現數據觸發。 它們都是基于腳本的模板系統，如jsp，asp，php也很容易使用AJAX技術來集成。
控制器
控制器負責響應于用戶輸入并執行交互數據模型對象?？刂破鹘邮蛰斎耄Ⅱ炞C輸入，然后執行修改數據模型的業務操作的狀態。
AngularJS是一個基于MVC的框架。在接下來的章節中，讓我們看看AngularJS如何使用MVC方法論。
AngularJS 表達式
表達式用于應用程序綁定數據到HTML。表達式編寫在雙括號就如：{{ expression}}. 表達式中的行為方式與 ng-bind 指令相同。AngularJS應用表達式是純JavaScript表達式和輸出正在使用的數據。
使用數字
<p>Expense on Books : {{cost * quantity}} Rs</p>使用字符串
<p>Hello {{student.firstname + " " + student.lastname}}!</p>使用對象
<p>Roll No: {{student.rollno}}</p>使用數組
<p>Marks(Math): {{marks[3]}}</p>示例
下面的例子將展示上述所有表達式。
sampleAngularJS.html<html><title>AngularJS 表達式</title><body><h1>Sample application</h1><div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'李',lastname:'剛',rollno:101};marks=[82,91,78,77,64]"> <p>Hello {{student.firstname + " " + student.lastname}}!</p> <p>Expense on Books : {{cost * quantity}} Rs</p> <p>Roll No: {{student.rollno}}</p> <p>Marks(Math): {{marks[3]}}</p></div><script src="http://www.yiibai.com/js/angular.min.js"></script></body></html>輸出結果
在瀏覽器中打開：sampleAngularJS.html， 看到結果如下：
AngularJS 控制器
AngularJS應用主要依賴于控制器來控制數據流在應用程序中.控制器使用 ng-controller 指令定義?？刂破魇且粋€包含屬性/屬性和函數的JavaScript對象。每個控制器接受$scope作為參數引用到應用程序/模塊，由控制器來控制。
<div ng-app="" ng-controller="studentController">...</div>在這里，我們采用 ng-controller 指令聲明控制器studentController。作為下一個步驟，我們將定義 studentController 如下：
<script>function studentController($scope) { $scope.student = { firstName: "李", lastName: "四", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } };}</script>studentController定義一個以 $scope 作為參數的JavaScript對象。
$scope表示應用程序，它使用studentController對象。
$ scope.student是studentController對象的屬性。
firstName 和 lastName 是 $scope.student 對象的兩個屬性。我們已經為它們設置了缺省值。
fullName是 $scope.student 對象的函數，其任務是返回合并后的名字。
在fullName函數中我們得到了 student 對象，然后返回合并后的名字。
我們還可以定義控制器對象在單獨的JS文件，并參考(引入)該文件在HTML頁面。
現在，我們可以在studentController使用ng-model或表達式來獲取學生的屬性。
Enter first name: <input type="text" ng-model="student.firstName"><br>Enter last name: <input type="text" ng-model="student.lastName"><br><br>You are entering: {{student.fullName()}}綁定 student.firstName 和 student.lastname 兩個輸入框。
綁定student.fileName()到HTML。
現在，只要輸入名字和姓氏在輸入框中，可以看到全名(fullname)自動更新。
示例
下面的例子將展示控制器的使用。
testAngularJS.html<html><head><title>Angular JS Controller</title><script src="http://www.yiibai.com/js/angular.min.js"></script></head><body><h2>AngularJS應用示例</h2><div ng-app="mainApp" ng-controller="studentController">Enter first name: <input type="text" ng-model="student.firstName"><br><br>Enter last name: <input type="text" ng-model="student.lastName"><br><br>您輸入的名字是: {{student.fullName()}}</div><script>var mainApp = angular.module("mainApp", []);mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "李", lastName: "剛", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } };});</script></body></html>輸出
在瀏覽器中打開：textAngularJS.html ，將看以下的結果：
AngularJS 過濾器
過濾器用來改變修改的數據，并可以在表達式或使用管道字符指令來過濾。以下是常用的過濾器的列表。
S.No. 名稱 描述 1 uppercase 轉換文本為大寫文字。 2 lowercase 轉換文本為小寫文字。 3 currency 以貨幣格式格式化文本。 4 filter 過濾數組到根據提供標準的一個子集。 5 orderby 排序基于提供標準的數組。 大寫過濾器
添加大寫字母過濾器使用管道符表達式。在這里，我們添加大寫過濾器中的所有字母為大寫，并打印學生的名字。
Enter first name:<input type="text" ng-model="student.firstName">Enter last name: <input type="text" ng-model="student.lastName">Name in Upper Case: {{student.fullName() | uppercase}}小寫過濾器
添加小寫過濾器使用管道符表達式。在這里，我們添加小寫過濾器全部以小寫字母打印學生的名字。
Enter first name:<input type="text" ng-model="student.firstName">Enter last name: <input type="text" ng-model="student.lastName">Name in Upper Case: {{student.fullName() | lowercase}}貨幣過濾器
添加貨幣過濾器使用管道符返回數的表達式。在這里，我們添加貨幣過濾器使用貨幣格式的打印費用。
Enter fees: <input type="text" ng-model="student.fees">fees: {{student.fees | currency}}過濾過濾器
若要僅顯示必修科目，我們使用subjectName作為過濾器。
Enter subject: <input type="text" ng-model="subjectName">Subject:<ul> <li ng-repeat="subject in student.subjects | filter: subjectName"> {{ subject.name + ', marks:' + subject.marks }} </li></ul>排序過濾器
由標記來排序科目，我們使用的OrderBy標記。
Subject:<ul> <li ng-repeat="subject in student.subjects | orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li></ul>示例
下面的例子將展示上述所有過濾器。
testAngularJS.html<html><head><title>Angular JS Filters</title><script src="http://www.yiibai.com/js/angular.min.js"></script></head><body><h2>AngularJS過濾器應用示例</h2><div ng-app="mainApp" ng-controller="studentController"><table border="0"><tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr><tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr><tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr><tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr></table><br/><table border="0"><tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr><tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr><tr><td>fees: </td><td>{{student.fees | currency}}</td></tr><tr><td>Subject:</td><td><ul> <li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li></ul></td></tr></table></div><script>var mainApp = angular.module("mainApp", []);mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "李", lastName: "Gang", fees:500, subjects:[ {name:'物理',marks:70}, {name:'化學',marks:80}, {name:'數學',marks:65}, {name:'外語', marks:87} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } };});</script></body></html>輸出結果
在瀏覽器中打開：textAngularJS.html，看到結果如下：
AngularJS 表格
表中的數據本質上是通常可重復。 ng-repeat 指令可輕松用于繪制表格。下面的例子是使用 ng-repeat 指令來繪制表格。
<table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr></table>表可以使用CSS樣式設置樣式。
<style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f2f2f2;}table tr:nth-child(even) { background-color: #ffffff;}</style>示例
下面的例子將展示上述所有指令。
testAngularJS.html 文件內容：<html><head><title>AngularJS表格示例</title><script src="http://www.yiibai.com/js/angular.min.js"></script><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f2f2f2;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><h2>AngularJS 表格應用示例</h2><div ng-app="mainApp" ng-controller="studentController"><table border="0"><tr><td>姓:</td><td><input type="text" ng-model="student.firstName"></td></tr><tr><td>名: </td><td><input type="text" ng-model="student.lastName"></td></tr><tr><td>名字: </td><td>{{student.fullName()}}</td></tr><tr><td>科目:</td><td><table> <tr> <th>名字</th> <th>標記</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr></table></td></tr></table></div><script>var mainApp = angular.module("mainApp", []);mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "周", lastName: "杰倫", fees:500, subjects:[ {name:'物理',marks:73}, {name:'化學',marks:90}, {name:'數學',marks:68}, {name:'英文',marks:85}, {name:'生物',marks:77} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } };});</script></body></html>輸出結果
在瀏覽器中打開：textAngularJS.html ，看到結果如下：
AngularJS HTML DOM
下面的指令可用于綁定應用程序數據到HTML DOM元素的屬性。
S.No. 名稱 描述 1 ng-disabled 禁用給定的控制 2 ng-show 顯示了一個給定的控制 3 ng-hide 隱藏一個給定的控制 4 ng-click 表示一個AngularJS click事件 ng-disabled 指令
添加ng-disabled屬性到一個HTML按鈕，并把它傳遞模型。綁定模型到復選框，來看看變化。
<input type="checkbox" ng-model="enableDisableButton">Disable Button<button ng-disabled="enableDisableButton">Click Me!</button>ng-show 指令
添加 ng-show 屬性到HTML按鈕，并把它傳遞到模型。該模型綁定復選框。
<input type="checkbox" ng-model="showHide1">Show Button<button ng-show="showHide1">Click Me!</button>ng-hide 指令
添加 ng-hide 屬性到HTML按鈕，并把它傳遞模型。該模型綁定復選框。
<input type="checkbox" ng-model="showHide2">Hide Button<button ng-hide="showHide2">Click Me!</button>ng-click 指令
添加ng-click屬性到一個HTML按鈕，更新模型。綁定模型到HTML如下所示。
<p>Total click: {{ clickCounter }}</p></td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button>示例
下面的例子將展示上述所有指令。
testAngularJS.html<html><head><title>AngularJS HTML DOM 示例</title></head><body><h2>AngularJS HTML DOM 應用示例</h2><div ng-app=""><table border="0"><tr> <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td> <td><button ng-disabled="enableDisableButton">點擊我!</button></td></tr><tr> <td><input type="checkbox" ng-model="showHide1">顯示按鈕</td> <td><button ng-show="showHide1">Click Me!</button></td></tr><tr> <td><input type="checkbox" ng-model="showHide2">隱藏按鈕</td> <td><button ng-hide="showHide2">Click Me!</button></td></tr><tr> <td><p>Total click: {{ clickCounter }}</p></td> <td><button ng-click="clickCounter = clickCounter + 1">點擊我!</button></td></tr></table></div><script src="http://www.yiibai.com/js/angular.min.js"></script></body></html>輸出結果
在瀏覽器中打開：textAngularJS.html ，看到結果如下：
AngularJS 模塊
AngularJS支持模塊化方法。模塊用于單獨的邏輯表示服務，控制器，應用程序等。為保持代碼簡潔，我們在單獨的 js 文件中定義模塊，并將其命名為 module.js文件。 在這個例子中，我們要創建兩個模塊。
應用模塊 - 控制器用于初始化應用程序。
控制器模塊 - 用于定義控制器。
應用模塊
mainApp.jsvar mainApp = angular.module("mainApp", []);在這里，我們聲明了使用 angular.module 函數的應用程序mainApp模塊。我們已經傳遞一個空數組給它。這個數組通常包含依賴模塊。
控制器模塊
studentController.jsmainApp.controller("studentController", function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Hindi',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } };});在這里，我們聲明了使用 mainApp.controller 函數的一個控制器 studentController 模塊。
使用模塊
<div ng-app="mainApp" ng-controller="studentController">..<script src="mainApp.js"></script><script src="studentController.js"></script>這里我們使用 ng-app 指令和控制器使用 ng-controller 指令的應用模塊。我們已經在主HTML頁面導入 mainApp.js 和 studentController.js。
實例
下面的例子將展示上述所有模塊。
testAngularJS.html<html><head><title>Angular JS 模塊實例</title><script src="http://www.yiibai.com/js/angular.min.js"></script><script src="mainApp.js"></script><script src="studentController.js"></script><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f2f2f2;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><h2>AngularJS 模塊應用實例</h2><div ng-app="mainApp" ng-controller="studentController"><table border="0"><tr><td>姓:</td><td><input type="text" ng-model="student.firstName"></td></tr><tr><td>名: </td><td><input type="text" ng-model="student.lastName"></td></tr><tr><td>姓名: </td><td>{{student.fullName()}}</td></tr><tr><td>科目:</td><td><table> <tr> <th>名字</th> <th>標記</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr></table></td></tr></table></div></body></html>mainApp.jsvar mainApp = angular.module("mainApp", []);studentController.jsmainApp.controller("studentController", function($scope) { $scope.student = { firstName: "周", lastName: "杰倫", fees:500, subjects:[ {name:'物理',marks:78}, {name:'化學',marks:82}, {name:'語文',marks:68}, {name:'外語',marks:79}, {name:'Java',marks:87} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } };});輸出結果
在瀏覽器中打開 textAngularJS.html; 看到的結果如下所示：
AngularJS表單
AngularJS豐富表格填寫和驗證。 我們可以用ng-click來處理AngularJS點擊按鈕，使用$dirty和$invalid 來做驗證。使用 novalidate 以及表單來聲明禁止瀏覽器做特定的驗證。表單控件大量使用Angular事件。讓我們首先快速瀏覽一下事件。
事件
AngularJS提供可與HTML控件相關聯的多個事件。例如ng-click通常與按鈕相關聯。下面是支持Angular JS事件。
ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouSEOver
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-click
表格的復位數據上使用 on-click 指令。
<input name="firstname" type="text" ng-model="firstName" required><input name="lastname" type="text" ng-model="lastName" required><input name="email" type="email" ng-model="email" required><button ng-click="reset()">Reset</button><script> function studentController($scope) { $scope.reset = function(){ $scope.firstName = "Mahesh"; $scope.lastName = "Parashar"; $scope.email = "MaheshParashar@yiibai.com"; } $scope.reset();}</script>驗證數據
以下可用于跟蹤錯誤。
$dirty - 狀態指示值已被改變
$invalid- 指示值的狀態是無效的
$error- 指出確切的錯誤
示例
下面的例子將展示上述所有指令。
testAngularJS.html<html><head><title>AngularJS 表單</title><script src="http://www.yiibai.com/js/angular.min.js"></script><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f2f2f2;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><h2>AngularJS 表單應用示例</h2><div ng-app="mainApp" ng-controller="studentController"><form name="studentForm" novalidate><table border="0"><tr><td>姓氏:</td><td><input name="firstname" type="text" ng-model="firstName" required> <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid"> <span ng-show="studentForm.firstname.$error.required">姓氏不可為空.</span> </span></td></tr><tr><td>名字: </td><td><input name="lastname" type="text" ng-model="lastName" required> <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid"> <span ng-show="studentForm.lastname.$error.required">名字必填.</span> </span></td></tr><tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required><span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid"> <span ng-show="studentForm.email.$error.required">Email 必填.</span> <span ng-show="studentForm.email.$error.email">無效的Email地址.</span> </span></td></tr><tr><td><button ng-click="reset()">重置</button></td><td><button ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid || studentForm.lastname.$dirty && studentForm.lastname.$invalid || studentForm.email.$dirty && studentForm.email.$invalid" ng-click="submit()">提交</button></td></tr></table></form></div><script>var mainApp = angular.module("mainApp", []);mainApp.controller('studentController', function($scope) { $scope.reset = function(){ $scope.firstName = "Zhuo"; $scope.lastName = "Jar"; $scope.email = "yiibai.com@Gmail.com"; } $scope.reset();});</script></body></html>輸出結果
在瀏覽器中打開 textAngularJS.html?？吹浇Y果結果如下：
AngularJS Includes
HTML不支持HTML頁面嵌入到HTML頁面。為了實現這一函數通過以下方式被使用：
使用Ajax - 使服務器調用來獲取相應的HTML頁面，并將其設置在HTML控制的innerHTML。
使用服務器端包含 - JSP，PHP和其他Web端服務器技術可以包括HTML頁面在動態頁面內。
使用AngularJS，我們可以用ng-include 指令使嵌入一個HTML頁面在HTML頁面中。
<div ng-app="" ng-controller="studentController"> <div ng-include="'main.htm'"></div> <div ng-include="'subjects.htm'"></div></div>實例
tryAngularJS.html<html><head><title>Angular JS Includes 示例</title><script src="http://www.yiibai.com/js/angular.min.js"></script><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f2f2f2;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><h2>AngularJS Include示例</h2><div ng-app="mainApp" ng-controller="studentController"><div ng-include="'main.html'"></div><div ng-include="'subjects.html'"></div></div><script>var mainApp = angular.module("mainApp", []);mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "周", lastName: "杰倫", fees:500, subjects:[ {name:'物理',marks:78}, {name:'化學',marks:82}, {name:'語文',marks:68}, {name:'外語',marks:79}, {name:'Java',marks:87} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } };});</script></body></html>main.html<table border="0"> <tr><td>姓氏:</td><td><input type="text" ng-model="student.firstName"></td></tr> <tr><td>名字: </td><td><input type="text" ng-model="student.lastName"></td></tr> <tr><td>全名: </td><td>{{student.fullName()}}</td></tr></table>subjects.html<p>科目:</p><table> <tr> <th>名字</th> <th>標記</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr></table>輸出結果
要運行這個例子，需要部署textAngularJS.html，main.html 和 subjects.html 到Web服務器。使用 URL 訪問服務器并在 Web 瀏覽器中打開 textAngularJS.html?？吹浇Y果如下：
AngularJS Ajax
AngularJS提供 $http 控制，可以作為一種服務從服務器讀取數據。服務器可以建立數據庫調用來獲取記錄。AngularJS需要JSON格式的數據。一旦數據準備好，$http可以用以下面的方式從服務器得到數據。
function studentController($scope,$http) {var url="data.txt"; $http.get(url).success( function(response) { $scope.students = response; });}在這里，data.txt中包含了學生記錄。$http服務使 Ajax 調用并設置響應到學生的屬性。 "students" 模型可以用于繪制 HTML 表格。
示例
data.txt[{"Name" : "周杰倫","RollNo" : 104,"Percentage" : "80%"},{"Name" : "陳小春","RollNo" : 231,"Percentage" : "71%"},{"Name" : "張學友","RollNo" : 391,"Percentage" : "75%"},{"Name" : "鄧紫祺","RollNo" : 451,"Percentage" : "77%"}]testAngularJS.html<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Angular JS Includes示例</title><script src="http://www.yiibai.com/js/angular.min.js"></script><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f2f2f2;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><h2>AngularJS 應用示例</h2><div ng-app="mainApp" ng-controller="studentController"><table> <tr> <th>名字</th> <th>號碼</th> <th>百分比</th> </tr> <tr ng-repeat="student in students"> <td>{{ student.Name }}</td> <td>{{ student.RollNo }}</td> <td>{{ student.Percentage }}</td> </tr></table></div><script>var mainApp = angular.module("mainApp", []);mainApp.controller('studentController', function($scope, $http) { var url="data.txt"; $http.get(url).success( function(response) { $scope.students = response; });});</script></body></html>輸出結果
要運行這個例子，需要部署 textAngularJS.html，data.txt 到 Web 服務器。在服務器使用 URL 在Web瀏覽器中打開textAngularJS.html?？吹浇Y果如下：
AngularJS 視圖
AngularJS支持通過單個頁面上的多個視圖單頁應用。要做到這一點AngularJS提供了ng-view 、 ng-template 指令和 $routeProvider 服務。
ng-view
NG-view標記簡單地創建一個占位符，其中一個相應的視圖(HTML或ng-template視圖)，可以根據配置來放置。
使用
定義主模塊使用一個 div 及ng-view。
<div ng-app="mainApp">... <div ng-view></div></div>ng-template
ng-template指令用于創建使用腳本標記的HTML視圖。它包含一個“id”屬性用于由 $routeProvider 映射帶有控制器的視圖。
使用
定義腳本塊類型為 ng-template 的主模塊 。
<div ng-app="mainApp">... <script type="text/ng-template" id="addStudent.htm"> <h2> Add Student </h2> {{message}} </script></div>$routeProvider
$routeProvider是用來設置URL配置的關鍵服務，映射與對應的HTML頁面或ng-template，并附加相同的控制器。
使用
定義腳本塊類型為 ng-template 的主模塊 。
<div ng-app="mainApp">... <script type="text/ng-template" id="addStudent.htm"> <h2> Add Student </h2> {{message}} </script></div>使用
定義腳本塊及主模塊，并設置路由配置。
var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/addStudent', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]);以下是在上面的例子中要考慮的重點。
$ routeProvider定義作為一個函數在mainApp模塊的配置下，使用鍵 '$routeProvider'.
$routeProvider定義URL “/addStudent”，然后映射到“addStudent.htm”。addStudent.htm 存在于相同的路徑的主html頁面。如果HTM網頁沒有定義，那么NG-模板使用id="addStudent.htm"。我們使用ng-template。
"otherwise" 用于設置的默認視圖。
"controller" 用于為視圖設置相應的控制器。
示例
下面的例子將展示上述所有指令。
testAngularJS.html<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Angular JS 視圖</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script></head><body> <h2>AngularJS 視圖應用示例</h2> <div ng-app="mainApp"> <p><a href="#addStudent">添加學生</a></p> <p><a href="#viewStudents">查看學生</a></p> <div ng-view></div> <script type="text/ng-template" id="addStudent.html"> <h2> 添加學生 </h2> {{message}} </script> <script type="text/ng-template" id="viewStudents.html"> <h2> 查看學生 </h2> {{message}} </script> </div> <script> var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/addStudent', { templateUrl: 'addStudent.html', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.html', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]); mainApp.controller('AddStudentController', function($scope) { $scope.message = "這個頁面是用于顯示學生信息的輸入表單"; }); mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "這個頁面是用于顯示所有學生信息"; }); </script></body></html>結果
在瀏覽器中打開 textAngularJS.html 看到結果如下：
AngularJS 作用域
作用域是視圖連接控制器起特殊作用的JavaScript對象。作用域包含模型數據。在控制器，模型數據通過$ scope對象訪問。
<script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; });</script>以下是在上面的例子中要考慮的重點。
$scope被作為第一個參數在其構造器確定指示控制器。
$scope.message 和 $scope.type 在HTML頁面中使用模型。
我們已經設置了模型的值，這將反映在應用模塊，其控制器shapeController中。
也可以在 $scope 內定義函數。
繼承作用域
作用域由控制器指定。如果我們定義嵌套控制器，那么子控制器將繼承其父控制器的作用域范圍。
<script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function($scope) { $scope.message = "In circle controller"; });</script>以下是在上面的例子中要考慮的重點。
我們在shapeController設定模型的值。
我們重載子控制器 circleController 的消息。當模塊的控制器 circleController 中的 “message” 一起使用，將重寫消息。
示例
下面的例子將展示上述所有指令。
testAngularJS.html<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Angular JS 表單</title></head><body> <h2>AngularJS 表單應用示例</h2> <div ng-app="mainApp" ng-controller="shapeController"> <p>{{message}} <br/> {{type}} </p> <div ng-controller="circleController"> <p>{{message}} <br/> {{type}} </p> </div> <div ng-controller="squareController"> <p>{{message}} <br/> {{type}} </p> </div> </div> <script src="http://www.yiibai.com/js/angular.min.js"></script> <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function($scope) { $scope.message = "In circle controller"; }); mainApp.controller("squareController", function($scope) { $scope.message = "In square controller"; $scope.type = "Square"; }); </script></body></html>輸出結果
在瀏覽器中打開 textAngularJS.html 看到結果如下：
AngularJS Services
AngularJS使用服務架構支持“分離 - 關注”的概念。服務(Services)是JavaScript函數，并負責只做一個特定的任務。這使得它們維護和測試單個的實體。控制器，過濾器可以基于請求調用它們。服務注入正常使用AngularJS的依賴注入機制。
AngularJS提供例如，$http, $route, $window, $location等許多內置服務，每個服務負責例如一個特定的任務，$http是用來做AJAX調用來從服務器獲取數據。 $route用來定義路由信息等。內置的服務總是以$符號為前綴。
有兩種方法來創建服務。
factory
service
使用工廠方法
使用工廠方法，我們首先定義一個工廠，然后分配方法給它。
var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; });使用服務方法
使用服務的方法，我們定義了一個服務，然后分配方法給它。 也可以注入已可用的服務給它。
mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});示例
下面的例子將展示上述所有指令。
testAngularJS.html<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Angular JS 服務示例</title> <script src="http://www.yiibai.com/js/angular.min.js"></script></head><body> <h2>AngularJS 服務應用示例</h2> <div ng-app="mainApp" ng-controller="CalcController"> <p>輸入一個數字: <input type="number" ng-model="number" /> <button ng-click="square()">X<sup>2</sup></button> <p>結果: {{result}}</p> </div> <script> var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService) { $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script></body></html>結果
在瀏覽器中打開 textAngularJS.html 看到結果如下：
AngularJS依賴注入
依賴注入是部件賦予的，不是硬組件內的編碼的依賴設計模式。這從定位減輕組件的依賴，使依賴可配置。這有助于使組件可重復使用，維護和測試。
AngularJS提供了一個至高無上的依賴注入機制。它提供了一種可被注入彼此作為依賴以下核心組件。
值 - value
工廠 - factory
服務 - service
提供者 - provider
常量 - constant
值
值是簡單的JavaScript對象，并用它在配置階段傳遞值到控制器。
//define a modulevar mainApp = angular.module("mainApp", []);//create a value object as "defaultInput" and pass it a data.mainApp.value("defaultInput", 5);...//inject the value in the controller using its name "defaultInput"mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); }});工廠
工廠是一個函數用于返回結果值。它根據需要創建一個值，當一個服務或控制器需要時。它通常使用一個工廠函數來計算和返回結果值
//define a modulevar mainApp = angular.module("mainApp", []);//create a factory "MathService" which provides a method multiply to return multiplication of two numbersmainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory;}); //inject the factory "MathService" in a service to utilize the multiply method of factory.mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});...服務
服務是一個單獨的JavaScript包含了一組函數對象來執行某些任務。服務正在使用 service() 函數，然后注射到控制器中。
//define a modulevar mainApp = angular.module("mainApp", []);...//create a service which defines a method square to return square of a number.mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});//inject the service "CalcService" into the controllermainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); }});提供者
提供者使用AngularJS內部創建的服務，工廠等。在配置階段(第一階段AngularJS引導自身期間)。下面提及的腳本可以被用來創建，我們已經在前面創建了MathService。提供者是一個特殊的工廠方法使用get()方法來返回值/服務/工廠。
//define a modulevar mainApp = angular.module("mainApp", []);...//create a service using provider which defines a method square to return square of a number.mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; });});常量
常量用于通過配置的相應值，考慮到值不能在配置階段傳遞使用。
mainApp.constant("configParam", "constant value");示例
下面的例子將展示上述所有指令的使用。
testAngularJS.html<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>AngularJS 依賴注入</title></head><body> <h2>AngularJS 依賴注入應用示例</h2> <div ng-app="mainApp" ng-controller="CalcController"> <p>輸入一個整數: <input type="number" ng-model="number" /> <button ng-click="square()">X<sup>2</sup></button> <p>結果值: {{result}}</p> </div> <script src="http://www.yiibai.com/js/angular.min.js"></script> <script> var mainApp = angular.module("mainApp", []); mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); }); mainApp.value("defaultInput", 5); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }); mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script></body></html>結果
在瀏覽器中打開 textAngularJS.html 看到結果如下：
AngularJS自定義指令
自定義指令用于在AngularJS中來擴展HTML的功能。自定義指令使用“指令”函數定義。自定義指令只是替換了被激活的元素。AngularJS應用程序引導過程中找到匹配的元素，并使用自定義指令compile() 方法，一次使用基于指令的范圍自定義指令link() 方法處理元素。AngularJS 為下面的元素類型創建自定義的指令提供支持。
元素指令 - 當遇到指令激活匹配的元素。
屬性 - - 當遇到指令激活屬性時匹配。
CSS - - 當遇到指令激活匹配CSS樣式。
注釋 - - 當遇到指令激活匹配的注釋。
理解自定義指令
定義自定義HTML標簽。
<student name="Mahesh"></student><br/><student name="Piyush"></student>定義自定義指令來處理上面的自定義HTML標簽。
var mainApp = angular.module("mainApp", []);//Create a directive, first parameter is the html element to be attached. //We are attaching student html tag. //This directive will be activated as soon as any student element is encountered in htmlmainApp.directive('student', function() { //define the directive object var directive = {}; //restrict = E, signifies that directive is Element directive directive.restrict = 'E'; //template replaces the complete element with its text. directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>"; //scope is used to distinguish each student element based on criteria. directive.scope = { student : "=name" } //compile is called during application initialization. AngularJS calls it once when html page is loaded. directive.compile = function(element, attributes) { element.css("border", "1px solid #cccccc"); //linkFunction is linked with each element with scope to get the element specific data. var linkFunction = function($scope, element, attributes) { element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>"); element.css("background-color", "#ff00ff"); } return linkFunction; } return directive;});定義控制器以更新指令的作用域。這里我們使用名稱屬性的值作為子的作用域。
mainApp.controller('StudentController', function($scope) { $scope.Mahesh = {}; $scope.Mahesh.name = "Mahesh Parashar"; $scope.Mahesh.rollno = 1; $scope.Piyush = {}; $scope.Piyush.name = "Piyush Parashar"; $scope.Piyush.rollno = 2;});示例
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Angular JS 自定義指令</title></head><body> <h2>AngularJS 自定義指令示例</h2> <div ng-app="mainApp" ng-controller="StudentController"> <student name="Mahesh"></student><br/> <student name="Piyush"></student> </div> <script src="http://www.yiibai.com/js/angular.min.js"></script> <script> var mainApp = angular.module("mainApp", []); mainApp.directive('student', function() { var directive = {}; directive.restrict = 'E'; directive.template = "Student: <b>{{student.name}}</b> , 編號: <b>{{student.rollno}}</b>"; directive.scope = { student : "=name" } directive.compile = function(element, attributes) { element.css("border", "1px solid #cccccc"); var linkFunction = function($scope, element, attributes) { element.html("Student: <b>"+$scope.student.name +"</b> , 編號: <b>"+$scope.student.rollno+"</b><br/>"); element.css("background-color", "#eee"); } return linkFunction; } return directive; }); mainApp.controller('StudentController', function($scope) { $scope.Mahesh = {}; $scope.Mahesh.name = "張學友"; $scope.Mahesh.rollno = 100; $scope.Piyush = {}; $scope.Piyush.name = "陳奕迅"; $scope.Piyush.rollno = 102; }); </script></body></html>結果
在Web瀏覽器中打開textAngularJS.htm?？吹浇Y果如下：
AngularJS國際化
AngularJS支持內置國際化三種類型的過濾器：貨幣，日期和數字。我們只需要根據國家的區域合并相應的JS。默認情況下它處理瀏覽器的語言環境。例如，使用丹麥語區域設置，使用下面的腳本：
<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>使用中文區域設置示例
testAngularJS.html<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Angular JS 國際化</title></head><body> <h2>AngularJS 國際化應用示例</h2> <div ng-app="mainApp" ng-controller="StudentController"> {{fees | currency }} <br/><br/> {{admissiondate | date }} <br/><br/> {{rollno | number }} </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="http://cdnjscn.b0.upaiyun.com/libs/angular-i18n/1.2.0/angular-locale_zh-cn.js"></script> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('StudentController', function($scope) { $scope.fees = 100; $scope.admissiondate = new Date(); $scope.rollno = 123.45; }); </script></body></html>結果
在Web瀏覽器中打開textAngularJS.htm?？吹浇Y果如下：
使用瀏覽器的語言環境示例
testAngularJS.html<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Angular JS 瀏覽器語言設置示例</title></head><body> <h2>AngularJS 區域語言設置(瀏覽器設置)</h2> <div ng-app="mainApp" ng-controller="StudentController"> {{fees | currency }} <br/><br/> {{admissiondate | date }} <br/><br/> {{rollno | number }} </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <!-- <script src="http://cdnjscn.b0.upaiyun.com/libs/angular-i18n/1.2.0/angular-locale_zh-hk.js"></script> --> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('StudentController', function($scope) { $scope.fees = 100; $scope.admissiondate = new Date(); $scope.rollno = 123.45; }); </script></body></html>結果
在Web瀏覽器中打開textAngularJS.html?？吹浇Y果如下：
新聞熱點
疑難解答
