angular簡介
- angular是一個框架婉弹，諸多類庫的集合睬魂，以數(shù)據(jù)和邏輯為核心；
MVC
- modal-view-controller 模型-視圖-控制器
- 模型：服務(wù)端專門處理后臺傳入的數(shù)據(jù)镀赌；一般指操作數(shù)據(jù)庫
- 控制器：將服務(wù)端處理好的數(shù)據(jù)傳給前端氯哮； 連接模型和視圖的橋梁；
- 視圖：將內(nèi)容商佛、數(shù)據(jù)呈現(xiàn)給喉钢；HTML展示
- 使用mvc框架，會更高效良姆，易于管理和高效
AngularJS應(yīng)用
- 在任意DOM元素上使用一個屬性 ng-app,就可以定義一個AngularJS的應(yīng)用肠虽；
- ng-app屬性所有的DOM元素所包含的所有子元素都屬于應(yīng)用的一部分；
- 引用了angular框架下玛追，會引入一個全局對象税课，angular；
- 在此對象下有若干對象痊剖，其中angular.module()可以實例化一個對象韩玩；
-
angular.module('App',[])兩個參數(shù)：- 1：模塊化名稱
- 2：依賴;[]暫時不依賴任何對象
- 控制器
App.controller()兩個參數(shù)- 1：名稱
- 2：依賴;
- 關(guān)于依賴，依賴的數(shù)組里陆馁，最后一個單元必須是一個函數(shù)
App.controller('DemoCtrl',[’$scope‘,function($scope){}])
- $scope 就是我們所需要的 M找颓；
angular的內(nèi)置指令
- ng-show 是通過 display：none 和 display：block來決定顯示和隱藏的
- ng-if 如果ng-if='false',那么在HTML中就沒有了這個DOM節(jié)點了；
- ng-class 值得類型可以是對象叮贩，并且此對象的屬性是真是存在的類樣式击狮，屬性值決定了此屬性是否應(yīng)用，true為應(yīng)用益老，false不應(yīng)用
ng-class={box:true,red:true}為應(yīng)用box這個類樣式 -
ng-include = “'aside.html'”;需要將aside.html用''包裹起來的帘不；- 瀏覽器端 JS不能夠讀取本地文件，因為瀏覽器JS是運行在客戶端的杨箭，出于安全考慮寞焙，是不允許讀取用戶磁盤文件的；
- ng-include是通過ajax發(fā)出請求，得到數(shù)據(jù)的捣郊；
- 表單禁用
disabled,只要屬性存在辽狈，不管是什么值，都表示禁用-
input type='text' disabled 或者disabled=''true/false呛牲；只要存在都是禁用 - 在angular中刮萌，
ng-disabled = 'true'表單禁用；ng-disabled = 'false'表單應(yīng)用
-
- 無值屬性:都可以進行設(shè)置屬性值娘扩；
- ng-disabled
- ng-readonly
- ng-checked
- ng-selected
- ng-src 和 ng-href ;如果在HTML中直接寫src=《path》着茸，雖然在解析完成后地址會加載，但是會先報錯琐旁；
Angular自定義指令
- angular是一個模塊實例
- .controller()來定義一個模塊
- .directive()來自定義屬性涮阔；
<p cls></p>
//自定義指令結(jié)構(gòu)
App.directive('cls',function(){
//return 回來是一個對象或者是函數(shù)，通常情況下都是對象
return {
//E : element DOM元素
//C: class
//M: mark:注釋
//A:attribute 屬性
restrict:"A",
replace:"true",//模板中的標簽會將HTML中的標簽進行替換
template:"<h1>這是通過自定義指令添加的內(nèi)容</h1>"灰殴，
}
})
AngualrJS 雙向數(shù)據(jù)綁定
通過表單元素添加 ng-model 屬性敬特；
ng-bind
-
花括號(使用《》代替)
- 《》是ng-bind的簡寫
<input type="text" ng-model='name'>//input可以直接獲取module中的$scope.name的值 <h1 ng-bind='name'></h1> <h2>《name》</h2> 只有表單元素才可以從視圖向模型傳送數(shù)據(jù)
AngularJS數(shù)據(jù)處理
-
ng-switch = "item"===ng-switch on = "item" - 閃爍問題處理，可以添加 ng-cloak指令
<h1 ng-cloak>《name》</h1>; - angular 的遍歷
<li ng-repeat='item in lists'>{{item}}</li>
//或者是
<li ng-repeat='item in lists'>
<span ng-bind='item'></span>
</li>
小知識點
- 觸發(fā)臟值檢測
scope.$digest();監(jiān)聽視圖中的數(shù)據(jù)改變牺陶；ng-click事件內(nèi)部中自動封裝了這個檢測伟阔，也可以手動添加； - form 表單有默認的submit事件掰伸，通過回車就可以觸發(fā)皱炉；。form中如果有action狮鸭，那么在submit之后合搅，action也會重新發(fā)送一次請求居扒，會刷新頁面蟆盐，所以钻洒，當使用submit提交數(shù)據(jù)時，可以將默認的action刪除廊谓；
<form ng-submit='show()'>
<h1>todos</h1>
<input class="new-todo" ng-model='msg' placeholder="What needs to be done?" autofocus>
</form>
//angularJS通過ng-model將V與M進行綁定；
//所以input中的value值就等于$scope.msg; 所以實際上$scope.msg = $('input').val();只不過這一步是AngularJS內(nèi)部做的麻削；
//所以`$scope.msg=""`就直接將input的val值置空了蒸痹；
- AngularJS 遍歷，獲取當前元素的index值
<ul class="todo-list">
<li ng-repeat="item in tabs ">//item可以獲取當前元素
<div class="view">
<input ng-click="change($index)" class="toggle" type="checkbox"> //$index 代表當前元素所對應(yīng)的index值
<label>《item.tab》</label>
<button class="destroy"></button>
</div>
</li>
</ul>
- 在angular中呛哟，涉及到通過判斷而決定某個樣式顯示或隱藏時叠荠，盡量通過 ng-class="{attr:flag}"來決定，不用再在js中進行if判斷了扫责；
作用域
- 根作用于
ng-app="App"所處的作用域
過濾器
- 在AngularJS中使用過濾器格式化展示數(shù)據(jù)榛鼎，在“《》”中使用"|"來調(diào)用過濾器，使用“：”傳遞參數(shù)；
- 價格過濾器
《price|currency:'￥'：1》;冒號后面是傳參數(shù)者娱，多個參數(shù)多個冒號鏈接抡笼，：1表示表劉一個小數(shù)； - 時間過濾器
《now | date:"yyyy-MM-dd hh:mm:ss"》 - 控制排序方向
《list | orderBy:"score":"true"》true為反向排序黄鳍，false為正向排序推姻，默認為false； - 常用內(nèi)置過濾器
依賴注入
- 采用 ‘注入’ 的方式可以解決開發(fā)過程中的依賴的關(guān)系框沟，成為依賴注入藏古；
- 一般 注入是通過 ‘參數(shù)’ 的形式實現(xiàn)的；
-
$http同$scope一樣忍燥，也是AngularJS內(nèi)置的功能拧晕。可以提供發(fā)送異步請求的功能灾前；
服務(wù)（重點）
-
$AngularJS內(nèi)置的服務(wù)防症；ng-AngularJS 內(nèi)置的指令； - 常見的內(nèi)置服務(wù)：需要在依賴中寫入哎甲，然后才可以使用
- $scope
- $interval
- $timeout
- $log
- $http
$log 服務(wù) 調(diào)試信息的輸出
$log.error('這是一個錯誤');
$log.warn('這個一個警告');
$log.log('這是一個console.log');
$log.debug('這是一個調(diào)試');
$log.info('這是一個普通內(nèi)容');
$timeout和 $interval
- $timeout 服務(wù)蔫敲，延時顯示數(shù)據(jù)，$interval 服務(wù)：計時器
App.controller('DemoCtrl',['$timeout','$log','$interval',function ($timeout,$log,$interval) {
//$timeout是一個函數(shù)
//延時3秒后顯示內(nèi)容;
$timeout(function () {
$log.info('我哈哈哈,我等了3秒')
},3000);
var i = 0;
$interval(function () {
$log.info(i++);
},1000)
}])
$http 專門發(fā)起異步請求
- 2炭玫、在PHP中 $_POST 是專門接收 formData格式數(shù)據(jù)的奈嘿，即“Content-Type:application/x-www-form-urlencoded”; 但是不能接收 Content-Type：application/json;
- 3、當headers為“Content-Type:application/x-www-form-urlencoded”時吞加，上傳的data格式為
data:"name=itcast&age=11"; - 4裙犹、當headers為
“Content-Type:application/json”時，傳遞的參數(shù)格式為：data:{"name":"itcast","name":18};
AngularJS $http總結(jié)
- $http發(fā)送請求的方式有3種：method：“get”/"post"/'jsonp';
- 參數(shù)的傳遞方式為：params:
get方式請求
- "get"方式發(fā)送請求時衔憨，正常發(fā)送叶圃；參數(shù)以params:{name:'lisi',age:18}發(fā)送;
- 不管以什么方式傳遞參數(shù)，內(nèi)部都會轉(zhuǎn)換成 践图？name=lisi&age=18的形式
- 在PHP中將傳入的參數(shù)以json對象的形式輸出
$http({
url:'./example.php',
method:'get',
params:{name:'lisi',age:18},
}).success(function (data) {
console.log(data);
})
//在PHP中代碼：
$name = $_GET['name'];
$age = $_GET['age'];
$array = ['name'=>$name,'age'=>$age];
//var_dump($array);
//將傳遞的參數(shù)放到數(shù)組中,并將數(shù)組轉(zhuǎn)換成json對象格式進行輸出;
echo json_encode($array);
//結(jié)果為：{name: "lisi", age: "18"}
post方式請求
- “post”請求掺冠，需要注意兩點
設(shè)置請求頭：headers:“Content-Type:application/x-www-form-urlencoded”；
-
參數(shù)以data傳遞form data码党，data：“name=lisi&age=17”德崭；請求頭與參數(shù)必須保持一致；
//post請求 $http({ url: './example.php', method: 'post', data: 'name=lisi&age=17', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (data) { console.log(data); })
JSONP 的原理
前端傳遞一個實現(xiàn)定義好的函數(shù)名揖盘，給服務(wù)端眉厨，然后服務(wù)端接收這個函數(shù)名并拼湊一個“（）”，并返回兽狭，前端就接收到了 這個函數(shù)的調(diào)用憾股；
在jQuery中鹿蜀，我們不寫callback的明細，ajax會自動幫我們生成一個荔燎，jQuery+序列號+時間戳等耻姥；但是在angularJS中，他們有幫我們封裝有咨，所以必須手動加上琐簇；
$http({
url:'./example.php',
method:'jsonp',
params:{
//callback必須用'JSON_CALLBACK'進行占位，后端返回回調(diào)函數(shù)：angular.callbacks._0(lisi)座享；這個回調(diào)函數(shù)的結(jié)果就是success時的data數(shù)據(jù)婉商；
callback:'JSON_CALLBACK',
name:'lisi',
age:17
}
}).success(function (data) {
console.log(data);
})
自定義服務(wù)，$service和$factory
- App.controller(); 內(nèi)置控制器
- App.directive(); 內(nèi)置指令
- App.filter(); 內(nèi)置過濾器
- App.factory(); 內(nèi)置服務(wù)
- App.service(); 內(nèi)置服務(wù)
- App.config(); 配置塊
- App.run(); 運行塊
配置塊和運行塊
- App.config():一個參數(shù)渣叛，為數(shù)組丈秩；[]；App.config([]);
App.config(['$logProvider','$filterProvider',function ($logProvider,$filterProvider) {
//通過$logProvider對$log進行配置;
$logProvider.debugEnabled(false);
$filterProvider.register('capitalize',function () {
return function (input) {
return (input[0].toUpperCase() + input.slice(1));
}
})
}]);
//這樣在配置好之后淳衙，在HTML中就可以直接使用‘capitalize’服務(wù)了
<p ng-controller='DemoCtrl'> 《name | capitalize》</p>
運行塊
- $rootScope: AngularJS的根作用域蘑秽，可定于全局變量
App.run(['$rootScope',function ($rootScope) {
$rootScope.name = '順治';
}])
//這個name在此文件中的任何一個控制器中都可以使用；
路由
- 路由是URL地址與程序的映射關(guān)系箫攀；通過調(diào)整地址的變化肠牲，可以‘調(diào)用或執(zhí)行’ 某一具體的程序；
- SPA：single page application 單頁面展示所有功能靴跛；
- 多頁面最明顯的一個缺點就是每次更新頁面都要進行刷新缀雳，不能得到很好的用戶體驗；
- AngularJS的路由是建立在單頁面的基礎(chǔ)之上的梢睛；
-
onhashchange:檢測地址欄中地址的變化肥印，綁在window上的 - PHP中：
file_get_contents('./views/'.$hash.'.html');獲取文件中的內(nèi)容 - 錨鏈接就是點斷的路由，就是地址與程序的映射關(guān)系绝葡；
路由的配置
- 路由經(jīng)過設(shè)置才能使用
- 模塊需要依賴路由
var Music = angular.module('Music',['ngRoute']);
<nav>
//錨點中有參數(shù)的時候深碱，不會影響到路由；?
<a href="#!/login?name=小明">登錄</a> //地址必須寫成 #藏畅！/的形式
<a href="#!/register">注冊</a>
</nav>
<!-- ng-view 是一個占位符-->
<div ng-view></div>
var App = angular.module('App',['ngRoute']);
//路由是需要配置才能使用;
App.config(['$routeProvider',function ($routeProvider) {
//兩個參數(shù)path 和 route
//第一個參數(shù):路由
//第二個參數(shù)是路由的配置
$routeProvider.when('/register',{
//template:"<h1>首頁</h1>",簡單的內(nèi)容
templateUrl:'./views/register.html' //可以引入URL地址
//為當前視圖文件分配控制器;
controller:'RegisterCtrl',
}).when('/login',{
//template:"<h1>登錄</h1>",
templateUrl:'./views/login.html'
}).otherwise({
//如果都不符合,可以設(shè)置默認值
redirectTo:'/register'
})
}])
App.controller('RegisterCtrl',['$scope',function ($scope) {
$scope.title = '注冊';
}])
//然后在register.html頁面中就可以直接進行數(shù)據(jù)綁定 <h1>《title》</h1>;
可以使用路由敷硅，也就是說開發(fā)者可以根據(jù)地址的變化執(zhí)行不同的業(yè)務(wù)邏輯；路由需要 配置 后才能被使用墓赴；
使用when方法監(jiān)聽地址的變化竞膳，然后處理相應(yīng)的邏輯航瞭；
-
參數(shù)傳遞可以有兩種方式诫硕，一種方式是通過地址傳參：
地址傳參：其格式為?key1=val&key2=val2;.when('/login?name=lisi&age=17')
通過路由傳參: 路由/:參數(shù)名
！？睢章办！注意：地址的格式（/login/:name/:pass）必須與路由的格式（#!/login/小明/12345）完全保持一致，一一對應(yīng)；
<a href="#!/login/小明/12345">登錄</a> .when('/login/:name/:pass',{ //template:"<h1>登錄</h1>", templateUrl:'./views/login.html' })- 獲取路由中傳遞的參數(shù)
var parameter = $routeParams;
