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