一懈费、Angular四大特性之一---MVC
-
聲明一個(gè)ng的應(yīng)用程序 ng-App
<html ng-app></html> -
創(chuàng)建一個(gè)自定義的模塊：angular.module("模塊名",[依賴列表])
angular.module.("模塊名",["ng"]) -
在應(yīng)用中注冊(cè)自定義模塊 ng-app="模塊名"
<html ng-app="myModule"></html> -
在模塊中聲明Controller
angular.module.("模塊名",["ng"]).controller("myContro",function(){ }); -
在view中指定Controller對(duì)象的作用范圍-調(diào)用控制器創(chuàng)建函數(shù)
<div ng-controller="myContro"> {{name}} </div> -
在Controller中聲明Modal數(shù)據(jù)
angular.module.("模塊名",["ng"]).controller("myContro",function($scope){ #$scope.name = "藍(lán)科教育"; });
注意：
Angular明明命名空間习霹，&和&&為防止和你的代碼的名稱產(chǎn)生沖突 ng公共對(duì)象的前綴名使用$ 私有對(duì)象名使用$$ 請(qǐng)不要在你的對(duì)象中使用這兩個(gè)符號(hào)
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body ng-app="myModule">
<!--angular module controller model-->
<div ng-controller="myControl">
<ul>
<li ng-repeat="name in personArray">{{name}}</li>
</ul>
</div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("myModule",["ng"]).controller("myControl",function($scope){
$scope.personArray = ["張三","李四","王五","趙四"];
</script>
</html>
二煞抬、AngularJS四大特性之二-雙向數(shù)據(jù)綁定
1.方向1
- Model綁定到View，此后不論何時(shí)只要Model發(fā)生改變，立即會(huì)自動(dòng)同步更新
- 實(shí)現(xiàn)方法 {{}} ng-bind ngif ngRepeat...幾乎所有的顯示數(shù)據(jù)的指令都實(shí)現(xiàn)了方向1的綁定
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body ng-app="myModule">
<div ng-controller="myControl" class="container">
<p>{{name}}{{imgsrc}}</p>
<button ng-click="add()" class="btn btn-danger">點(diǎn)我</button>
<br />
<span class="">點(diǎn)擊次數(shù){{count}}</span>
</div>
<div ng-controller="myControl2" class="container">
<h1>輪播圖</h1>
<button ng-click="prev()" class="btn btn-danger">上一張</button>
<button ng-click="next()" class="btn btn-success">下一張</button>
</div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var module = angular.module("myModule",["ng"])
module.controller("myControl",function($scope){
$scope.name ="gg";
var count=0;
$scope.count = count;
$scope.add=function(){
$scope.count++;
}
})
module.controller("myControl2",function($scope){
var imgsrc = 1;
$scope.imgsrc=imgsrc;
$scope.prev = function(){
$scope.imgsrc--;
if ($scope.imgsrc<1) {
$scope.imgsrc=2;
}
}
$scope.next = function(){
$scope.imgsrc++;
if ($scope.imgsrc>2) {
$scope.imgsrc=1;
}
}
})
</script>
</html>
2.方向2
view綁定到model,把視圖中可以修改的HTML元素，即表單控件的值綁定到模型變量上胯陋。此后，只要用戶修改了表單控件的值后椿猎，后臺(tái)模型變量的值會(huì)立即隨之改變
-
實(shí)現(xiàn)： 只有ngmodel指令可以惶岭，為了監(jiān)視到Model變量真的被改變了可以使用$scope.$watch()函數(shù)對(duì)Model數(shù)據(jù)的值進(jìn)行監(jiān)視,
$scope.$watch('name',function(newValue,oldValue, scope){ console.log(newValue); console.log(oldValue); });
單行文本輸入域，ngModel可以把value屬性值綁定到model
復(fù)選框犯眠，ngModely可以把true按灶、false值綁定到Model變量
單選框 ngModel可以把當(dāng)前選中的單選框的value值綁定到Model變量
下拉框 ngModel可以把當(dāng)前選中的option的value值綁定到Model變量
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body ng-app="myModule">
<div class="container" ng-controller="myControl">
<h1>單行文本輸入框</h1>
名字：<input type="text" ng-model="name"/>
<span>{{name}}</span><br />
密碼：<input type="password" ng-model="password"/>
<span>{{password}}</span>
<br />
<h2>復(fù)選框</h2><br />
婚否：<input type="checkbox" ng-model="marry"/><span>{{marry}}</span><br />
<h2>單選框</h2><br />
<input type="radio" value="男" ng-model="sex"/>男
<input type="radio" value="女" ng-model="sex"/>女
<span>{{sex}}</span><br />
<h2>下拉框</h2>
<select name="" ng-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="廣州">廣州</option>
</select>
<span>{{city}}</span>
<br />
<h2>簡(jiǎn)易版購(gòu)物車計(jì)算器</h2>
單價(jià)：<input type="text" ng-model="price" />
數(shù)量：<input type="text" ng-model="number" />
總價(jià)：{{price*number}}
</div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("myModule",["ng"]).controller("myControl",function ($scope){
$scope.$watch("name+password",function() { //兩個(gè)監(jiān)聽對(duì)象之間用+連接即可
console.log($scope.name);
console.log($scope.password);
})
})
</script>
</html>
三、ng模塊中提供的Service組件
$rootScope 用于在所有控制前間共享數(shù)據(jù)的服務(wù)
$interval 周期性定時(shí)器服務(wù)
$timeout 一次性定時(shí)器服務(wù)
四筐咧、ng模塊提供的directive組件
ngClick: 為元素綁定單機(jī)事件的監(jiān)聽函數(shù)-只能是Model函數(shù)($scope.函數(shù)名=function(){})鸯旁，不能是全局函數(shù),可以在view中被調(diào)用
ngMouseOver 鼠標(biāo)移動(dòng)到指定的 HTML 元素上時(shí)要執(zhí)行的操作
ngSrc 為img標(biāo)簽指定src屬性，但可以防止404請(qǐng)求錯(cuò)誤
ngShow 若賦值為true量蕊，則display：block;否則display:none
ngHide; 跟ngshow相反
五铺罢、AngularJS四大特性之三-依賴注入
1.若某個(gè)函數(shù)調(diào)用時(shí)需要其他的對(duì)象作為形參，就稱此函數(shù)依賴于形參
function Driver(car) {
car.strat();
car.run();
car.stop();
}
2.如何解決依賴關(guān)系
1）主動(dòng)創(chuàng)建
var c1 = new Car();
var d1 = new Driver(c1);
-
被動(dòng)注入(Injection)方式
module.controller("控制器"残炮，function($scope,$inerval));
angular中的ngController指令在實(shí)例化控制器對(duì)象時(shí)韭赘，會(huì)根據(jù)指令的形參名，創(chuàng)建出控制器所依賴的對(duì)象势就，并注入進(jìn)來---依賴注入（Dependency Injection）
注意：
1.angular在創(chuàng)建控制器對(duì)象時(shí)泉瞻，會(huì)根據(jù)形參列表中的每個(gè)形參依賴的對(duì)象的名稱來創(chuàng)建，故控制器聲明函數(shù)不能聲明angular無法識(shí)別的形參名 angular只提供了一種依賴注入方式-根據(jù)形參名來注入依賴的對(duì)象
2.若項(xiàng)目js文件使用了類似yuicompressor等壓縮程序苞冯，默認(rèn)會(huì)把函數(shù)的形參名精簡(jiǎn)為一個(gè)字母的形式袖牙，會(huì)導(dǎo)致Angular的依賴注入失敗-解決辦法
module.controller("控制器名"，[
"$scope",
"$interval",
"$http",
function(a,b,c){
}
]);
3.可以被注入的對(duì)象 - 所有的service對(duì)象都可以被注入
1）$rootScope 在多個(gè)控制器間共享數(shù)據(jù)的服務(wù)
2）$interval 提供周期性定時(shí)器服務(wù)
3）$timeout 提供一次性定時(shí)器服務(wù)
4）$log 體用五個(gè)基本的日志輸出服務(wù)
5）$http 提供異步HTPP請(qǐng)求（AJAX）的服務(wù)
$http{method:"GET",url:""}.then(fun).catch(fun)
$http.get("url").then(fn);
$http.post("url",data).then(fn);
6）$location
六舅锄、 ng模塊中提供的過濾器
filter:把model中的數(shù)據(jù)在顯示時(shí)以某種特定的格式來呈現(xiàn)
-
lowercase
語(yǔ)法：{{表達(dá)式 | lowercase}
-
uppercase
語(yǔ)法：{{表達(dá)式 | uppercase}
-
number
語(yǔ)法：{{表達(dá)式 | number}}
{{表達(dá)式 | number:小數(shù)位數(shù)}} -
currency
{{表達(dá)式 | currency}}
{{表達(dá)式 | currency:'貨幣符號(hào)'}} -
date
{{表達(dá)式 | date }}
{{表達(dá)式 | date | "yyyy-MM-dd"}}
七鞭达、總結(jié)ng模塊中我們已經(jīng)用到的內(nèi)容
1.directive - 用在DOM元素上
ngApp/ngbind/nginit/ngcontroller/ngmodel/
2.service - 用在控制器的聲明里
$scope/$rootScope/$timerout/$interval/$http/$location
3.filter - 把model中的數(shù)據(jù)在顯示時(shí)以某種特定的格式來呈現(xiàn)
八、單頁(yè)應(yīng)用
angularjs提供的模塊---ngroute
- 概念
route: 路由 通過某條線路找到目標(biāo)內(nèi)容
ngroute 模塊的目標(biāo)： 就是根據(jù)瀏覽器中url中的一個(gè)特殊的地址標(biāo)記皇忿，查找到該標(biāo)記所對(duì)應(yīng)的模板頁(yè)面畴蹭，并異步加載到ngview
2.使用步驟
-
創(chuàng)建唯一完整的HTML頁(yè)面，其中聲明一個(gè)容器鳍烁，ngview指令叨襟。引入angular.js angular-routejs
<div ng-view></div>
2）創(chuàng)建多個(gè)模板頁(yè)面(習(xí)慣上放在一個(gè)特別的目錄下，如tpl)
-
創(chuàng)建Module,聲明依賴于ng/ng-route兩個(gè)模板
var app = angular.module("module",["ng","ngRoute"]);
4）在Module中配置路由字典
app.config(function($routeProvider){
$routeProvider.when("/start",{
templateUrl:xxx,
controller:"" //此處聲明的控制器可供當(dāng)前目標(biāo)頁(yè)面所有元素使用
})
})
5）使用瀏覽器做測(cè)試
http:IP地址/index.html#/路由地址
3.ngroute中的頁(yè)面跳轉(zhuǎn)
通過超鏈接訪問 href="#/main"
通過js跳轉(zhuǎn) $location.path("/2")
舉例：
html:
<html>
<head>
<meta charset="utf-8">
<title>路由</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body ng-app="module">
<ul>
<li>
<a href="#/">page1</a>
<a href="#page2">page2</a>
</li>
</ul>
<div ng-view></div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="js/singlePage.js" type="text/javascript" charset="utf-8"></script>
</html>
//singlePage.js文件內(nèi)容
var module = angular.module("module",["ng","ngRoute"]);
module.config(function($routeProvider){
$routeProvider.when("/",{
templateUrl:"temp/page1.html",
controller:"pageControl",
}).when("/page2",{
templateUrl:"temp/page2.html",
})
})