Angularjs和Ionic框架搭建webApp

時間 2019-11-08

標籤 angularjs ionic 框架搭建 webapp 欄目 AngularJS 简体版

原文原文鏈接

本文原創版權歸簡書做者嚕啦啦嚕啦啦嚕啦嚕啦嚕全部，轉載請聯繫做者得到受權，並於文章開頭標註原創做者及出處，以示尊重！html

文／嚕啦啦嚕啦啦嚕啦嚕啦嚕（簡書做者）
原文連接：http://www.jianshu.com/p/ea0dcf1d31c9
著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。前端

AngularJS簡介：AngularJS 是一個爲動態WEB應用設計的結構框架，提供給你們一種新的開發應用方式，這種方式可讓你擴展HTML的語法，以彌補在構建動態WEB應用時靜態文本的不足，從而在web應用程序中使用HTML聲明動態內容。node

AngularJS有五個主要核心特性，以下介紹：android

雙向數據綁定—— 實現了把model與view徹底綁定在一塊兒，model變化，view也變化，反之亦然。ios

模板—— 在AngularJS中，模板至關於HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當作DOM來操做，去生成一些指令來完成對view的數據綁定。angularjs

MVVM—— 吸取了傳統的MVC設計模式針但又並不執行傳統意義上的MVC，更接近於MVVM(Moodel-View-ViewModel)。web

依賴注入—— AngularJS擁有內建的依賴注入子系統，能夠幫助開發人員更容易的開發，理解和測試應用。ajax

指令—— 能夠用來建立自定義的標籤，也能夠用來裝飾元素或者操做DOM屬性apache

ionic簡介： ionic是一個強大的_混合式/hybrid_HTML5移動開發框架，特色是使用標準的HTML、 CSS和JavaScript，開發跨平臺（目前支持：Android、iOS，計劃支持：Windows Phone、Firefox OS）的原生App應用。npm

ionic簡介

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

cmd窗口

而後咱們看到有myApp項目生成。以下目錄

而後打開index就能運行項目了

而後咱們用瀏覽器打開index就能夠看的以下圖的東西了。

index.html

接着下一步，咱們用編輯器打開index.html。觀察裏面所引入的文件，個人習慣把跟項目無關的文件刪除了。你能夠不刪除，我也改動了部分文件的位置，之因此叫你觀察裏面引入的文件，就是怕你刪錯了，項目啓動不了。改動完結構以下：

項目結構

其中配置文件，controller，driectives，filter,services,文件都是我新建的。

下面先從app.js提及

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，固然以大家項目爲標準。

homeCtrl

採用閉包的模式建立controller，爲了保險防止沒必要要變量污染的錯誤。其中

angular.module('myApp') 就是載入剛纔建立的模塊，而後設置一個叫作homeCtrl的controller，

格式通常都是angular.module('myApp').controller(name, [params, function(params) {}])。

建立完成homeCtrl以後呢，在index.html中引用，以下圖：

記得在app.js下面引用

好了，咱們根據剛纔配置的路由建立完了controller，如今就差模板了。

建立home模板

在剛纔建立文檔template文件夾當中，新建一個home.html。也就是剛纔配置app.js中的路由中寫的路徑和名字，忘記的回頭看看app.js是怎樣寫的。在剛纔建立的home.html，寫上以上內容

以下圖：

home.html

在項目中咱們這樣寫着，凡是帶有<ion-xxx></ion-xxx>都是ionic框架自帶的。這是一個指令，若是你還不明白指令什麼意思，不要緊。你就當作一個帶有某些功能的自定義標籤。
建立home.html模板和homeCtrl.js以後。咱們試着啓動，在瀏覽器中打開index.html這個文件，這個文件做爲一個項目的入口。ion-view就是這個頁面的頂層，全部內容都在這個view中，ion-header就是那個頭部，ion-content就是內容。這些都不是必須的，可是我建議這樣寫，由於ionic有些組件是須要在這些標籤裏面才能起做用的。而後看到以下圖：

index.html

當看到頁面和控制檯都出現「hello world」文字，證實咱們成功了，項目啓動成功。

建立app.js和html模板及homeCtrl模板總結

其實咱們寫項目的思路：舉剛纔那個例子

