本文原創版權歸 簡書作者 嚕啦啦嚕啦啦嚕啦嚕啦嚕 所有，轉載請聯系作者獲得授權，並於文章開頭標注原創作者及出處，以示尊重！
文／嚕啦啦嚕啦啦嚕啦嚕啦嚕（簡書作者）
原文鏈接：http://www.jianshu.com/p/ea0dcf1d31c9
著作權歸作者所有，轉載請聯系作者獲得授權，並標注“簡書作者”。
AngularJS簡介：AngularJS 是一個為動態WEB應用設計的結構框架，提供給大家一種新的開發應用方式，這種方式可以讓你擴展HTML的語法，以彌補在構建動態WEB應用時靜態文本的不足，從而在web應用程序中使用HTML聲明動態內容。
AngularJS有五個主要核心特性，如下介紹：
雙向數據綁定—— 實現了把model與view完全綁定在一起，model變化，view也變化，反之亦然。
模板—— 在AngularJS中，模板相當於HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當做DOM來操作，去生成一些指令來完成對view的數據綁定。
MVVM—— 吸收了傳統的MVC設計模式針但又並不執行傳統意義上的MVC，更接近於MVVM(Moodel-View-ViewModel)。
依賴注入—— AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。
指令—— 可以用來創建自定義的標簽，也可以用來裝飾元素或者操作DOM屬性
ionic簡介： ionic是一個強大的_混合式/hybrid_HTML5移動開發框架，特點是使用標准的HTML、 CSS和JavaScript，開發跨平台（目前支持：Android、iOS，計划支持：Windows Phone、Firefox OS） 的原生App應用。
ionic主要包括三個部分：
CSS框架- 提供原生_App質感的CSS樣式模擬_。ionic這部分的實現使用了ionicons圖標樣式庫。
JavaScript框架- ionic基於AngularJS基礎框架開發，遵循AngularJS的框架約束；主要提供了適應移動端UI的 AngularJS的擴展，主要包括指令和服務。此外，ionic使用AngularUI Router來實現前端路由。
命令行/CLI- 命令行工具集用來簡化應用的開發、構造和仿真運行。ionic命令行工具使用了 Cordova，依賴於平台SDK（Android & iOS）實現將移動web項目打包成原生app。
由於ionic使用了HTML5和CSS3的一些新規范，所以要求iOS7+/Android4.1+。 在低於這些版本的手機上使用ionic開發的應用，有時會發生莫名其妙的問題。
安裝ionic/Install Ionic
首先您需要安裝Node.js. 其次, 安裝最新版本的cordova 和 ioniccommand-line tools. 通過參考Android和iOS官方文檔來安裝.
npm install -g cordova ionic
通過Ionic創建一個項目
使用Ionic官方提供的現成的應用程序模板，或一個空白的項目創建一個Ionic應用。
ionic start myApp blank 創建一個空白的app項目 （下圖1）
ionic start myApp tabs 創建一個帶有tabs項目（下圖2）
ionic start myApp sidemenu 創建一個帶有滑動的項目（下圖3）
我現在創建一個空白的項目 ionic start myApp blank
然后我們看到有myApp項目生成。如下目錄
然后我們用瀏覽器打開index就可以看的如下圖的東西了。
接着下一步，我們用編輯器打開index.html。觀察里面所引入的文件，我的習慣把跟項目無關的文件刪除了。你可以不刪除，我也改動了部分文件的位置，之所以叫你觀察里面引入的文件，就是怕你刪錯了，項目啟動不了。改動完結構如下：
其中配置文件，controller，driectives，filter,services,文件都是我新建的。
下面先從app.js說起
這個myApp需要在根節點啟動。一個項目建議一個這樣的模塊。
上述路由config配置是基於ui-router,因為在index.html已經引入了ionic.bundle.min.js文件，這個文件把angular.js和ui-router及ionic所需的組件都幫我們打包好了，所以引用很方便。
打開這個ionic.bundle.min.js看一下就知道合成了什么東西了，如圖：
把6個文件包合成一個了，你可以分別百度看看各是什么包，留給你們思考。
$stateProvider.state(name, {
url: '',
templateUrl:'', // 這個是模板位置
controller: '' // 這個是對應模板的controller名稱！記住是名稱不是位置
});
上述是ui-router的基本用法，詳情用法可以去查看官方文檔。
app.js配置完，下面就配置controller
剛才我們配置完了app.js，我們要新建一個名字叫homeCtrl的controller。命名我建議XXXCtrl或者XXXController，當然以你們項目為標准。
采用閉包的模式創建controller，為了保險防止不必要變量污染的錯誤。其中
angular.module('myApp') 就是載入剛才創建的模塊，然后設置一個叫做homeCtrl的controller，
格式一般都是angular.module('myApp').controller(name, [params, function(params) {}])。
創建完成homeCtrl之后呢，在index.html中引用，如下圖：
好了，我們根據剛才配置的路由創建完了controller，現在就差模板了。
創建home模板
在剛才創建文檔template文件夾當中，新建一個home.html。也就是剛才配置app.js中的路由中寫的路徑和名字，忘記的回頭看看app.js是怎樣寫的。在剛才創建的home.html，寫上以上內容
如下圖：
在項目中我們這樣寫着，凡是帶有<ion-xxx></ion-xxx>都是ionic框架自帶的。這是一個指令，如果你還不明白指令什么意思，沒關系。你就當做一個帶有某些功能的自定義標簽。
創建home.html模板和homeCtrl.js之后。我們試着啟動，在瀏覽器中打開index.html這個文件，這個文件作為一個項目的入口。ion-view就是這個頁面的頂層，所有內容都在這個view中，ion-header就是那個頭部，ion-content就是內容。這些都不是必須的，但是我建議這樣寫，因為ionic有些組件是需要在這些標簽里面才能起作用的。然后看到如下圖：
當看到頁面和控制台都出現“hello world”文字，證明我們成功了，項目啟動成功。
創建app.js和html模板及homeCtrl模板總結
其實我們寫項目的思路：舉剛才那個例子
1、創建一個app.js，首先能啟動項目，然后配置路由。其中路由需要模板和controller那么問題來了，接着看2、3、步。
2、然后創建模板，XXX.html模板。
3、最后創建XXXCtrl.js的controller。
編寫控制器與模板
下面來點有意思的吧，先來個輪播圖。那就用ionic框架自帶的吧，具體查文檔即可，如下圖：
刷新瀏覽器如下圖：
好了，這證明我們成功了，可以滑動，可以自帶切換。其實還有很多功能，可以查閱文檔嘗試。一般由於手機網站banner都是從后台讀取數據的，那么我們來改寫。在controller獲取數據，然后賦值給$scope變量，由於頁面和對應controller的$scope有關聯，所以對應頁面上的屬性也會變好，是不是還是不太明白，那么來看代碼吧。homeCtrl如下:
我們把代碼改成
1、ng-repeat="item in views.slideData track by $index"，意思就是從$scope.views.slideData數組遍歷，item是數組里面的某一項，track by $index其實是性能優化，后續會講，你也可以不寫直接ng-repeat="item in views.slideData"
2、之前由<img src="路徑"> 這種變成 <img ng-src="{{item}}",其中ng-src是一個angular自帶的指令，item是數組遍歷出來的路徑
從服務器獲取數據
啰嗦的話不說了，直接上案例。如圖：
既然要數據，那么先建一個服務，使用 angular.module 的 factory API創建服務，是最常見也是最靈活的方式。其實還有幾種
factory()
service()
constant()
value()
provider()
，具體詳情查文檔，不過多數項目用這種（factory）創建方法就滿足需求了。舉個簡單例子
factory() 方法是創建和配置服務的最快捷方式。 factory() 函數可以接受兩個參數。
name （字符串）
需要注冊的服務名。
getFn （函數）
這個函數會在AngularJS創建服務實例時被調用。
angular.module('myApp')
.factory('myService', function() {
return {
'username': 'auser'
};
});
要上我們真實的示例代碼了哦，如下圖：
有同學覺得奇怪了，怎么會是app.factory呢？其實app就是angular.module('myApp',[])，我在app.js文件里面把angular.module('myApp'，[])賦值給全局變量app了。見下圖：
我們建好了servers。在index.html里面引入哦：
好！創建好servers.js，還有在index中引入。那么怎么在controller中調用呢？那我們來看看改寫后的controller，如圖：
我們創建services到調用services里面的ajax請求都成功了，如何在homeCtrl中獲取數據呢？
那就先從services改寫開始,如下圖：
homeCtrl怎么獲取數據？看下圖：
調用myFactory.getList()方法為什么后面還跟着一個then的。其實我們使用內置的 $http 服務直接同外部進行通信。 $http 服務只是簡單的封裝了瀏覽器原生的 XMLHttpRequest 對象。$http 服務是只能接受一個參數的函數，這個參數是一個對象，包含了用來生成HTTP請求的配置內容。這個函數返回一個promise對象， 由於 $http 方法返回一個promise對象，我們可以在響應返回時用 then 方法來處理回調。如果使用 then 方法，會得到一個特殊的參數，它代表了相應對象的成功或失敗信息，還可以接受兩個可選的函數作為參數。或者可以使用 success 和 error 回調代替，至於promise對象是什么，這里就不一一敘述了，寫起來篇幅比較大，還是留給你們查文檔吧。
promise.then(function(resp){
// resp是一個響應對象
}, function(resp) {
// 帶有錯誤信息的resp
});
// 或者使用success/error方法
promise.success(function(data, status, headers, config){
// 處理成功的響應
});
// 錯誤處理
promise.error(function(data, status, headers, config){
// 處理非成功的響應
});
然后看看控制台輸出什么，還是看圖：
OK!大功告成，我們可以把這些數據綁定在$scope上，然后渲染到頁面。還是看圖：
總結：
1、創建services並寫好里面的服務，然后在index.html引入services。
2、homeCtrl中注入依賴services里面的factory服務，調用里面的方法。
3、在homeCtrl調用factory服務方法，然后獲取數據。再把數據賦值給$scope。所以模板也能獲取$scope里面的數據，那么頁面數據就更新了。
編寫過濾器
上面已經教會大家如何建立一個services服務獲取數據，但是有時候我們獲取數據回來的數據做進一步修改顯示在頁面，下面假如我們有一個需求，我想把姓名全部變成大寫。
1、首先創建一個filter。
2、在index.html引入filter。（這個不說了，請看上面services怎么引入的）
在home.html頁面中，姓名這樣寫。
姓名：{{item.Name | toUpperCaseText}}
那么我現在想把城市變成小寫，怎么弄？留給你們一個作業吧。
正如前面所見，創建自定義過濾器非常容易。創建自定義過濾器需要將它放到自己的模塊中。過濾器本質上是一個會把我們輸入的內容當作參數傳入進去的函數。上面只是一個簡單的例子，其實就是把數據獲取進來，數據進來了，你想怎樣處理數據就怎樣處理。相當於你小時候，你騙你爸爸媽媽零用錢的時候，錢到你口袋了，至於錢怎么用了，那是你自己的事。當你爸爸媽媽問你拿去干什么的時候，你告訴他了，那就相當於把數據處理完渲染在頁面了。過濾器其實內置有很多很好用的，需要的時候時不時的查看文檔就行了。用法就是這么簡單。
過濾器總結
1、分析需求怎樣的數據在頁面，查閱內置過濾器是否滿足需求。
2、假如需求內置過濾器不能滿足，創建filter.js，編寫處理數據邏輯。
3、在index.html引入過濾器。在需要用過濾器的加上“|”,例如：{{item.Name | toUpperCaseText}}
頁面之間傳遞數據
當我們寫完home.html頁面並且完成了homeCtrl，及通過services獲取后台服務器的數據，展示到頁面,證明我們成功了一個小項目的大部分。你可以想象，一個項目都是獲取數據，展示數據（至於怎樣展示，點擊展示還是默認展示，這是交互性的東西），或者提交數據，提交數據本文並沒有說，但是我們已經知道怎樣獲取了，提交還困難么。都是差不多的原理。自己翻閱文檔看看$http的方法就可以解決了。我們下面繼續實現一個需求，點擊剛才的某一項列表，跳到詳情頁。
新建一個詳情頁detail.html，新建一個detailCtrl的控制器，並且配置詳情頁路由。忘記了的可以看看前面新建home的步驟。（記得在index.html引入detailCtrl哦，否則會報下面的錯，看圖）
下面展示路由配置及detail.html頁面和detailCtrl.js
我們配置完路由和新建detail的頁面及controller。我們實現點擊列表跳轉到detail頁面，並帶上數據。我再啰嗦一次，本文帶有<ion-xxx>都是ionic框架自帶的，ion-view就是這個頁面的頂層，所有內容都在這個view中，ion-header就是那個頭部，ion-content就是內容。這些都不是必須的，但是我建議這樣寫，因為ionic有些組件是需要在這些標簽里面才能起作用的。
那我們點擊列表
思路就是ng-click="views.goDetail(item)"; views.goDetail就是跳轉到detail頁面，跳轉路由使用$state.go("XXX");XXX代表路由的名稱，item就是你點擊某一項的數據，看圖：
我們點擊列表的時候既可以，可以看到console把item的內容打印出來。
現在需求要實現下面的詳情圖。
如何實現從A頁面==》B頁面，並且把A頁面的數據帶到B頁面。下面來探討angular頁面之間的傳遞數據方式。下面講5種方法，可能有更多，但是我選常用的講。
1、可以用$rootScope頂級作用域，從A頁面賦值給$rootScope的某個屬性，然后B頁面獲取數據賦值到頁面。
結果，如大家所願詳情頁能實現剛才的效果了。
2、在A頁面用$state.go("xxx", {obj});配置路由參數，然后在B頁面用$stateParams對象獲取url的參數。
使用這個方法從home頁面傳遞過來的url
3、在services里面建立一個服務，在A頁面把數據傳遞給這個服務，然后在B頁面獲取這個服務的值。為什么可以這樣做？因為services服務里面的方法是共享的，當項目初始化的時候services已經實例化了一次（服務是一個單例對象，在每個應用中只會被實例化一次（被 $injector 實例化），並且是延遲加載的（需要時才會被創建）），所以不存在跳轉頁面就數據沒了。（這個是最佳實踐哦，不過也要看業務場景。這個是我最常用的）。
頁面之間的傳遞數據，以上是常用的3種。下面介紹沒那么常用的：
利用localStorage、sessionStorage、cookie在A頁面中存值，然后在B頁面中獲取值，這3個都是可以存儲數據。他們之間的區別你們查文檔吧，哈哈哈~~~~ 留給你們思考。
數據綁定
數據綁定，從剛一開始從服務獲取數據，然后把數據綁定到$scope上，然后在頁面輸入{{}}花括號輸出，這種就是數據綁定了。那我們來個假設，現在有個輸入框，輸入框是多少，列表中的那個人的年齡是多少。
由於這個需求，就是雙向數據綁定，可以ng-model用綁定一個變量，這個變量賦值給年齡，那么年齡也跟着變了。看下圖：
好啦好啦，初始化做完了。下面呢，我們在input輸入框值，改變一下input框里面的值，看看有什么變化。
改變了
輸入框里面的值改變了，上面的年齡值也改變了。證明$scope.views.age的值改變了，這些就是數據綁定了。
數據綁定總結
當AngularJS認為某個值可能發生變化時，它會運行自己的事件循環來檢查這個值是否變“臟”。如果該值從上次事件循環運行之后發生了變化，則該值被認為是“臟”值。這也是Angular可以跟蹤和響應應用變化的方式。這個事件循環會調用$digest()循環（這個你們查查文檔就能知道了）。這個過程被稱作臟檢查（dirty checking）。臟檢查是檢查數據模型變化的有效手段。當有潛在的變化存在時，AngularJS會在事件循環時執行臟檢查（查閱文檔）來保證數據的一致性。