AngularJS入門學習
1.1 AngularJS簡介
AngularJS 誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當中。AngularJS有著諸多特性，最為核心的是：MVC、模塊化、自動化雙向數(shù)據(jù)綁定、依賴注入等等。
1.2 AngularJS四大特征
1.2.1 MVC 模式
Angular遵循軟件工程的MVC模式,并鼓勵展現(xiàn)，數(shù)據(jù)，和邏輯組件之間的松耦合.通過依賴注入（dependency injection），Angular為客戶端的Web應(yīng)用帶來了傳統(tǒng)服務(wù)端的服務(wù)，例如獨立于視圖的控制。 因此，后端減少了許多負擔，產(chǎn)生了更輕的Web應(yīng)用。
Model:數(shù)據(jù),其實就是angular變量($scope.XX);
View: 數(shù)據(jù)的呈現(xiàn),Html+Directive(指令);
Controller:操作數(shù)據(jù),就是function,數(shù)據(jù)的增刪改查;
1.2.2雙向綁定
AngularJS是建立在這樣的信念上的：即聲明式編程應(yīng)該用于構(gòu)建用戶界面以及編寫軟件構(gòu)建，而指令式編程非常適合來表示業(yè)務(wù)邏輯。框架采用并擴展了傳統(tǒng)HTML，通過雙向的數(shù)據(jù)綁定來適應(yīng)動態(tài)內(nèi)容，雙向的數(shù)據(jù)綁定允許模型和視圖之間的自動同步。因此，AngularJS使得對DOM的操作不再重要并提升了可測試性。
1.2.3依賴注入
依賴注入(Dependency Injection,簡稱DI)是一種設(shè)計模式, 指某個對象依賴的其他對象無需手工創(chuàng)建，只需要“吼一嗓子”，則此對象在創(chuàng)建時，其依賴的對象由框架來自動創(chuàng)建并注入進來,其實就是最少知識法則;模塊中所有的service和provider兩類對象，都可以根據(jù)形參名稱實現(xiàn)DI.
1.2.4模塊化設(shè)計
高內(nèi)聚低耦合法則
官方提供的模塊 ng、ngRoute、ngAnimate
用戶自定義的模塊 angular.module('模塊名',[ ])
1.3.AngularJS 指令
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
- ng-app 指令初始化一個 AngularJS 應(yīng)用程序。
- ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
- ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
- ng-click 指令定義了 AngularJS 點擊事件。
- ng-repeat 指令會重復(fù)一個 HTML 元素
- $http 是 AngularJS 中的一個核心服務(wù)，用于讀取遠程服務(wù)器的數(shù)據(jù)。
示例一
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中嘗試輸入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你輸入的為： {{ firstName }}</p>
</div>
示例二
<div ng-app="" ng-init="quantity=1;price=5">
<h2>價格計算器</h2>
數(shù)量： <input type="number" ng-model="quantity">
價格： <input type="number" ng-model="price">
<p><b>總價：</b> {{ quantity * price }}</p>
</div>
示例三
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
ng-controller用于指定所使用的控制器。
scope 就在視圖和控制器之間建立了一個通道,基于作用域視圖在修改數(shù)據(jù)時會立刻更新
scope 發(fā)生改變時也會立刻重新渲染視圖.
示例四
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
</div>
示例五
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 來循環(huán)數(shù)組</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<!--循環(huán)對象-->
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環(huán)對象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
示例六
v1.5 中
$http的success和error方法已廢棄。使用then方法替代。
- 使用格式
// 簡單的 GET 請求，可以改為 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 請求成功執(zhí)行代碼
}, function errorCallback(response) {
// 請求失敗執(zhí)行代碼
});
- 簡單寫法
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
- 通用方法實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'https://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 請求失敗執(zhí)行代碼
});
});
</script>
</body>
</html>
- 簡明方法1.5以上
<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.then(function (response) {$scope.names = response.data.sites;});
});
</script>
- 簡明方法1.5以下
<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
</script>
當從服務(wù)端載入 JSON 數(shù)據(jù)時，$scope.names 變?yōu)橐粋€數(shù)組。