一、建立一個app.js，首先能啓動項目，而後配置路由。其中路由須要模板和controller那麼問題來了，接着看二、三、步。

二、而後建立模板，XXX.html模板。

三、最後建立XXXCtrl.js的controller。

編寫控制器與模板

下面來點有意思的吧，先來個輪播圖。那就用ionic框架自帶的吧，具體查文檔便可，以下圖：

添加以下html

刷新瀏覽器以下圖：

多了banner

好了，這證實咱們成功了，能夠滑動，能夠自帶切換。其實還有不少功能，能夠查閱文檔嘗試。通常因爲手機網站banner都是從後臺讀取數據的，那麼咱們來改寫。在controller獲取數據，而後賦值給$scope變量，因爲頁面和對應controller的$scope有關聯，因此對應頁面上的屬性也會變好，是否是仍是不太明白，那麼來看代碼吧。homeCtrl以下:

homeCtrl

home.html

咱們把代碼改爲

一、ng-repeat="item in views.slideData track by $index"，意思就是從$scope.views.slideData數組遍歷，item是數組裏面的某一項，track by $index實際上是性能優化，後續會講，你也能夠不寫直接ng-repeat="item in views.slideData"

二、以前由<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'

};

});

要上咱們真實的示例代碼了哦，以下圖：

這個文件是當初新建的servers。

有同窗以爲奇怪了，怎麼會是app.factory呢？其實app就是angular.module('myApp',[])，我在app.js文件裏面把angular.module('myApp'，[])賦值給全局變量app了。見下圖：

app.js

咱們建好了servers。在index.html裏面引入哦：

index.html

好！建立好servers.js，還有在index中引入。那麼怎麼在controller中調用呢？那咱們來看看改寫後的controller，如圖：

homeCtrl

控制檯

咱們建立services到調用services裏面的ajax請求都成功了，如何在homeCtrl中獲取數據呢？

那就先從services改寫開始,以下圖：

services

homeCtrl怎麼獲取數據？看下圖：

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上，而後渲染到頁面。仍是看圖：

homeCtrl

home.html

列表變化

總結：

一、建立services並寫好裏面的服務，而後在index.html引入services。

二、homeCtrl中注入依賴services裏面的factory服務，調用裏面的方法。

三、在homeCtrl調用factory服務方法，而後獲取數據。再把數據賦值給$scope。因此模板也能獲取$scope裏面的數據，那麼頁面數據就更新了。

編寫過濾器

上面已經教會你們如何創建一個services服務獲取數據，可是有時候咱們獲取數據回來的數據作進一步修改顯示在頁面，下面假如咱們有一個需求，我想把姓名所有變成大寫。

一、首先建立一個filter。

二、在index.html引入filter。（這個不說了，請看上面services怎麼引入的）

filter.js

在home.html頁面中，姓名這樣寫。

姓名：{{item.Name | toUpperCaseText}}

變成大寫了

那麼我如今想把城市變成小寫，怎麼弄？留給大家一個做業吧。

正如前面所見，建立自定義過濾器很是容易。建立自定義過濾器須要將它放到本身的模塊中。過濾器本質上是一個會把咱們輸入的內容看成參數傳入進去的函數。上面只是一個簡單的例子，其實就是把數據獲取進來，數據進來了，你想怎樣處理數據就怎樣處理。至關於你小時候，你騙你爸爸媽媽零用錢的時候，錢到你口袋了，至於錢怎麼用了，那是你本身的事。當你爸爸媽媽問你拿去幹什麼的時候，你告訴他了，那就至關於把數據處理完渲染在頁面了。過濾器其實內置有不少很好用的，須要的時候時不時的查看文檔就好了。用法就是這麼簡單。

過濾器總結

一、分析需求怎樣的數據在頁面，查閱內置過濾器是否知足需求。

二、假如需求內置過濾器不能知足，建立filter.js，編寫處理數據邏輯。

三、在index.html引入過濾器。在須要用過濾器的加上「|」,例如：{{item.Name | toUpperCaseText}}

頁面之間傳遞數據

