title: Angular
tags:
- Angular
- JS
Angular
簡(jiǎn)介
- 一款非常優(yōu)秀的前端高級(jí) JS 框架
- 最早由Misko Hevery等人創(chuàng)建
- 09被Google收購(gòu)
- 可以輕松構(gòu)建 SPA 應(yīng)用程序
- 其核心就是通過指令擴(kuò)展HTML,通過表達(dá)式綁定數(shù)據(jù)到HTML
SPA
- single page application 單頁(yè)應(yīng)用程序
//根據(jù)url中錨點(diǎn)值的變化洋幻，動(dòng)態(tài)的請(qǐng)求不同的數(shù)據(jù)
<a href="#find"></a>
window.addEventListener("hashchange",function(){
//hashchange監(jiān)聽url中錨點(diǎn)值變化的事件
var hash= location.hash;
//location.hash, location.href
switch(hash){
case '#find':
$.get('find.json',function(data){
console.log(data);
},'json');
break;
case:...;
}
})
指令
- 指令:在angular中以ng-開頭的html標(biāo)簽屬性
- ng-app: 選擇angular去管理哪一部分的html代碼, 管理的是ng-app所在元素的子元素及其本身
- ng-model: 指定一個(gè)屬性值盅抚，這個(gè)屬性就表示當(dāng)前的value值,只能用在input中和select中
- ng-init: 可以對(duì)數(shù)據(jù)進(jìn)行初始化操作，給一個(gè)默認(rèn)值
- ng-click: 注冊(cè)點(diǎn)擊事件
<!-- 約定ng-app -->
<body ng-app>
<!-- 獲取值ng-model -->
<input type="text" ng-model="val">
<!-- 添加點(diǎn)擊事件ng-click -->
<input type="text" value="+1" ng-click="myVal-0+1">
<div>{{val}}</div>
<!-- 初始化ng-init -->
<div ng-init="val=1"></div>
</body>
<!-- 引包 -->
<script src="./libs/angular.js"></script>
模塊
- 創(chuàng)建模塊
var app = angular.module('模塊名',[]) - 如果不依賴其他模塊甸陌，也需要提供一個(gè)空的數(shù)組
- 需要在ng-app指令的屬性值上寫我們的模塊名
- 模塊的劃分方式
- 按照項(xiàng)目的功能去劃分模塊
- 按照項(xiàng)目中文件的類型去劃分模塊
控制器
- 創(chuàng)建控制器
app.controller('控制器的名字',function($scope){}) - 要在它所在標(biāo)簽或者父標(biāo)簽上加上ng-controller指令,ng-controller的值就是我們想要顯示的數(shù)據(jù)模型所在控制器的名字
雙向數(shù)據(jù)綁定
- 數(shù)據(jù)模型($scope.屬性)的改變，會(huì)影響內(nèi)容的顯示(文本框的值)
- 改變文本框的值寝蹈，對(duì)應(yīng)的數(shù)據(jù)模型發(fā)生了改變
<body ng-app="hello">
<input type="text" ng-model="name">
<span>{{name}}</span>
<input type="button" value="打印值" ng-click="getName()">
<input type="button" value="改變?yōu)樾〖t" ng-click="setName()">
<script src="./libs/angular.js"></script>
<script>
// 創(chuàng)建模塊
var app=angular.module('hello',[]);
// 創(chuàng)建控制器
app.controller('helloController',function($scope){
// 初始化數(shù)據(jù)模型
$scope.name="小明";
// 初始化行為模型
$scope.getName=function(){
console.log($scope.name)
};
$scope.setName=function(){
$scope.name="小紅"
}
})
</script>
</body>
MVC 思想
- M : Model: 存儲(chǔ)榆骚，獲取數(shù)據(jù)
- V : View 視圖，把數(shù)據(jù)呈現(xiàn)給用戶
- C : Controller 做一些控制和調(diào)度的操作
- MVC只是一種思想浪读，只是約定了我們代碼應(yīng)該如何去組織,讓我們代碼的每一部分都有一個(gè)明確的職責(zé),用利于后期的維護(hù)性
<body ng-app="app">
<!-- view 開始 -->
<table ng-controller="demoController">
<tr><td>用戶名: <input type="text" ng-model="username"></td></tr>
<tr><td>密碼: <input type="text" ng-model="userpwd"></td></tr>
<tr><td>用戶類型:
<select ng-model="type">
<option value="tmp01">學(xué)生</option>
<option value="tmp02">老師</option>
<option value="tmp03">校長(zhǎng)</option>
</select>
</td></tr>
<tr><td>注冊(cè)協(xié)議: <input type="checkbox" ng-model="isAgree"></td></tr>
<tr><td><input type="button" value="注冊(cè)" ng-click="register()"></td></tr>
<tr><td>{{msg}}</td></tr>
</table>
<!-- View 結(jié)束 -->
<script src="libs/angular.js"></script>
<script>
var app = angular.module('app',[])
// Controller 開始
app.controller('demoController',function($scope){
// 初化數(shù)據(jù)模型
$scope.username = '';
$scope.usertype = '';
$scope.userpwd = '';
$scope.isagree = false;
$scope.msg = ''
// 初始化行為模型
$scope.register = function(){
if($scope.userpwd.length<6){
$scope.msg='密碼太短,不安全!';
return
}
// 準(zhǔn)備存儲(chǔ)數(shù)據(jù)
// 調(diào)用用Model里的方法
var u = new User($scope.username,$scope.userpwd,$scope.type);
var result = u.save();
if(result){
$scope.msg = '注冊(cè)成功!'
}else{
$scope.msg = '注冊(cè)失斘袅瘛！'
}
}
})
// Controller 結(jié)束
// Model 開始
function User(name,pwd,type){
this.name = name;
this.pwd = pwd;
this.type = type
}
User.prototype.save = function(){
// 判斷用戶名是否存在
var str = localStorage.getItem('myusers')||'[]';
// 注意'[]'
var arr = JSON.parse(str);
for (var i = 0; i < arr.length; i++) {
if(arr[i].name===this.name){
return
}
}
arr.push({name:this.name,pwd:this.pwd,type:this.type});
localStorage.setItem('myusers',JSON.stringify(arr));
return true
}
</script>
</body>
Angular開發(fā)流程回顧
- 1.引包:引入angular.js文件
- 2.約定:加上ng-app指令碘橘，告訴angular要管理頁(yè)面哪一部分代碼
- 3.創(chuàng)建模塊:在js中創(chuàng)建模塊,給頁(yè)面中的ng-app指令一個(gè)值互订，這個(gè)值就是這個(gè)模塊的模塊名
- 4.創(chuàng)建控制器:在js中創(chuàng)建控制器,需要在頁(yè)面上加上ng-controller指令，指令的值為控制器的名字
- 5.建模,(數(shù)據(jù)模型,行為模型)根據(jù)頁(yè)面結(jié)構(gòu)蛹屿，抽象出具體的js對(duì)象.
- 6.初始化,通過$scope做一些初始化操作
- 7.通過
ng-model , ng-click , 插值表達(dá)式把$scope的屬性在頁(yè)面展示出來 - 8.在js寫一些具體的邏輯
augular.element (不推崇)
- (jqLite對(duì)象) 類似于jq,但是要求傳入的參數(shù)是一個(gè)原生的dom對(duì)象，而不是選擇器
$scope
- 視圖和控制器之間的數(shù)據(jù)橋梁,用于在視圖和控制器之間傳遞數(shù)據(jù),用來暴露數(shù)據(jù)模型（數(shù)據(jù)岩榆，行為）
正是因?yàn)?scope在Angular中大量使用甚至蓋過了C（控制器）的概念错负，所以很多人把Angular稱之為MVVM框架,$scope 實(shí)際上就是MVVM中所謂的VM（視圖模型）
控制器
傳統(tǒng)的方式創(chuàng)建控制器
// 創(chuàng)建控制器(1.2.x版本)
// angular會(huì)把全局的函數(shù)當(dāng)作控制器
function demoController($scope){
$scope.name = '小明'
}
面向?qū)ο蟮姆绞絼?chuàng)建控制器
<!-- 這里的obj 代表控制器中回調(diào)函數(shù)new 出的對(duì)象 -->
<div ng-controller="demoController as obj">
<p>{{myname}}</p>
<p>{{obj.name}}</p>
</div>
var app = angular.module('myApp', [])
// angular會(huì)把這二個(gè)參數(shù)當(dāng)作構(gòu)造函數(shù)使用
app.controller('demoController', function($scope){
$scope.myname='小紅'
this.name = '小明'
})
安全的方式創(chuàng)建控制器
- 為了避免壓縮后代碼無(wú)法運(yùn)行
// 把第二個(gè)參數(shù)改為一個(gè)數(shù)組,在數(shù)組把我們需要的參數(shù)的名字寫上
// 回調(diào)函數(shù)就寫在數(shù)組的最后一個(gè)元素上
// 數(shù)據(jù)中傳入的元素的順序,要和function的中順序一一對(duì)應(yīng)
app.controller('demoController',['$scope','$log',function($scope,$log){
$scope.msg = 'hello World!'
$log.log('哈哈哈哈坟瓢！')
//注意$log.log()
}])
// 注意是'$scope'
指令
ng-bind
<p ng-bind="msg"></p>
解決表達(dá)式閃爍問題,瀏覽器不會(huì)把標(biāo)簽的屬性顯示出來,angular會(huì)把ng-bind對(duì)應(yīng)的數(shù)據(jù)顯示到所在標(biāo)簽中間
ng-cloak
<div class="ng-cloak">{{msg}}</div>
也可以解決表達(dá)閃爍問題,注意ng-cloak是樣式,我們要先給ng-cloak設(shè)置display:none,angular在解析表達(dá)式之后會(huì)把頁(yè)面上的ng-cloak樣式移除,這樣ng-cloak對(duì)應(yīng)的樣式就不生效了
ng-repeat
- 能夠把一組數(shù)據(jù)直接渲染到頁(yè)面上,不需要我們拼接字符串
- ng-repeat="item in users",item對(duì)應(yīng)是遍歷users時(shí)的每一條數(shù)據(jù),users是我們要遍歷的數(shù)據(jù)(是一個(gè)數(shù)組)
<body ng-app="myApp">
<div ng-controller="demoController">
<ul>
<li ng-repeat="item in users" >
{{item.name}} {{item.age}}
</li>
</ul>
<ul>
<li ng-repeat="item in obj">
{{item.name}} {{item.age}}
</li>
</ul>
<ul>
<li ng-repeat="item in arr track by $index">
{{item}} {{$index}}
</li>
</ul>
</div>
<script src="libs/angular.js"></script>
<script>
var app = angular.module('myApp', [])
app.controller('demoController',['$scope',function($scope){
$scope.users = [
{name:'小明',age:18},
{name:'小紅',age:18},
{name:'小朋',age:28},
{name:'小月',age:19},
{name:'小黑',age:18},
{name:'小白',age:20}
]
$scope.obj = {
xm:{name:'小明',age:18},
xh:{name:'小紅',age:28},
xt:{name:'小天',age:10},
xy:{name:'小月',age:38}
}
$scope.arr = [1,2,3,4,5,1]
}])
// 注意:item in arr track by $index
</script>
</body>
- ng-repeat 在遍歷時(shí)會(huì)提供以下值:
- $odd : 為true時(shí)，表明當(dāng)前數(shù)據(jù)是否是第[奇]數(shù)條
- $even: 為true時(shí)犹撒，表明當(dāng)前數(shù)據(jù)是否是第[偶]數(shù)條
- $first: 為true時(shí)折联，表明當(dāng)前數(shù)據(jù)是否是第1條
- $last: 為true時(shí)，表明當(dāng)前數(shù)據(jù)是否是最后一條
- $middle: 為true時(shí)识颊，表明當(dāng)前數(shù)據(jù)是否是中間的數(shù)據(jù)
<li class="{{ $odd ?'red':'green'}}" ng-repeat="item in data">
{{item.name}},{{item.age}}
</li>
ng-class
- 動(dòng)態(tài)的添加class樣式,以對(duì)象的形式書寫诚镰，angular會(huì)把屬性值為true的屬性名當(dāng)作樣式添加到class
<!-- ng-class,動(dòng)態(tài)的添加class樣式,
以對(duì)象的形式書寫，angular會(huì)把屬性值為true的屬性名當(dāng)作樣式添加到class-->
<li ng-class="{red:item.age>=20, green:item.age>=10&&item.age<20,blue:item.age<10}" ng-repeat="item in data">
{{item.name}},{{item.age}}
</li>
<!-- 注意格式ng-class="{classname:true,classname2:true,...}" -->
ng-show/ng-hide
- ng-show,控制元素的顯示或隱藏,值為true時(shí)顯示祥款，為false隱藏,ng-hide作用是相反的(只是設(shè)置display:none來隱藏元素)
<body ng-app="myApp">
<div ng-controller="demoController">
<p ng-show="isShowing">hello</p>
<button ng-click="showOrHide()">顯示/隱藏</button>
</div>
<script src="libs/angular.js"></script>
<script>
var app = angular.module('myApp', [])
app.controller('demoController', ['$scope', function($scope){
$scope.isShowing= true;
$scope.showOrHide=function(){
$scope.isShowing = !$scope.isShowing
}
}])
</script>
</body>
ng-if
- 與ng-show用法一致,注意當(dāng)值為false時(shí),會(huì)將當(dāng)前dom元素移除
ng-switch
- 當(dāng)ng-switch-when對(duì)應(yīng)的值等于ng-switch對(duì)應(yīng)值時(shí)清笨，當(dāng)前dom元素就顯示
<body ng-app="myApp">
<div ng-controller="demoController">
<div ng-switch="name">
<div ng-switch-when="小明">
我是小明
</div>
</div>
</div>
<script src="libs/angular.js"></script>
<script>
var app = angular.module('myApp', [])
app.controller('demoController',['$scope', function($scope){
$scope.name = '小明'
}])
// 注意ng-switch-when
</script>
其他常用指令
- ng-model:雙向數(shù)據(jù)綁定
- ng-checked：?jiǎn)芜x/復(fù)選是否選中(單向數(shù)據(jù)綁定,界面操作不會(huì)影響數(shù)據(jù)模型的值)
- ng-selected：是否選中(單向數(shù)據(jù)綁定)
- ng-disabled：是否禁用
- ng-readonly：是否只讀
常用事件指令
- ng-blur：失去焦點(diǎn)
- ng-focus：獲得焦點(diǎn)
- ng-change：內(nèi)容改變
- ng-copy：復(fù)制
- ng-click: 單擊
- ng-dblclick：雙擊
- ng-submit：form表單提單
指令的其他使用方式
- 兼容H5,在使用angular指令時(shí),只需要在原先的指令前加上data-或x-,如:data-ng-app,x-ng-click
todomvc案例
todomvc功能分析
- 任務(wù)的展示
- 添加任務(wù)
- 刪除任務(wù)
- 修改任務(wù)內(nèi)容
- 切換任務(wù)完成與否的狀態(tài)
- 批量切換任務(wù)完成與否的狀態(tài)
- 顯示未完成的任務(wù)數(shù)
- 清除所有已完成任務(wù)
- 注意： 在循環(huán)刪除數(shù)組長(zhǎng)度，會(huì)導(dǎo)致循環(huán)條件改變刃跛，也會(huì)導(dǎo)致元素原來的索引改變
- 切換顯示不同狀態(tài)的任務(wù)
過濾器(filter)
- 格式化數(shù)據(jù)
- 過濾數(shù)據(jù)(filter)
- currency,date
<!-- 在數(shù)據(jù)模型后加上| 再加上過濾器的名字
也可以在過濾器名字后指定參數(shù)抠艾，參數(shù)是寫在冒號(hào)后面的-->
<p>{{money | currency : '￥'}}</p>
<p>{{myDate | date : 'yyyy年MM月dd日 HH:mm:ss'}}</p>
- lowercase 轉(zhuǎn)換成小寫,uppercase 轉(zhuǎn)換成大寫,number 四舍五入
- limitTo
<!-- limitTo第一個(gè)參數(shù)，表明顯示多少個(gè)字桨昙，第二個(gè)參數(shù)表示检号，從第幾個(gè)字開始顯示(索引從0開始) -->
<p>{{msg | limitTo : 5 : 2}}...</p>
- orderBy 及 json
<!-- json格式化顯示json數(shù)據(jù)，參數(shù)指定縮近的長(zhǎng)度 -->
<pre>{{myJson | json : 8}}</pre>
<!-- orderBy對(duì)數(shù)據(jù)進(jìn)行排序蛙酪，參數(shù)齐苛，給+號(hào)就按正序排，- 就按倒序排 -->
<span ng-repeat="item in arr | orderBy:'-'">{{item}},</span>
- 在js中使用過濾器
app.controller('filterController', ['$scope','$filter',function($scope,$filter){// $filter 需要在控制器的回調(diào)中傳入
$scope.money = 9998;
// 可以調(diào)用不同的過濾器得到相應(yīng)的結(jié)果
// 參數(shù)是一個(gè)過濾器的名字
// 返回值是一個(gè)方法
// 后面括號(hào)里的第一個(gè)參數(shù)是需要處理的數(shù)據(jù)
// 后面括號(hào)里的的第二個(gè)參數(shù)是當(dāng)前過濾器本身需要的參數(shù)
// $filter('過濾器名稱')(需要過濾的數(shù)據(jù),filter 參數(shù))
$scope.result = $filter('currency')($scope.money,'￥')
}])
- filter
數(shù)據(jù)模型 | filter : {key:value}
<body ng-app="filterApp" ng-controller="fitlerController">
<div>
<input type="text" ng-model="search">
<ul>
<li ng-repeat="item in todos | filter : {completed:true} ">
{{item.name}},{{item.completed}}
</li>
<!-- <li ng-repeat="item in todos | filter : search ">
{{item.name}},{{item.completed}}
</li> -->
</ul>
<!-- 如果指定一個(gè)布爾值桂塞，或者字符串就是全文匹配 -->
<!-- 數(shù)據(jù)精確過濾 參數(shù)：1凹蜂、scope的屬性，2藐俺、自定的字符串 3炊甲、自定的對(duì)象 {}-->
<!-- 會(huì)到對(duì)應(yīng)的todos中尋找，如果當(dāng)前元素有completed屬性且值 為true就會(huì)被顯示出來欲芹。（只會(huì)到completed屬性中尋找） -->
</div>
<script src="libs/angular.js"></script>
<script>
var app = angular.module('filterApp', [])
app.controller('fitlerController', ['$scope',function($scope){
$scope.search='';
$scope.todos = [
{id:1,name:'吃飯',completed:true},
{id:2,name:'睡覺吃飯',completed:true},
{id:3,name:'打豆豆',completed:false},
{id:4,name:'學(xué)習(xí)', completed:true},
{id:5,name:'喝水,true',completed:false}
]
}])
</script>
</body>
$watch 監(jiān)視數(shù)據(jù)模型的變化
<body ng-app="hello">
<div ng-controller="helloController">
<input type="text" ng-model="name">
<input type="text" ng-model="age">
<button>測(cè)試</button>
</div>
<script src="libs/angular.js"></script>
<script>
var app = angular.module('hello', [])
app.controller('helloController',['$scope',function($scope){
$scope.name = '小明'
$scope.age = 18
// $watch可以用來監(jiān)視數(shù)據(jù)模型的變化
// 第一個(gè)參數(shù): 數(shù)據(jù)模型對(duì)應(yīng)的名字(字符串形式)
// 第二個(gè)參數(shù): 相應(yīng)的數(shù)據(jù)模型變化就會(huì)調(diào)用這個(gè)函數(shù)
// 默認(rèn)會(huì)直接執(zhí)行一次回調(diào)函數(shù)
$scope.$watch('name',function(now,old){
// 第一個(gè)參數(shù)是變化后的值
// 第二個(gè)參數(shù)是變化前的值
console.log(now,old)
})
$scope.getAge = function(){
return $scope.age
}
// 也能夠監(jiān)視$scope.屬性中的方法的返回值
$scope.$watch('getAge()',function(now,old){
console.log(now,old)
})
// $watch監(jiān)視的是$scope的屬性卿啡，如果是一個(gè)普通變量是無(wú)法監(jiān)視的
// function getName(){
// return $scope.name
// }
// $scope.tmp = getName
// $scope.$watch('tmp()',function(now,old){
// console.log(now,old)
// })
}])
</script>
</body>
自定義屬性
<body ng-app="directiveApp">
<!-- 以屬性形式使用 -->
<!-- <div my-btn></div> -->
<!-- 以樣式名形式使用 -->
<!-- <div class="my-btn"></div> -->
<!-- 以自定義標(biāo)簽形式使用 -->
<my-btn mystyle="red">咦</my-btn>
<script id='tpl' type='text/ng-template'>
<div>
<!-- <p class="tmp"> 我是在模板里定義的p,沒有寫ng-transclude</p> -->
<p class="{{mystyle}}">hello</p>
<p ng-transclude>hey</p>
</div>
</script>
<script src="libs/angular.js"></script>
<script>
var app = angular.module('directiveApp', [])
// 創(chuàng)建自定義指令 directive
// 第一個(gè)參數(shù)：是指令的名字,必須是駝峰命名法,使用時(shí)把大寫改成小寫，在原來大寫前加上-
// 第二個(gè)參數(shù)：和控制器的第二個(gè)參數(shù)類似
app.directive('myBtn', [function(){
// 在這里直接return 一個(gè)對(duì)象就可以了
return {
// template:'hello'
// templateUrl:'template.html'
templateUrl:'tpl',
restrict:'ACE',
replace:true,
transclude: true,
scope:{
// tmp:'@mystyle',
mystyle:'@',
},
link:function(scope,element,attributes){
scope.msg="hello"
console.log(element)
element.on('click',function(){
alert('你點(diǎn)我了!')
})
console.log(attributes)
}
}
}])
//注意directive,type='text/ng-template',transclude
</script>
</body>
自定義指令中回調(diào)里返回的對(duì)象的屬性
template: 需要提供一個(gè)html字符串,會(huì)被添加到當(dāng)前頁(yè)面使用了自定義指令的位置
-
templateUrl:
- 需要提供一個(gè)html文件路徑菱父，angular會(huì)發(fā)請(qǐng)求颈娜，請(qǐng)求對(duì)應(yīng)的文件，把文件內(nèi)容作為模板插入到自定義指令中間
- 提供一個(gè)script標(biāo)簽的id, angular會(huì)把script標(biāo)簽中的內(nèi)容作為模板插入到自定義指令中間,注意要改變script標(biāo)簽的type="text/ng-template"
-
restrict: 需要提供一個(gè)字符串浙宜，限制自定義指令的使用形式
- A : Attribute 表示只能以屬性的形式使用
- C : Class 表示只能以類樣式名的形式使用
- E : Element 表示只能以自定義標(biāo)簽的形式使用
- ACE : 如果希望多種方式合適官辽，就把對(duì)應(yīng)值組合在一起
replace：需要提供一個(gè)布爾值，為true時(shí)粟瞬，模板會(huì)被用來替換自定義指令所在標(biāo)簽同仆，否則是插入到自定義指令中間
transclude: 需要一個(gè)布爾值, 為true時(shí)會(huì)將自定義標(biāo)簽中的內(nèi)容插入到模板中擁有ng-transclude指令的標(biāo)簽中間
-
scope：需要一個(gè)對(duì)象: 可以用來獲取自定義指令的屬性值,
- 給當(dāng)前對(duì)象添加一個(gè)屬性(如:tmp),屬性值以@開頭，后面跟上自定義指令的屬性名
然后就可以在模板中使用{{tmp}} 來得到對(duì)應(yīng)的屬性值,注意''-
scope: { tmp:'@mystyle'}{{tmp}} -
scope: { mystyle:'@'}{{mystyle}}
-
- 給當(dāng)前對(duì)象添加一個(gè)屬性(如:tmp),屬性值以@開頭，后面跟上自定義指令的屬性名
-
link: 需要一個(gè)function 這是function在angular解析到相應(yīng)指令時(shí)就會(huì)執(zhí)行一次,
- scope ：類似于$scope,只不過scope的屬性 只能在模板中使用
- element : 自定義指令所在標(biāo)簽對(duì)應(yīng)的對(duì)象(jqLite),指向模板最外層的對(duì)象,如果replace為treu,指向的就是自定義指令所在標(biāo)簽
- attributes : 包含了自定義指令所在標(biāo)簽的必有屬性
服務(wù)
- 創(chuàng)建服務(wù)
var app = angular.module('service',[])
// 第一個(gè)參數(shù)：服務(wù)的名字
// 第二個(gè)參數(shù)里的function:
// angular會(huì)把這個(gè)function當(dāng)作構(gòu)建函數(shù)裙品，angular會(huì)幫助我們new這個(gè)構(gòu)建函數(shù)俗批，然后得到一個(gè)對(duì)象
app.service('MyService', [function(){
this.name = '小明'
}])
- 使用服務(wù)
var app = angular.module('todosApp', ['service'])
app.controller('todosController',['MyService',function(MyService){
// 這個(gè)MyService就是俗或，對(duì)應(yīng)的'MyService'時(shí)的回調(diào)函數(shù)new出的對(duì)象
console.log(MyService)
}])
路由
- 根據(jù)url中不同的錨點(diǎn)值，在頁(yè)面顯示不同的內(nèi)容
路由使用
<body ng-app="myApp">
<div ng-view></div>
<script src="libs/angular.js"></script>
<script src="libs/angular-route.js"></script>
<script>
var app=angular.module('myApp',['ngRoute'])
//注意['ngRoute']
// $location.url()可以得到url中錨點(diǎn)值#后的部分
// 配置路由規(guī)則
app.config(['$routeProvider',function($routeProvider){
// 第一個(gè)參數(shù)：對(duì)應(yīng)的url中錨點(diǎn)值
// 當(dāng)angular檢測(cè)到url中錨點(diǎn)變?yōu)?a,就會(huì)把template對(duì)應(yīng)的內(nèi)容插入到頁(yè)面擁有ng-view指令的標(biāo)簽中
$routeProvider
.when('/a',{
template:'<div>{{msg}}</div>',
controller:'demoController'
// 指定一個(gè)控制器的名字,
// 當(dāng)前url中錨點(diǎn)值為/a時(shí)就會(huì)執(zhí)行控制器中的回調(diào)函數(shù)
// 我們可以直接在template/templateUrl對(duì)應(yīng)的模板中使用該控制器中對(duì)應(yīng)的$scope屬性值
})
.when('/b',{
template:'<div>hello</div>'
})
}])
app.controller('demoController',['$scope',function($scope){
$scope.msg="hi";
}])
</script>
</body>
路由參數(shù)
<body ng-app="myApp">
<div ng-view></div>
<script src="libs/angular.js"></script>
<script src="libs/angular-route.js"></script>
<script>
var app=angular.module('myApp',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/company/:myname?',{
//在原有規(guī)則中可以加冒號(hào):,:號(hào)后跟上一個(gè)名字(相當(dāng)于變量名岁忘，當(dāng)前位置可以寫成任意的值,但是必須要有) ?號(hào)表示當(dāng)前位置如果沒有值辛慰，也可以匹配到
template:'<div>{{msg}}</div>',
controller:'demoController'
})
.otherwise({redirectTo:'/company/a'})
// 當(dāng)不匹配when方法對(duì)應(yīng)的規(guī)則時(shí)，就會(huì)匹配otherwise對(duì)應(yīng)的規(guī)則
}])
app.controller('demoController',['$scope','$routeParams',function($scope,$routeParams){
$scope.data={
a:'hello',
b:'hi',
c:'hey'
};
$scope.msg=$scope.data[$routeParams.myname]
// 在控制器中可以通過$routeParams得到對(duì)應(yīng)的值
}])
</script>
</body>
