AngularJS簡介：AngularJS 是一個為動態(tài)WEB應(yīng)用設(shè)計的結(jié)構(gòu)框架饵筑，提供給大家一種新的開發(fā)應(yīng)用方式腰湾，這種方式可以讓你擴展HTML的語法雷恃，以彌補在構(gòu)建動態(tài)WEB應(yīng)用時靜態(tài)文本的不足，從而在web應(yīng)用程序中使用HTML聲明動態(tài)內(nèi)容费坊。
AngularJS有五個主要核心特性倒槐，如下介紹：
雙向數(shù)據(jù)綁定—— 實現(xiàn)了把model與view完全綁定在一起，model變化附井，view也變化讨越，反之亦然。
模板—— 在AngularJS中永毅，模板相當于HTML文件被瀏覽器解析到DOM中把跨，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當做DOM來操作沼死，去生成一些指令來完成對view的數(shù)據(jù)綁定节猿。
MVVM—— 吸收了傳統(tǒng)的MVC設(shè)計模式針但又并不執(zhí)行傳統(tǒng)意義上的MVC，更接近于MVVM(Moodel-View-ViewModel)漫雕。
依賴注入—— AngularJS擁有內(nèi)建的依賴注入子系統(tǒng)滨嘱，可以幫助開發(fā)人員更容易的開發(fā)，理解和測試應(yīng)用浸间。
指令—— 可以用來創(chuàng)建自定義的標簽太雨，也可以用來裝飾元素或者操作DOM屬性
ionic簡介： ionic是一個強大的_混合式/hybrid_HTML5移動開發(fā)框架，特點是使用標準的HTML魁蒜、 CSS和JavaScript囊扳，開發(fā)跨平臺（目前支持：Android、iOS兜看，計劃支持：Windows Phone锥咸、Firefox OS） 的原生App應(yīng)用。
ionic主要包括三個部分：
CSS框架- 提供原生_App質(zhì)感的CSS樣式模擬_细移。ionic這部分的實現(xiàn)使用了ionicons圖標樣式庫搏予。
JavaScript框架- ionic基于AngularJS基礎(chǔ)框架開發(fā)，遵循AngularJS的框架約束弧轧；主要提供了適應(yīng)移動端UI的 AngularJS的擴展雪侥，主要包括指令和服務(wù)碗殷。此外，ionic使用AngularUI Router來實現(xiàn)前端路由速缨。
命令行/CLI- 命令行工具集用來簡化應(yīng)用的開發(fā)锌妻、構(gòu)造和仿真運行。ionic命令行工具使用了 Cordova旬牲，依賴于平臺SDK（Android & iOS）實現(xiàn)將移動web項目打包成原生app仿粹。
由于ionic使用了HTML5和CSS3的一些新規(guī)范，所以要求iOS7+/Android4.1+原茅。 在低于這些版本的手機上使用ionic開發(fā)的應(yīng)用吭历，有時會發(fā)生莫名其妙的問題。
安裝ionic/Install Ionic
首先您需要安裝Node.js. 其次, 安裝最新版本的cordova 和 ioniccommand-line tools. 通過參考Android和iOS官方文檔來安裝.
npm install -g cordova ionic
通過Ionic創(chuàng)建一個項目
使用Ionic官方提供的現(xiàn)成的應(yīng)用程序模板员咽，或一個空白的項目創(chuàng)建一個Ionic應(yīng)用毒涧。
ionic start myApp blank ?創(chuàng)建一個空白的app項目 （下圖1）
ionic start myApp tabs 創(chuàng)建一個帶有tabs項目（下圖2）
ionic start myApp sidemenu 創(chuàng)建一個帶有滑動的項目（下圖3）
我現(xiàn)在創(chuàng)建一個空白的項目 ionic start myApp blank
然后我們看到有myApp項目生成。如下目錄
然后我們用瀏覽器打開index就可以看的如下圖的東西了贝室。
接著下一步契讲，我們用編輯器打開index.html。觀察里面所引入的文件滑频，我的習(xí)慣把跟項目無關(guān)的文件刪除了捡偏。你可以不刪除，我也改動了部分文件的位置峡迷，之所以叫你觀察里面引入的文件银伟，就是怕你刪錯了，項目啟動不了绘搞。改動完結(jié)構(gòu)如下：
其中配置文件彤避，controller，driectives夯辖，filter,services,文件都是我新建的琉预。
下面先從app.js說起
這個myApp需要在根節(jié)點啟動。一個項目建議一個這樣的模塊蒿褂。
上述路由config配置是基于ui-router,因為在index.html已經(jīng)引入了ionic.bundle.min.js文件圆米，這個文件把angular.js和ui-router及ionic所需的組件都幫我們打包好了，所以引用很方便啄栓。
打開這個ionic.bundle.min.js看一下就知道合成了什么東西了娄帖，如圖：
把6個文件包合成一個了，你可以分別百度看看各是什么包昙楚，留給你們思考近速。
$stateProvider.state(name, {
? ? url: '',
? ?templateUrl:'', // 這個是模板位置
? ?controller: '' // 這個是對應(yīng)模板的controller名稱！記住是名稱不是位置
});
上述是ui-router的基本用法，詳情用法可以去查看官方文檔数焊。
app.js配置完永淌，下面就配置controller
剛才我們配置完了app.js崎场，我們要新建一個名字叫homeCtrl的controller佩耳。命名我建議XXXCtrl或者XXXController，當然以你們項目為標準谭跨。
采用閉包的模式創(chuàng)建controller干厚，為了保險防止不必要變量污染的錯誤。其中
angular.module('myApp') 就是載入剛才創(chuàng)建的模塊螃宙，然后設(shè)置一個叫做homeCtrl的controller蛮瞄，
格式一般都是angular.module('myApp').controller(name, [params, function(params) {}])。
創(chuàng)建完成homeCtrl之后呢谆扎，在index.html中引用挂捅，如下圖：
好了，我們根據(jù)剛才配置的路由創(chuàng)建完了controller堂湖，現(xiàn)在就差模板了闲先。
創(chuàng)建home模板
在剛才創(chuàng)建文檔template文件夾當中，新建一個home.html无蜂。也就是剛才配置app.js中的路由中寫的路徑和名字伺糠，忘記的回頭看看app.js是怎樣寫的。在剛才創(chuàng)建的home.html斥季，寫上以上內(nèi)容
如下圖：
在項目中我們這樣寫著训桶，凡是帶有<ion-xxx></ion-xxx>都是ionic框架自帶的。這是一個指令酣倾，如果你還不明白指令什么意思舵揭，沒關(guān)系。你就當做一個帶有某些功能的自定義標簽躁锡。
創(chuàng)建home.html模板和homeCtrl.js之后午绳。我們試著啟動，在瀏覽器中打開index.html這個文件稚铣，這個文件作為一個項目的入口箱叁。ion-view就是這個頁面的頂層，所有內(nèi)容都在這個view中惕医，ion-header就是那個頭部耕漱，ion-content就是內(nèi)容。這些都不是必須的抬伺，但是我建議這樣寫螟够，因為ionic有些組件是需要在這些標簽里面才能起作用的。然后看到如下圖：
當看到頁面和控制臺都出現(xiàn)“hello world”文字，證明我們成功了妓笙，項目啟動成功若河。
創(chuàng)建app.js和html模板及homeCtrl模板總結(jié)
其實我們寫項目的思路：舉剛才那個例子
1、創(chuàng)建一個app.js寞宫，首先能啟動項目萧福，然后配置路由。其中路由需要模板和controller那么問題來了辈赋，接著看2鲫忍、3、步钥屈。
2悟民、然后創(chuàng)建模板，XXX.html模板篷就。
3射亏、最后創(chuàng)建XXXCtrl.js的controller。
編寫控制器與模板
下面來點有意思的吧竭业，先來個輪播圖智润。那就用ionic框架自帶的吧，具體查文檔即可永品，如下圖：
刷新瀏覽器如下圖：
好了做鹰，這證明我們成功了，可以滑動鼎姐，可以自帶切換钾麸。其實還有很多功能，可以查閱文檔嘗試炕桨。一般由于手機網(wǎng)站banner都是從后臺讀取數(shù)據(jù)的饭尝，那么我們來改寫。在controller獲取數(shù)據(jù)献宫，然后賦值給$scope變量钥平，由于頁面和對應(yīng)controller的$scope有關(guān)聯(lián)，所以對應(yīng)頁面上的屬性也會變好姊途，是不是還是不太明白涉瘾，那么來看代碼吧。homeCtrl如下:
我們把代碼改成
1捷兰、ng-repeat="item in views.slideData track by $index"立叛，意思就是從$scope.views.slideData數(shù)組遍歷，item是數(shù)組里面的某一項贡茅，track by $index其實是性能優(yōu)化秘蛇，后續(xù)會講其做，你也可以不寫直接ng-repeat="item in views.slideData"
2、之前由<img src="路徑"> 這種變成 ?<img ng-src="{{item}}",其中ng-src是一個angular自帶的指令赁还，item是數(shù)組遍歷出來的路徑
從服務(wù)器獲取數(shù)據(jù)
啰嗦的話不說了妖泄，直接上案例。如圖：
既然要數(shù)據(jù)蹈胡，那么先建一個服務(wù)，使用 angular.module 的 factory API創(chuàng)建服務(wù)柬焕，是最常見也是最靈活的方式审残。其實還有幾種
factory()
service()
constant()
value()
provider()
梭域，具體詳情查文檔斑举，不過多數(shù)項目用這種（factory）創(chuàng)建方法就滿足需求了。舉個簡單例子
factory() 方法是創(chuàng)建和配置服務(wù)的最快捷方式病涨。 factory() 函數(shù)可以接受兩個參數(shù)富玷。
name （字符串）
需要注冊的服務(wù)名。
getFn （函數(shù)）
這個函數(shù)會在AngularJS創(chuàng)建服務(wù)實例時被調(diào)用既穆。
angular.module('myApp')
? ?.factory('myService', function() {
? ? ? ?return {
? ? ? ? ? ?'username': 'auser'
? ? ? ?};
? ?});
要上我們真實的示例代碼了哦赎懦，如下圖：
有同學(xué)覺得奇怪了幻工，怎么會是app.factory呢励两？其實app就是angular.module('myApp',[])，我在app.js文件里面把angular.module('myApp'囊颅，[])賦值給全局變量app了当悔。見下圖：
我們建好了servers。在index.html里面引入哦：
好踢代！創(chuàng)建好servers.js盲憎，還有在index中引入。那么怎么在controller中調(diào)用呢胳挎？那我們來看看改寫后的controller饼疙，如圖：
我們創(chuàng)建services到調(diào)用services里面的ajax請求都成功了，如何在homeCtrl中獲取數(shù)據(jù)呢慕爬？
那就先從services改寫開始,如下圖：
homeCtrl怎么獲取數(shù)據(jù)窑眯？看下圖：
調(diào)用myFactory.getList()方法為什么后面還跟著一個then的。其實我們使用內(nèi)置的 $http 服務(wù)直接同外部進行通信医窿。 $http 服務(wù)只是簡單的封裝了瀏覽器原生的 XMLHttpRequest 對象磅甩。$http 服務(wù)是只能接受一個參數(shù)的函數(shù)，這個參數(shù)是一個對象留搔，包含了用來生成HTTP請求的配置內(nèi)容更胖。這個函數(shù)返回一個promise對象， 由于 $http 方法返回一個promise對象，我們可以在響應(yīng)返回時用 then 方法來處理回調(diào)却妨。如果使用 then 方法饵逐，會得到一個特殊的參數(shù)，它代表了相應(yīng)對象的成功或失敗信息彪标，還可以接受兩個可選的函數(shù)作為參數(shù)倍权。或者可以使用 success 和 error 回調(diào)代替捞烟，至于promise對象是什么薄声，這里就不一一敘述了，寫起來篇幅比較大题画，還是留給你們查文檔吧默辨。
promise.then(function(resp){
// resp是一個響應(yīng)對象
}, function(resp) {
// 帶有錯誤信息的resp
});
// 或者使用success/error方法
promise.success(function(data, status, headers, config){
// 處理成功的響應(yīng)
});
// 錯誤處理
promise.error(function(data, status, headers, config){
// 處理非成功的響應(yīng)
});
然后看看控制臺輸出什么，還是看圖：
OK!大功告成苍息，我們可以把這些數(shù)據(jù)綁定在$scope上缩幸，然后渲染到頁面。還是看圖：
總結(jié)：
1竞思、創(chuàng)建services并寫好里面的服務(wù)表谊，然后在index.html引入services。
2盖喷、homeCtrl中注入依賴services里面的factory服務(wù)爆办，調(diào)用里面的方法。
3课梳、在homeCtrl調(diào)用factory服務(wù)方法距辆，然后獲取數(shù)據(jù)瓶殃。再把數(shù)據(jù)賦值給$scope爱态。所以模板也能獲取$scope里面的數(shù)據(jù)，那么頁面數(shù)據(jù)就更新了孵滞。
編寫過濾器
上面已經(jīng)教會大家如何建立一個services服務(wù)獲取數(shù)據(jù)沾歪，但是有時候我們獲取數(shù)據(jù)回來的數(shù)據(jù)做進一步修改顯示在頁面漂彤，下面假如我們有一個需求，我想把姓名全部變成大寫灾搏。
1挫望、首先創(chuàng)建一個filter。
2狂窑、在index.html引入filter媳板。（這個不說了，請看上面services怎么引入的）
在home.html頁面中泉哈，姓名這樣寫蛉幸。
姓名：{{item.Name | toUpperCaseText}}
那么我現(xiàn)在想把城市變成小寫破讨，怎么弄？留給你們一個作業(yè)吧奕纫。
正如前面所見提陶，創(chuàng)建自定義過濾器非常容易。創(chuàng)建自定義過濾器需要將它放到自己的模塊中匹层。過濾器本質(zhì)上是一個會把我們輸入的內(nèi)容當作參數(shù)傳入進去的函數(shù)隙笆。上面只是一個簡單的例子，其實就是把數(shù)據(jù)獲取進來升筏，數(shù)據(jù)進來了撑柔，你想怎樣處理數(shù)據(jù)就怎樣處理。相當于你小時候您访，你騙你爸爸媽媽零用錢的時候铅忿，錢到你口袋了，至于錢怎么用了洋只，那是你自己的事辆沦。當你爸爸媽媽問你拿去干什么的時候，你告訴他了识虚，那就相當于把數(shù)據(jù)處理完渲染在頁面了。過濾器其實內(nèi)置有很多很好用的妒茬，需要的時候時不時的查看文檔就行了担锤。用法就是這么簡單。
過濾器總結(jié)
1乍钻、分析需求怎樣的數(shù)據(jù)在頁面肛循，查閱內(nèi)置過濾器是否滿足需求。
2银择、假如需求內(nèi)置過濾器不能滿足多糠，創(chuàng)建filter.js，編寫處理數(shù)據(jù)邏輯浩考。
3夹孔、在index.html引入過濾器。在需要用過濾器的加上“|”,例如：{{item.Name | toUpperCaseText}}
頁面之間傳遞數(shù)據(jù)
當我們寫完home.html頁面并且完成了homeCtrl析孽，及通過services獲取后臺服務(wù)器的數(shù)據(jù)搭伤，展示到頁面,證明我們成功了一個小項目的大部分。你可以想象袜瞬，一個項目都是獲取數(shù)據(jù)怜俐，展示數(shù)據(jù)（至于怎樣展示，點擊展示還是默認展示邓尤，這是交互性的東西）拍鲤，或者提交數(shù)據(jù)贴谎，提交數(shù)據(jù)本文并沒有說，但是我們已經(jīng)知道怎樣獲取了季稳，提交還困難么赴精。都是差不多的原理。自己翻閱文檔看看$http的方法就可以解決了绞幌。我們下面繼續(xù)實現(xiàn)一個需求蕾哟，點擊剛才的某一項列表，跳到詳情頁莲蜘。
新建一個詳情頁detail.html谭确，新建一個detailCtrl的控制器，并且配置詳情頁路由票渠。忘記了的可以看看前面新建home的步驟逐哈。（記得在index.html引入detailCtrl哦，否則會報下面的錯问顷，看圖）
下面展示路由配置及detail.html頁面和detailCtrl.js
我們配置完路由和新建detail的頁面及controller杜窄。我們實現(xiàn)點擊列表跳轉(zhuǎn)到detail頁面肠骆，并帶上數(shù)據(jù)。我再啰嗦一次塞耕，本文帶有<ion-xxx>都是ionic框架自帶的蚀腿，ion-view就是這個頁面的頂層，所有內(nèi)容都在這個view中扫外，ion-header就是那個頭部莉钙，ion-content就是內(nèi)容。這些都不是必須的筛谚，但是我建議這樣寫磁玉，因為ionic有些組件是需要在這些標簽里面才能起作用的。
那我們點擊列表
思路就是ng-click="views.goDetail(item)"; views.goDetail就是跳轉(zhuǎn)到detail頁面驾讲，跳轉(zhuǎn)路由使用$state.go("XXX");XXX代表路由的名稱蚊伞，item就是你點擊某一項的數(shù)據(jù)，看圖：
我們點擊列表的時候既可以蝎毡，可以看到console把item的內(nèi)容打印出來厚柳。
現(xiàn)在需求要實現(xiàn)下面的詳情圖。
如何實現(xiàn)從A頁面==》B頁面沐兵，并且把A頁面的數(shù)據(jù)帶到B頁面别垮。下面來探討angular頁面之間的傳遞數(shù)據(jù)方式。下面講5種方法扎谎，可能有更多碳想，但是我選常用的講烧董。
1、可以用$rootScope頂級作用域胧奔，從A頁面賦值給$rootScope的某個屬性逊移，然后B頁面獲取數(shù)據(jù)賦值到頁面。
結(jié)果龙填，如大家所愿詳情頁能實現(xiàn)剛才的效果了胳泉。
2、在A頁面用$state.go("xxx", {obj});配置路由參數(shù)岩遗，然后在B頁面用$stateParams對象獲取url的參數(shù)扇商。
使用這個方法從home頁面?zhèn)鬟f過來的url
3宿礁、在services里面建立一個服務(wù)案铺，在A頁面把數(shù)據(jù)傳遞給這個服務(wù)，然后在B頁面獲取這個服務(wù)的值梆靖。為什么可以這樣做控汉？因為services服務(wù)里面的方法是共享的，當項目初始化的時候services已經(jīng)實例化了一次（服務(wù)是一個單例對象返吻，在每個應(yīng)用中只會被實例化一次（被 $injector 實例化）姑子，并且是延遲加載的（需要時才會被創(chuàng)建）），所以不存在跳轉(zhuǎn)頁面就數(shù)據(jù)沒了思喊。（這個是最佳實踐哦壁酬，不過也要看業(yè)務(wù)場景。這個是我最常用的）恨课。
頁面之間的傳遞數(shù)據(jù)，以上是常用的3種岳服。下面介紹沒那么常用的：
利用localStorage剂公、sessionStorage、cookie在A頁面中存值吊宋，然后在B頁面中獲取值纲辽，這3個都是可以存儲數(shù)據(jù)。他們之間的區(qū)別你們查文檔吧璃搜，哈哈哈~~~~ 留給你們思考拖吼。
數(shù)據(jù)綁定
數(shù)據(jù)綁定，從剛一開始從服務(wù)獲取數(shù)據(jù)这吻，然后把數(shù)據(jù)綁定到$scope上吊档，然后在頁面輸入{{}}花括號輸出，這種就是數(shù)據(jù)綁定了唾糯。那我們來個假設(shè)怠硼，現(xiàn)在有個輸入框鬼贱，輸入框是多少，列表中的那個人的年齡是多少香璃。
由于這個需求这难，就是雙向數(shù)據(jù)綁定，可以ng-model用綁定一個變量葡秒，這個變量賦值給年齡姻乓，那么年齡也跟著變了∶心粒看下圖：
好啦好啦蹋岩，初始化做完了。下面呢炸站，我們在input輸入框值星澳，改變一下input框里面的值，看看有什么變化旱易。
改變了
輸入框里面的值改變了禁偎，上面的年齡值也改變了。證明$scope.views.age的值改變了阀坏，這些就是數(shù)據(jù)綁定了如暖。
數(shù)據(jù)綁定總結(jié)
當AngularJS認為某個值可能發(fā)生變化時，它會運行自己的事件循環(huán)來檢查這個值是否變“臟”忌堂。如果該值從上次事件循環(huán)運行之后發(fā)生了變化盒至，則該值被認為是“臟”值。這也是Angular可以跟蹤和響應(yīng)應(yīng)用變化的方式士修。這個事件循環(huán)會調(diào)用$digest()循環(huán)（這個你們查查文檔就能知道了）枷遂。這個過程被稱作臟檢查（dirty checking）。臟檢查是檢查數(shù)據(jù)模型變化的有效手段棋嘲。當有潛在的變化存在時酒唉，AngularJS會在事件循環(huán)時執(zhí)行臟檢查（查閱文檔）來保證數(shù)據(jù)的一致性。
源碼：百度網(wǎng)盤 http://pan.baidu.com/s/1i59P1cD
假如你打開了源碼沸移。我寫得比較丑別笑話我痪伦，里面或許有一些錯誤，望指正雹锣，假如我有空可以交流一下网沾。
假如你看到源碼會報這些錯，第一個錯是因為我并沒有引入cordova進去蕊爵，第2/3/4報錯是因為css源碼的字體丟失了辉哥。（問題在home頁的輪播的小圈圈，其實你可以寫樣式把它干掉在辆，問題即可解決）
