Cordova第三式–Ionic + AngularJS

Cordova 第三式

由於單純的Cordova在開發上可能需要投入更多的開發及維護成本,所以在這邊介紹一個好東西,也是Hybrid App非常熱門的一套框架(Framework),那就是Ionic!它建立在Cordova之上,搭配Angular JS的支援,上手後絕對省去很多成本,不論是開發的時間、程式碼的精簡度與可讀性。

AngularJS,近幾年只要碰過JavaScript都應該聽過的一個框架,現今框架百百種,青菜蘿蔔各有所好,這款打著Google投入開發及維護的背景,加上已經擁有大量的使用者,很難不被注意。而它之所以能夠超群出眾,不外乎在於MVC(Model View Controller)的特性,加上雙向資料綁定(Two-way data binding)、宣告式編程(Declarative programming),以及依賴注入(Dependency Injection)搭配Provider機制,不僅延展了HTML的運用,也達到MVC的效果,不論是MVC的舊雨新知,都是一套非常適合嘗試的框架。接下來就讓我們更進一步的探討以上提及的相關特點。

 

在進入AngularJS之前,相信有看過先前Cordova介紹的人並不陌生Ionic的安裝,透過Ionic官方提供的入門教學,在安裝Node.js後的命令列介面輸入指令npm install -g cordova ionic,即可輕鬆完成安裝;建立專案與Cordova create稍微不同的是使用ionic start 專案名稱 專案類型(blank:空白、tabs:分頁,以及sidemenu:側欄選單,提供以上三種初始類型)。接著增修平台或套件、專案組建或模擬測試等相關指令,都是大同小異的,使用cordova或ionic為開頭,都可以達到相同的效果。因為Ionic上手容易,就不多做介紹,在此提供二個官方文件,一個是CSS Components,和Ionicon

此時,在引用AngularJS函式庫的情況下,接著我們會使用:

ng-app的屬性(Attribute)宣告從此開始為AngularJS的領域,例如為<html ng-app=”myApp”>;

ng-controller宣告從此屬於該控制構建函數的範圍並調配一個$scope,例如為<body ng-controller=”controllerA”>。

而scope正是讓模板(template),和模型(Model)與視圖(View)分工合作卻又同步處理的大功臣!在HTML一般常見的運用有:

ng-init,指定Model初始值,例如ng-init=” scopeVal1= ‘ Hello ‘ “;

ng-model用在input, select, textarea,例如<input ng-model=”scopeVal1″>;

ng-bind,宣告該標籤的innerHTML與指定的Model綁定,例如<p ng-bind=” scopeVal1″></p>,亦可使用<p>{{scopeVal1}}</p>;

ng-repeat用在物件(object)和陣列(array),它可以將每一個項目替你實現Template,例如myArray=[“1”, “2”, “3”],<p ng-repeat=”x in myArray”>{{x}}</p>,則會自動產生<p>1</p> <p>2</p> <p>3</p>,同時也可以使用在物件上,例如<element ng-repeat=”(key, val) in myObject”> <child>{{key}}</child> <child>{{val}}</child> </element>。

 

在事件的處理上當然也都還有ng-click、ng-change、ng-focus…等,掌握以上基本功,接下來只要到Angular官方提供的API文件都有詳細的說明。

 

另外值得一提的是Provider機制的客製部分,主要分為provider、constant、value、factory、service和decorator,先前提到要省時間、省程式就必須靈活運用該機制,將程式模組化並能提供給單元測試來做運用。簡單來說,constant和value拿來裝變數或物件,decorator只能修改value卻無法改變constant;但constant可以在provider和config被注入,value則不允許。factory則是產生物件的方法,然後回傳該物件;service則是回傳一個初始化的建構函式,像是new Class,詳細介紹可看官方的Provider指南(Guide)API: $provide

 

基本上Ionic + AngularJS對於有接觸過Cordova的人應該算是輕鬆入門的一個選項,上手後還會感覺更加順暢與方便,最主要的差異可能會是先前有使用jQuery的人,必須習慣用MVC和資料綁定的方式來取代豐富DOM的行為,當然,兩者是可以並存的,但如果繼續使用DOM,MVC的成份就相對降低,失去了使用AngularJS的用意,而且Angular也有提供一個jqLite,必要時還是可以派上用場!

Comments

No comments yet. Why don’t you start the discussion?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料