AngularJS 其作用：
AngularJS 把應用程序數據綁定到 HTML 元素。
AngularJS 可以克隆和重複 HTML 元素。
AngularJS 可以隱藏和顯示 HTML 元素。
AngularJS 可以在 HTML 元素"背後"添加代碼。
AngularJS 支持輸入驗證。
AngularJS 其特性：
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標籤添加到 HTML 頁面。不用依賴JQ。例子:<script src="js/Angular.js"></script>
AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML。
AngularJS 表達式 與 JavaScript 表達式
類似於 JavaScript 表達式，AngularJS 表達式可以包含字母，操作符，變量。
與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
與 JavaScript 表達式不同，AngularJS 表達式不支持條件判斷，循環及異常。
與 JavaScript 表達式不同，AngularJS 表達式支持過濾器。
1、ng-app=" " 定義angularJS的使用範圍；
2、ng-init="變量=值;變量='值'" 初始化變量的值，有多個變量時，中間用分號隔開；
3、ng-model="變量" 定義變量名；
4、ng-bind="變量" 綁定變量名，獲取該變量的數據。這裏的變量就是第3條的變量名。
但是一般都用雙重花括號來獲取變量的值，比如：{{變量}}。
5、HTML5 允許擴展的（自制的）屬性，以 data- 開頭。
AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
例子:input輸入了什麼,那麼Hello後面就跟什麼,實現了數據的綁定
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
例子:初始化變量值爲多少,姓名後面就跟什麼
<div ng-app="" ng-init="firstName='Johns'">
<p>姓名爲 <span ng-bind="firstName"></span></p>
</div>
例子:如果變量初始化過,那麼ng-model也能直接顯示出來
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中嘗試輸入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p><!-- 將會在input中出現JoHn -->
<p>你輸入的爲: {{ firstName }}</p>
</div>
解析:
如果您移除了 ng-app 指令，HTML 將直接把表達式顯示出來，不會去計算表達式的結果。
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"所有者"。
ng-model 指令把輸入域的值綁定到應用程序變量 name。
ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。
AngularJS 表達式
前面說到雙大括號和 ng-bind 指令有異曲同工之妙。
有點像jsp的out.pring(),用以輸出數據。
雙大括號裏可以包含文字、運算符和變量。且會計算出來
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }} 或{{ 5*5 }}
AngularJS 對象
例子:AngularJS 對象就像 JavaScript 對象:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓爲 {{ person.lastName }}</p>
</div>
AngularJS 數組
例子:AngularJS 數組就像 JavaScript 數組：
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值爲 {{ points[2] }}</p>
</div>
ng-repeat 指令會重複一個 HTML 元素：
例子:.Jani .Hege .Kai 會輸出三個標籤元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 來循環數組</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
例子:.Jani，Norway .Hege，Sweden .Kai，Denmark會輸出三個標籤元素
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環對象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
AngularJS 模塊
模塊定義了一個應用程序。
模塊是應用程序中不同部分的容器。
模塊是應用控制器的容器。
控制器通常屬於一個模塊。
例子:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
添加控制器
你可以使用 ng-controller 指令來添加應用的控制器:
例子:
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
AngularJS 應用
例子:利用JS賦值
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []); //AngularJS 模塊(Module)定義了 AngularJS 應用。模塊名稱
app.controller('myCtrl', function($scope) { //AngularJS 控制器(Controller)用於控制 AngularJS 應用。
$scope.firstName= "John"; //控制器名稱+函數
$scope.lastName= "Doe"; //範圍scope(本頁).lastName(變量)='vlaue'
});
</script>
創建自定義指令。
AngularJS 通過 ng-directives 擴展了 HTML。
要調用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峯法來命名一個指令,runoobDirective,但在使用它時需要以'-'分割, runoob-directive:
例子:會輸出<h1>自定義指令!</h1>(用div效果一樣)
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
例子:通過類名顯示,必須設置restrict爲'C'
<body ng-app="myApp">
<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
例子:通過註釋顯示,必須設置 restrict : "M",replace : true,
<body ng-app="myApp">
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
例子:通過添加 restrict 屬性,並設置值爲 "A", 來設置指令只能通過屬性的方式來調用,默認爲EA
<runoob-directive></runoob-directive> //不能顯示(此爲元素名使用)
<div runoob-directive></div> //可以顯示(此爲屬性使用)
E 作爲元素名使用
A 作爲屬性使用
C 作爲類名使用
M 作爲註釋使用
驗證用戶輸入
例子:通過(form.name)+(input.name)+$error+(input.type),ng-show爲true時顯示
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>
應用狀態
ng-model 指令可以爲應用數據提供狀態值(invalid, dirty, touched, error):
例子:通過form.name+input.name+$error(狀態值)
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:<input type="email" name="myAddress" ng-model="myText" required>
<p>編輯郵箱地址，查看狀態的改變。</p>
<h1>狀態</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果輸入的值是合法的則爲 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改變則爲 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通過觸屏點擊則爲 true)。</p>
<p>invalid: {{myForm.myAddress.$invalid}} (如果無效則爲true)。</p>
<p>error: {{myForm.myAddress.$error}} (有錯則爲集合)。</p>
</form>
例子:驗證
<form ng-app="" ng-init="user='John Doe';email='[email protected]'"
name="myForm">
<p>用戶名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用戶名是必須的。</span>
</span>
</p>
<p>郵箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">郵箱是必須的。</span>
<span ng-show="myForm.email.$error.email">非法的郵箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
CSS 類
ng-model 指令基於它們的狀態爲 HTML 元素提供了 CSS 類：
ng-empty 空的
ng-not-empty 非空的
ng-touched 點擊的
ng-untouched 不變的
ng-valid
有效的
ng-invalid 無效的
ng-dirty 改變的
ng-pending 待定的
ng-pristine 原始的
例子:如果爲無效值,將會執行input.ng-invalid(中間無空格)的css,required讓其非空,
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<form ng-app="" name="myForm">
輸入你的名字:
<input name="myName" ng-model="myText" required>
</form>
<p>編輯文本域，不同狀態背景顏色會發送變化。</p>
<p>文本域添加了 required 屬性，該值是必須的，如果爲空則是不合法的。</p>
AngularJS 應用組成如下：
View(視圖), 即 HTML。
Model(模型), 當前視圖中可用的數據。
Controller(控制器), 即JavaScript函數，可以添加或修改屬性。
scope是模型。
scope是一個JavaScript對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
AngularJS Scope(作用域)
如何使用 Scope
當你在 AngularJS 創建控制器時，你可以將 $scope 對象當作一個參數傳遞:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>點我</button> //創建點擊事件
</div>
<script>
var app = angular.module('myApp', []); //創建對象AngularJS 模塊(Module)
app.controller('myCtrl', function($scope) { //獲取對象的控制器
$scope.name = "Runoob"; //控制器給name賦值
$scope.sayHello = function() { //創建sayHello()方法
$scope.greeting = 'Hello ' + $scope.name + '!'; //再次賦值給greeting
};
});
</script>
所有的應用都有一個 $rootScope，它可以作用在ng-app指令包含的所有 HTML 元素中。
$rootScope可作用於整個應用中。是各個controller中scope 的橋樑。用rootscope定義的值，可以在各個controller中使用。
例子:同一個app內,不同的控制器,相同的值。
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h1>姓氏爲 {{lastname}} 家族成員:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<div ng-controller="myCtrl_1">
<div>scope中的值是{{lastname_1}}</div>
<div>rootscope中的值是{{$root.lastname}}</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
app.controller('myCtrl_1', function($scope, $rootScope) {
$scope.lastname_1 = $rootScope.lastname;
});
</script>
AngularJS 控制器
控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數 創建
控制器也可以有方法（變量和函數）
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
在大型的應用程序中，通常是把控制器存儲在外部文件中。
只需要把 <script> 標籤中的代碼複製到名爲 personController.js 的外部文件中即可：
<script src="personController.js"></script>
AngularJS 過濾器
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
AngularJS 過濾器
AngularJS 過濾器可用於轉換數據：
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。
例子:uppercase
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名爲 {{ lastName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.lastName = "Doe",
});
</script>
例子:orderBy(根據二十六字母排序)
Kai, Denmark
Jani, Norway
Hege, Sweden
<div ng-app="myApp" ng-controller="namesCtrl">
<p>循環對象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>
自定義過濾器
以下實例自定義一個過濾器 reverse，將字符串反轉：
例子:姓名: boonuR
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依賴
return function(text) {
return text.split("").reverse().join("");
}
});
</script>
AngularJS 服務(Service)
AngularJS 中你可以創建自己的服務，或使用內建服務。
在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
有個 $location 服務，它可以返回當前頁面的 URL 地址。
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
$location 對比 window.location
window.location $location.service
目的 允許對當前瀏覽器位置進行讀寫操作 允許對當前瀏覽器位置進行讀寫操作
API 暴露一個能被讀寫的對象 暴露jquery風格的讀寫器
是否在AngularJS應用生命週期中和應用整合 否 可獲取到應用生命週期內的每一個階段，並且和$watch整合
是否和HTML5 API的無縫整合 否 是（對低級瀏覽器優雅降級）
和應用的上下文是否相關 否，window.location.path返回"/docroot/actual/path" 是，$location.path()返回"/actual/path"
$timeout 服務
AngularJS $timeout 服務對應了 JS window.setTimeout 函數。
<div ng-app="myApp" ng-controller="myCtrl">
<p>兩秒後顯示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 訪問在規定的毫秒數後執行指定函數。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>
$interval 服務
AngularJS $interval 服務對應了 JS window.setInterval 函數。
<div ng-app="myApp" ng-controller="myCtrl">
<p>現在時間是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 訪問在指定的週期(以毫秒計)來調用函數或計算表達式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
創建自定義服務
你可以創建自定義服務，鏈接到你的模塊中：
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16進制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定義服務，用於轉換16進制數：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() { //定義'hexafy'的服務
this.myFunc = function (x) { //服務的函數
return x.toString(16); //將其轉換爲16進制的數
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255); //調用剛剛創建的服務
});
</script>
結合過濾器，服務使用
例子:
<div ng-app="myApp" ng-controller="myCtrl">
<p>在獲取數組 [255, 251, 200] 值時使用過濾器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>過濾器使用服務將10進制轉換爲16進制。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>
$http 服務
$http 是 AngularJS 應用中最常用的服務。 服務向服務器發送請求，應用響應服務器傳送過來的數據。
$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
POST 與 GET 簡寫方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country +', '+x.Url}}
</li>
</ul>
</div>
//v1.5一下的版本
var app = angular.module('myApp', []).controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
//v1.5 中$http 的 success 和 error 方法已廢棄。使用 then 方法替代。
<script>
angular.module('myApp', []).controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: '獲取json數據的url'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 請求失敗執行代碼
});
});
</script>
例子:歡迎信息:data
<div ng-app="myApp" ng-controller="myCtrl">
<p>歡迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服務向服務器請求信息，返回的值放入變量 "myWelcome" 中。</p>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) { //get方法,url爲welcome.htm
$scope.myWelcome = response.data;
});
});
</script>
AngularJS Select(選擇框)
AngularJS 可以使用數組或對象創建一個下拉列表選項。使用對象作爲數據源, x 爲鍵(key), y 爲值(value):
例子:兩種方法,都可以調用
ng-options:
<div ng-app="myApp" ng-controller="myCtrl">
//ng-init="selectedName = names[0]"初始化顯示的值、綁定的數據爲selectedName、key定義了,value默認爲key
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
ng-repeat:
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
例子:兩種方法,都可以調用
ng-options:選擇的值是一個對象
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你選擇的是: {{selectedSite.site}}</h1>
<p>網址爲: {{selectedSite.url}}</p>
</div>
ng-repeat:有侷限性，選擇的值是一個字符串:
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你選擇的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
使用對象作爲數據源, x 爲鍵(key), y 爲值(value):
x爲car01 y爲值{brand : "Ford", model : "Mustang", color : "red"}
<div ng-app="myApp" ng-controller="myCtrl">
<p>選擇一輛車:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你選擇的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>顏色: {{selectedCar.color}}</h3>
<p>注意選中的值是一個對象。</p>
</div>
<script>
var app = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
}
});
</script>
AngularJS 表格
ng-repeat 指令可以完美的顯示錶格。
<table>
<tr ng-repeat="x in names"> //ng-repeat="x in names | orderBy : 'Country'" 可以用攔截器排序
<td>{{ $index + 1 }}</td> //顯示序號 ($index)從0開始
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
使用 $even 和 $odd 偶奇(從0開始)
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
ng-disabled 指令
ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。
例子:
<div ng-app="" ng-init="mySwitch=true"> //初始化mySwitch的值
<p><button ng-disabled="mySwitch">點我!</button></p> //不能點擊爲true
<p><input type="checkbox" ng-model="mySwitch"/>按鈕</p> //默認點擊了,value爲true
<p>{{ mySwitch }}</p> //去除了checkbox後,纔可以點擊button
</div>
ng-show 指令
ng-show 指令隱藏或顯示一個 HTML 元素。
例子:
<p ng-show="true">我是可見的。</p>
<p ng-show="false">我是不可見的。</p>
<div ng-app="" ng-init="hour=13"> //且可以參與計算
<p ng-show="hour > 12">我是可見的。</p>
ng-hide 指令(與show相反)
ng-hide 指令用於隱藏或顯示 HTML 元素。
<div ng-app="">
<p ng-hide="true">我是不可見的。</p>
<p ng-hide="false">我是可見的。</p>
</div>
AngularJS 事件
AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click 指令定義了 AngularJS 點擊事件。
例子:利用ng-click進行簡單的計算
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
例子:利用ng-click執行函數
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隱藏/顯示</button>
<p ng-hide="myVar">
名: <input type=text ng-model="firstName"><br>
姓: <input type=text ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar; //更改顯示隱藏狀態
}
});
</script>
函數會影響到全局命名空間
JavaScript 中應避免使用全局函數。因爲他們很容易被其他腳本文件覆蓋。
AngularJS 模塊讓所有函數的作用域在該模塊下，避免了該問題。
Checkbox（複選框）
checkbox 的值爲 true 或 false，可以使用 ng-model 指令綁定，它的值可以用於應用中：
<div ng-app="">
<form>
選中複選框，顯示標題:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
</div>
單選框
通過ng-switch選取綁定元素,通過ng-switch-when選取元素值
<body ng-app="">
<form>
選擇一個選項:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>ng-switch 指令根據單選按鈕的選擇結果顯示或隱藏 HTML 區域。</p>
</body>
也可以用在下拉菜單上:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
HTML 表單
重置表單時
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button> //點擊時,觸發reset()事件:讓master的值給user
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p> //因而不會出現master也隨之改動,不用copy則會變動
</div>
<script>
angular.module('myApp', []).controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master); //利用angular.copy將值複製,不會出現值雙向綁定
};
$scope.reset();
});
</script>
AngularJS API
API 意爲 Application Programming Interface（應用程序編程接口）。
API 描述
angular.lowercase($scope.x) 轉換字符串爲小寫
angular.uppercase($scope.x) 轉換字符串爲大寫
angular.isString($scope.x) 判斷給定的對象是否爲字符串，如果是返回 true。
angular.isNumber($scope.x) 判斷給定的對象是否爲數字，如果是返回 true。
AngularJS 包含
//類似JSP的include
如果包含的文件"runobb.htm"中有AngularJS代碼,它將被正常執行
使用 AngularJS, 你可以使用 ng-include 指令來包含 HTML 內容:
<body ng-app="">
<div ng-include="'runoob.htm'"></div>
</body>
AngularJS 動畫
AngularJS 提供了動畫效果，可以配合 CSS 使用。
AngularJS 使用動畫需要引入 angular-animate.min.js 庫。
還需在應用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
例子:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<body ng-app="ngAnimate"> //如果ng-app='myApp'被佔用,可調用angular.module('myApp', ['ngAnimate']);
<h1>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
AngularJS 依賴注入
AngularJS 提供很好的依賴注入機制。以下5個核心組件用來作爲依賴注入：
value:Value 是一個簡單的 javascript 對象，用於向控制器傳遞值（配置階段）
// 定義一個模塊
var mainApp = angular.module("mainApp", []);
// 創建 value 對象 "defaultInput" 並傳遞數據
mainApp.value("defaultInput", 5);
// 將 "defaultInput" 注入到控制器
//計算服務CalcService.square();square爲計算平方
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);
}
});
factory:Factory是一個函數用於返回值。在service和controller需要時創建。通常我們使用 factory 函數來計算或返回值。
// 定義一個模塊
var mainApp = angular.module("mainApp", []);
//創建factory"MathService"用於兩數的乘積
mainApp.factory('MathService', function() {
//清空factory工廠
var factory = {};
//創建返回值的函數
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
service:服務,也在service和controller之間
// 創建名稱爲'CalcService'的服務,並向服務中注入 factory "MathService",使用工廠的該函數
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
provider:供應商
AngularJS 中通過 provider 創建一個 service、factory等(配置階段)。
Provider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory。
// 定義一個模塊
var mainApp = angular.module("mainApp", []);
//模塊配置,引入$provide
// 使用provider創建名爲'MathService'的factory定義一個方法用於計算兩數乘積
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
//初始化工廠
var factory = {};
//創建函數
factory.multiply = function(a, b) {
return a * b;
}
//返回函數
return factory;
};
});
});
以下實例提供了以上幾個依賴注入機制的演示。
AngularJS 實例 - factory
<div ng-app = "mainApp" ng-controller = "CalcController"> //定義 模塊 控制器
<p>輸入一個數字: <input type = "number" ng-model = "number" /></p> //值number
<button ng-click = "square()">X<sup>2</sup></button> //點擊事件
<p>結果: {{result}}</p> //結果
</div>
<script>
var mainApp = angular.module("mainApp", []); //獲取模塊
//將值注入模塊當中去
mainApp.value("defaultInput", 5); //定義簡單的值
mainApp.factory('MathService', function() { //創建一個factory,名稱爲'MathService'
var factory = {}; //清空factory
factory.multiply = function(a, b) { //創建multiply(×)函數,接受參數並處理參數
return a * b;
}
return factory;
}); //創建名稱爲'CalcService'的服務,
mainApp.service('CalcService', function(MathService){ //並向服務中注入 factory "MathService"
this.square = function(a) { //創建服務中函數square,並調工廠的該函數
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>
AngularJS 實例 - provider
<div ng-app = "mainApp" ng-controller = "CalcController"> //定義 模塊 控制器
<p>輸入一個數字: <input type = "number" ng-model = "number" /></p> //值number
<button ng-click = "square()">X<sup>2</sup></button> //點擊事件
<p>結果: {{result}}</p> //結果
</div>
<script>
var mainApp = angular.module("mainApp", []); //獲取模塊
mainApp.value("defaultInput", 5); //定義簡單的值
mainApp.config(function($provide) { //模塊配置,引入$provide
$provide.provider('MathService', function() {// 使用provider創建名爲'MathService'的factory定義一個方法用於計算兩數乘積
this.$get = function() {
//初始化工廠
var factory = {};
//創建函數
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
}); //創建名稱爲'CalcService'的服務,
mainApp.service('CalcService', function(MathService){ //並向服務中注入 factory "MathService"
this.square = function(a) { //創建服務中函數square,並調工廠的該函數
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>
constant:constant(常量)用來在配置階段傳遞數值。
mainApp.constant("configParam", "constant value");
AngularJS 路由
AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。
通常我們的URL形式爲 http://runoob.com/first/page，但在單頁Web應用中 AngularJS 通過 # + 標記 實現，例如：
http://runoob.com/#/first
例子:
1、載入了實現路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模塊作爲主應用模塊的依賴模塊。
angular.module('routingDemoApp',['ngRoute'])
3、<div ng-view></div>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由應用</h2>
<ul>
<li><a href="#/">首頁</a></li>
<li><a href="#/computers">電腦</a></li>
<li><a href="#/printers">打印機</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute']) //引入依賴
.config(['$routeProvider', function($routeProvider){ //引入$routeProvide路由提供商
$routeProvider //配置路由規則.when時候,template參數
.when('/',{template:'這是首頁頁面'}) //when(path,object) & otherwise(object)
.when('/computers',{template:'這是電腦分類頁面'}) //第一個參數是 URL 或者 URL 正則規則。
.when('/printers',{template:'這是打印機頁面'}) //第二個參數是路由配置對象。
.otherwise({redirectTo:'/'});
}]);
</script>
路由設置對象
路由配置對象語法規則如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
template:
如果我們只需要在 ng-view 中插入簡單的 HTML 內容，則使用該參數
templateUrl:
如果我們只需要在 ng-view 中插入 HTML 模板文件，則使用該參數：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
controller:
function、string或數組類型，在當前模板上執行的controller函數，生成新的scope。
controllerAs:
string類型，爲controller指定別名。
redirectTo:
重定向的地址。
resolve:
指定當前controller所依賴的其他模塊。
例子:
<body ng-app="ngRouteExample" class="ng-scope"> //定義 模塊 控制器
<script type="text/ng-template" id="embedded.home.html"> //定義type="text/ng-template" id
<h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
<h1> About </h1>
</script>
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view="">
</div>
</div>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute']) //導入依賴
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;}) //創建兩個控制器
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) { //配置路由
$routeProvider.
when('/home', { //當爲/home時,跳轉路徑+控制器名稱
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
</body>
AngularJS 應用實例
例子:編輯器
<body ng-app="myNoteApp" ng-controller="myNoteCtrl"> //定義 模塊 控制器
<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>
angular.module("myNoteApp", []).controller("myNoteCtrl", function($scope) {
$scope.message = ""; //初始化message值
$scope.left = function() {return 100 - $scope.message.length;}; //left()函數返回值
$scope.clear = function() {$scope.message = "";}; //清除message的值
$scope.save = function() {alert("Note Saved");}; //彈出框
});
</script>
AngularJS 參考手冊
AngularJS 指令
本教程用到的 AngularJS 指令 :
指令 描述
ng-app 定義應用程序的根元素。
ng-bind 綁定 HTML 元素到應用程序數據
ng-bind-html 綁定 HTML 元素的 innerHTML 到應用程序數據，並移除 HTML 字符串中危險字符
ng-bind-template 規定要使用模板替換的文本內容
ng-blur 規定 blur 事件的行爲
ng-change 規定在內容改變時要執行的表達式
ng-checked 規定元素是否被選中
ng-class 指定 HTML 元素使用的 CSS 類
ng-class-even 類似 ng-class，但只在偶數行起作用
ng-class-odd 類似 ng-class，但只在奇數行起作用
ng-click 定義元素被點擊時的行爲
ng-cloak 在應用正要加載時防止其閃爍
ng-controller 定義應用的控制器對象
ng-copy 規定拷貝事件的行爲
ng-csp 修改內容的安全策略
ng-cut 規定剪切事件的行爲
ng-dblclick 規定雙擊事件的行爲
ng-disabled 規定一個元素是否被禁用
ng-focus 規定聚焦事件的行爲
ng-form 指定 HTML 表單繼承控制器表單
ng-hide 隱藏或顯示 HTML 元素
ng-href 爲 the <a> 元素指定鏈接
ng-if 如果條件爲 false 移除 HTML 元素
ng-include 在應用中包含 HTML 文件
ng-init 定義應用的初始化值
ng-jq 定義應用必須使用到的庫，如：jQuery
ng-keydown 規定按下按鍵事件的行爲
ng-keypress 規定按下按鍵事件的行爲
ng-keyup 規定鬆開按鍵事件的行爲
ng-list 將文本轉換爲列表 (數組)
ng-model 綁定 HTML 控制器的值到應用數據
ng-model-options 規定如何更新模型
ng-mousedown 規定按下鼠標按鍵時的行爲
ng-mouseenter 規定鼠標指針穿過元素時的行爲
ng-mouseleave 規定鼠標指針離開元素時的行爲
ng-mousemove 規定鼠標指針在指定的元素中移動時的行爲
ng-mouseover 規定鼠標指針位於元素上方時的行爲
ng-mouseup 規定當在元素上鬆開鼠標按鈕時的行爲
ng-non-bindable 規定元素或子元素不能綁定數據
ng-open 指定元素的 open 屬性
ng-options 在 <select> 列表中指定 <options>
ng-paste 規定粘貼事件的行爲
ng-pluralize 根據本地化規則顯示信息
ng-readonly 指定元素的 readonly 屬性
ng-repeat 定義集合中每項數據的模板
ng-selected 指定元素的 selected 屬性
ng-show 顯示或隱藏 HTML 元素
ng-src 指定 <img> 元素的 src 屬性
ng-srcset 指定 <img> 元素的 srcset 屬性
ng-style 指定元素的 style 屬性
ng-submit 規定 onsubmit 事件發生時執行的表達式
ng-switch 規定顯示或隱藏子元素的條件
ng-transclude 規定填充的目標位置
ng-value 規定 input 元素的值
過濾器解析 AngularJs 過濾器。
AngularJS 支持以下事件:
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
AngularJS 驗證屬性
$dirty
$invalid
$error
驗證解析：Angular 驗證。
AngularJS 全局 API
轉換
API 描述
angular.lowercase() 將字符串轉換爲小寫
angular.uppercase() 將字符串轉換爲大寫
angular.copy() 數組或對象深度拷貝
angular.forEach() 對象或數組的迭代函數
比較
API 描述
angular.isArray() 如果引用的是數組返回 true
angular.isDate() 如果引用的是日期返回 true
angular.isDefined() 如果引用的已定義返回 true
angular.isElement() 如果引用的是 DOM 元素返回 true
angular.isFunction() 如果引用的是函數返回 true
angular.isNumber() 如果引用的是數字返回 true
angular.isObject() 如果引用的是對象返回 true
angular.isString() 如果引用的是字符串返回 true
angular.isUndefined() 如果引用的未定義返回 true
angular.equals() 如果兩個對象相等返回 true
JSON
API 描述
angular.fromJson() 反序列化 JSON 字符串
angular.toJson() 序列化 JSON 字符串
基礎
API 描述
angular.bootstrap() 手動啓動 AngularJS
angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作爲一個jQuery元素來處理。
angular.module() 創建，註冊或檢索 AngularJS 模塊
angularJS基礎筆記
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章