當咱們寫完home.html頁面而且完成了homeCtrl，及經過services獲取後臺服務器的數據，展現到頁面,證實咱們成功了一個小項目的大部分。你能夠想象，一個項目都是獲取數據，展現數據（至於怎樣展現，點擊展現仍是默認展現，這是交互性的東西），或者提交數據，提交數據本文並無說，可是咱們已經知道怎樣獲取了，提交還困難麼。都是差很少的原理。本身翻閱文檔看看$http的方法就能夠解決了。咱們下面繼續實現一個需求，點擊剛纔的某一項列表，跳到詳情頁。

新建一個詳情頁detail.html，新建一個detailCtrl的控制器，而且配置詳情頁路由。忘記了的能夠看看前面新建home的步驟。（記得在index.html引入detailCtrl哦，不然會報下面的錯，看圖）

當咱們跳轉detail路由時候，因爲沒引入對應的detailCtrl，會報錯

下面展現路由配置及detail.html頁面和detailCtrl.js

路由配置

detailCtrl

detail.html

咱們配置完路由和新建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就是你點擊某一項的數據，看圖：

ng-click,home.html中

homeCtrl

咱們點擊列表的時候既能夠，能夠看到console把item的內容打印出來。

console.log(item)

如今需求要實現下面的詳情圖。

點擊詳情

如何實現從A頁面==》B頁面，而且把A頁面的數據帶到B頁面。下面來探討angular頁面之間的傳遞數據方式。下面講5種方法，可能有更多，可是我選經常使用的講。

一、能夠用$rootScope頂級做用域，從A頁面賦值給$rootScope的某個屬性，而後B頁面獲取數據賦值到頁面。

homeCtrl

detailCtrl

detail.html

結果，如你們所願詳情頁能實現剛纔的效果了。

二、在A頁面用$state.go("xxx", {obj});配置路由參數，而後在B頁面用$stateParams對象獲取url的參數。

homeCtrl,item是個對象來的，也能夠是字符串

detailCtrl

使用這個方法從home頁面傳遞過來的url

三、在services裏面創建一個服務，在A頁面把數據傳遞給這個服務，而後在B頁面獲取這個服務的值。爲何能夠這樣作？由於services服務裏面的方法是共享的，當項目初始化的時候services已經實例化了一次（服務是一個單例對象，在每一個應用中只會被實例化一次（被 $injector 實例化），而且是延遲加載的（須要時纔會被建立）），因此不存在跳轉頁面就數據沒了。（這個是最佳實踐哦，不過也要看業務場景。這個是我最經常使用的）。

services.js

homeCtrl設置值

detailCtrl

detail.html

detail.html

頁面之間的傳遞數據，以上是經常使用的3種。下面介紹沒那麼經常使用的：

利用localStorage、sessionStorage、cookie在A頁面中存值，而後在B頁面中獲取值，這3個都是能夠存儲數據。他們之間的區別大家查文檔吧，哈哈哈~~~~ 留給大家思考。

數據綁定

數據綁定，從剛一開始從服務獲取數據，而後把數據綁定到$scope上，而後在頁面輸入{{}}花括號輸出，這種就是數據綁定了。那咱們來個假設，如今有個輸入框，輸入框是多少，列表中的那我的的年齡是多少。

因爲這個需求，就是雙向數據綁定，能夠ng-model用綁定一個變量，這個變量賦值給年齡，那麼年齡也跟着變了。看下圖：

detailCtrl.js

detail.html

頁面顯示

好啦好啦，初始化作完了。下面呢，咱們在input輸入框值，改變一下input框裏面的值，看看有什麼變化。

改變了

輸入框裏面的值改變了，上面的年齡值也改變了。證實$scope.views.age的值改變了，這些就是數據綁定了。

數據綁定總結

當AngularJS認爲某個值可能發生變化時，它會運行本身的事件循環來檢查這個值是否變「髒」。若是該值從上次事件循環運行以後發生了變化，則該值被認爲是「髒」值。這也是Angular能夠跟蹤和響應應用變化的方式。這個事件循環會調用$digest()循環（這個大家查查文檔就能知道了）。這個過程被稱做髒檢查（dirty checking）。髒檢查是檢查數據模型變化的有效手段。當有潛在的變化存在時，AngularJS會在事件循環時執行髒檢查（查閱文檔）來保證數據的一致性。