並提供了良好的MVC設計方式以及模板系統，甚至還有依賴注入的系統，但其缺點在於對
視圖的元件支援度不夠強 (並非像ExtJS或JQueryUI 有提供自身的視圖元件)。
講到 AngularJS 入門，接下來用一個範例來說明一個最簡的AngularJS包含什麼!
首先到 https://angularjs.org/ 下載最新的版本的AngularJS 函式庫
畫面會帶出一個視窗，你可以在Build那邊選擇要壓縮過後的還是沒壓縮的或是ZIP檔都可
如果你是下載ZIP檔的話，在解壓縮之後就可以把 angular.js 或是 angular.min.js 載入到HTML了
<script type="text/javascript" src="js/angular.min.js"></script>
接著就來看看要如何應用 AngularJS 到你的程式了：
1. 加入 ng-app 屬性到 html 標籤中
<html ng-app="demoApp">
2. 建立一個 AngularJS module
<script>
var demoApp = angular.module("demoApp", []);
</script>
在第一個步驟中，我們加入了一個 ng-app 屬性到 html標籤中，
ng-app 的目的是告訴 AngularJS 從 html 標籤以下都需要經過 AngularJS的編譯(compiled)與處理(processed)，而 ng-app 就是表示一個應用程式所在的範圍。
上面範例中我指定了 ng-app 屬性值為 "demoApp"，是告訴 AngularJS 我將 demoApp 這個模組應用在這個 html 標籤以下，
因此在第二步驟中就必須透過 angular.module 建立一個 demoApp 模組，
而在AngularJS的編譯過程中，會加載 demoApp 底下所有的依賴的模組，
並初始化這個 demoApp 底下的所有 AngularJS 物件(Ex: $rootScope...)，
需要注意的是
- 一個 HTML 網頁只能有一個 ng-app
- ng-app 不一定要擺在 html 標籤中
接著在 body 標籤中 加入一行 AngularJS 的 Expression
{{'HelloWorld'}}
首先 AngularJS 的 Expression 是用兩個大括弧圍住 {{....}}
此行結果 會在頁面顯示出 HelloWorld 而不是 {{'HelloWorld'}}
其實 AngularJS 的 Expression 跟 JSP 的 Scriptlet 是類似道理了
他會在執行期間動態顯示 Expression 裡面的值，後續會在介紹AngularJS Expression
以下為全部的範例程式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">
<head>
<title>Bootstrap
Examples</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var
demoApp = angular.module("demoApp", []);
</script>
</head>
<body>
{{'HelloWorld'}}
</body>
</html>
最後如果想試看看 ng-app 的 scope 可以把程式改成如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Bootstrap
Examples</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var
demoApp = angular.module("demoApp", []);
</script>
</head>
<body>
<div ng-app="demoApp">
{{'HelloWorld'}}
</div>
{{'HelloWorld'}}
</body>
</html>
你會發現第二個 AngularJS 的 Expression 並不會被AngularJS表達顯示出來
這是因為第二個 Expression並不被任何 AngularJS 應用所控管，因此在編譯之後
第二個 Expression 只會被認為是一個普通的 HTML 字樣而以。
沒有留言:
張貼留言