宣告應用程式作用域(Application Scope),在 Document Object Model(DOM)載入後,AngularJS 就會開始尋找 ng-app
這個字,找到的話,就會把這頁面當成是 AngularJS 應用程式。
(1)宣告方式:一份 HTML 只能宣告一個應用程式作用域(ng-app)
<html ng-app>
<html ng-app="appName">
(2)ng-app 用法:
全站使用 AngularJS :放在 html(或 body)裡面。
<html ng-app> </html>
<body ng-app> </body>
局部使用 AngularJS :可以把這個字放在某個應用到 AngularJS 的 div 中。
<div ng-app="ng-app"></div>
這行代碼演示了 AngularJS 模板的核心功能:绑定。
<p>Nothing here {{'yet' + '!'}}</p>
這個绑定由雙大括號 {{}}
和表達式 'yet' + '!'
组成。它告诉 AngularJS 需要運算其中的表達式並將结果插入 DOM 中,接下来我們可以看到 DOM 隨著表達式運算结果的改變而更新。
AngularJS 表達式 Angular Expression 是一種類似於 JavaScript 的代碼片段,AngularJS 表達式僅在 AngularJS 的作用域中運行,而不是在整個 DOM 中運行。
’$’
字首命名規則:作為一個 AngularJS 的內建服務,作用域方法和其他 AngularJS 的 API 都會在名稱前面加上一個’$’
的字首。
為了避免衝突,在 Services 和 Models 的命名上最好避免有 ’$’
的開頭。
是 AngularJS 的語法,主要用來綁定 View(HTML)和 Model(JS)的連結,以建立 View 和 Model 的關係。其遵循 MVC(Model–View–Controller)框架,可以透過 Controller 來處理 Model 和 View 之間的綁定。若在 Controller 中進行修改,異動也會反應到 View 中,達到 AngularJS 的雙向資料綁定(Two Way Data-Binding)。
例如:(指定名稱為 " fun " 的 controller,必須與 controllers.js 裡的主 function 名稱相同。)
<body ng-controller=" fun ">
是 AngularJS 在建立(Controller)應用程式時產生的一個物件,用來代表應用程式的 Model。所以我們透過 $scope.
變數,才能得到變數的(值)位址。
在 Model 裡面指定變數 name 的方式為 $scope.name
,View 再透過 {{name}}
顯示。我們在名稱為 fun 的 Controller 裡面,宣告一個名稱為 name 的變數,並將變數值指定為 “sunny”。
`function fun($scope)`
` {$scope.name = "sunny";}`
接著只要在 HTML 裡面指定 ng-controller
名稱,並輸入 {{name}}
,即可。
<p ng-controller=" fun">My name is {{ name }}!</p>
name
/ 名稱ng-model
/ 綁定的資料required
/ 限制是否必填ng-required
/ 限制是否必填ng-minlength
/ 限制最小長度ng-maxlength
/ 限制最大長度ng-pattern
/ 限制 RegExp 格式ng-change
/ 當 input 的值發生變化的時候執行
ng-controller
,處理 Model 和 View 的雙向連結ng-model
,綁定 checkbox 的資料和 value1 的值,一有變動,就會隨時更新。ng-true-value
和 ng-false-value
,修改 value2 的內容。HTML:
<form name="myForm" ng-controller="Ctrl"> Value1: <input ng-model="value1" type="checkbox" /> Value2: <input ng-model="value2" ng-true-value="YES" ng-false-value="NO" type="checkbox" /> <tt>value1 = {{value1}}</tt> <tt>value2 = {{value2}}</tt> </form>
JS:
function Ctrl($scope) {
$scope.value1 = true;
$scope.value2 = 'YES';
}
AngularJS 的 HTML 編譯器能讓瀏覽器識別新的 HTML 語法。它能讓你將行為關聯到 HTML 元素或者屬性上,甚至能讓你創造具有自定義行為的新元素。AngularJS 稱這種擴展行為為「指令」。
指令是指「當關連的 HTML 結構進入編譯階段時應該執行的操作」。指令可以寫在元素的名稱裡、屬性裡、CSS 類名裡和注釋裡。指令的特性非常有用,它擴展了 HTML 的表現能力,使用這個特性能夠以更少的代碼建立更簡潔的頁面結構。
AngularJS 本身內建了一些指令,來看個例子,其使用了內建的 ng-repeat
,首先通過 ng-init
指令創建了一個 students 的對象數組,然後使用 ng-repeat
指令打印出所有學生的名字和年齡。
<div ng-init="students = [ {name:'John', age:25, gender:'boy'}, {name:'Joy', age:15, gender:'girl'}, {name:'Mary', age:28, gender:'girl'}, ]"> <div data-ng-repeat="student in students"> <h3>{{student.name}}:{{student.age}}</h3> </div> </div>
另外,還可以使用 ng-show
過濾重複值,只顯示 boy:
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"> <h3>{{student.name}}:{{student.age}}</h3> </div>
或者使用 ng-switch
做一些更複雜的控制,如:年滿 18 歲打印 ADULT。
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'" data-ng-switch="student.age">18"> <h3>{{student.name}}:{{student.age}}</h3> <p data-ng-switch-when="true">ADULT</p> </div>
其特性為開發人員省了很多代碼,對定義 Web Page Structure 來說非常有幫助。而且除了本身自帶的 Directives 滿足大部分群眾的需要外,還支持定制 Directive 來滿足使用者的特別需求。
除此之外,AngularJS 指令可以用來創建自定義的標籤,它們可以用來裝飾元素或者操作 DOM 屬性。以下是監聽一個事件並且針對更新它的 $scope
例子:
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
你可以使用這個自定義的 Directive :
<my-component ng-model="message"></my-component>
使用一系列的組件來創建自己的應用,將使你更方便的添加、刪除和更新功能。
一種 DOM 物件的標記(可以是 HTML 屬性/標記名稱/CSS Class),ng 會透過一組 HTML 編譯器($compile)將功能外掛上去。
參考資料:
Day1-Day30:入門AngularJS筆記與前端領域的學習筆記分享介紹