IONIC 3.5框架  IONIC 是目前有潛力的一款 HTML5 手機(jī)應(yīng)用開(kāi)發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。 它使用 Java MVVM 框架和 AngularJS 來(lái)增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開(kāi)發(fā)者的共同選擇。Ionic是一個(gè)專(zhuān)注于用WEB開(kāi)發(fā)技術(shù)，基于HTML5創(chuàng)建類(lèi)似于手機(jī)平臺(tái)原生應(yīng)用的一個(gè)開(kāi)發(fā)框架。Ionic框架的目的是從web的角度開(kāi)發(fā)手機(jī)應(yīng)用，基于PhoneGap的編譯平臺(tái)，可以實(shí)現(xiàn)編譯成各個(gè)平臺(tái)的應(yīng)用程序。   在html5移動(dòng)app開(kāi)發(fā)中,速度是很重要的。Ionic在較新的移動(dòng)設(shè)備中表現(xiàn)非常卓越，運(yùn)行非常流暢。 操作少的 DOM，非 jQuery，和硬件加速過(guò)渡，讓您感覺(jué)到用html5開(kāi)發(fā)的app也可以飛起來(lái)。   Ionic可以說(shuō)是AngularJS移動(dòng)端解決方案，Ionic 利用 AngularJS創(chuàng)造出一款適合開(kāi)發(fā)豐富而強(qiáng)大應(yīng)用的框架。 Ionic不僅如此優(yōu)秀，而且它的核心架構(gòu)也是為開(kāi)發(fā)專(zhuān)業(yè)應(yīng)用創(chuàng)建，和AngularJS完美融合。   Ionic以流行的原生移動(dòng)開(kāi)發(fā)SDK為藍(lán)本，使開(kāi)發(fā)過(guò)原生iOS或安卓app的任何人都容易理解。開(kāi)始只需書(shū)寫(xiě)你的代碼，完成時(shí)通過(guò)PhoneGap發(fā)布。一次開(kāi)發(fā)，處處運(yùn)行。   簡(jiǎn)潔，簡(jiǎn)單，而且實(shí)用。 Ionic為所有當(dāng)前移動(dòng)設(shè)備而設(shè)計(jì)，并且呈現(xiàn)完美。伴隨眾多流行移動(dòng)組件，結(jié)構(gòu)，交互規(guī)范，以及華麗的（且可擴(kuò)展）的主題，你可以更好的定制化APP應(yīng)用。   ①下載安裝Node JS 版本6.0以上 安裝完成cmd輸入node -v 顯示對(duì)應(yīng)版本即安裝成功 ②安裝ionic和Cordova Cmd 輸入npm install -g ionic cordova 經(jīng)過(guò)漫長(zhǎng)的等待，會(huì)提示安裝成功 ③創(chuàng)建ionic項(xiàng)目 Cmd窗口 cd項(xiàng)目創(chuàng)建的目錄 輸入ionic start project_name [template] template是內(nèi)置的模板類(lèi)型：blank/sidemenu/tabs/（default）三種 Ionic3常用命令npm install -g cnpm --registry=鏡像源指向淘寶） cnpm install -g cordova ionic（安裝cordova ionic） cnpm update -g cordova ionic（更新cordova ionic） ionic -help（查看幫助） ionic -v（查看版本） ionic start myionictest blank（空項(xiàng)目） ionic start myionictest tabs（帶導(dǎo)航條） ionic start myionictest sidemenu（帶側(cè)滑菜單） ionic g page login(添加頁(yè)面)ionic g provider BaseService(添加服務(wù)端口)ionic platform add androidionic platform add android（添加android平臺(tái)） ionic platform remove android（移除android平臺(tái)） ionic build android（編譯項(xiàng)目apk） ionic emulate android（運(yùn)行項(xiàng)目apk 手機(jī)連接在手機(jī)運(yùn)行模擬器連接在模擬器運(yùn)行） ionic run android （相當(dāng)于build + emulate） ionic serve（開(kāi)啟服務(wù)調(diào)試） PS:  WebStorm 2017.02  Android：①JDK1.8 ②Android SDK (API25 具體看項(xiàng)目) Ios：①Xcode ②Developer Program  按照官網(wǎng)命令ionic start創(chuàng)建項(xiàng)目后生成如下結(jié)構(gòu)樹(shù)：  hooks：編譯cordova時(shí)自定義的腳本命令，方便整合到我們的編譯系統(tǒng)和版本控制系統(tǒng)中 node_modules ：node各類(lèi)依賴(lài)包 resources ：android/ios 資源（更換圖標(biāo)和啟動(dòng)動(dòng)畫(huà)） src：開(kāi)發(fā)工作目錄，頁(yè)面、樣式、腳本和圖片都放在這個(gè)目錄下 www：文靜態(tài)件 platforms：生成android或者ios安裝包路徑（ platformsandroiduildoutputsapk：apk所在位置） plugins：插件文件夾，里面放置各種cordova安裝的插件 config.xml: 配置文件 package.json: node安裝模塊時(shí)的依據(jù) tsconfig.json: Type項(xiàng)目的根目錄，指定用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng) tslint.json：格式化和校驗(yàn)type src工作目錄：  app：應(yīng)用根目錄 assets：資源目錄（靜態(tài)文件（圖片，js框架。。。）各種需要放置在此文件夾內(nèi)，不然會(huì)出錯(cuò)，（尷尬。。。） pages：頁(yè)面文件，放置編寫(xiě)的頁(yè)面文件，包括：html，scss，ts。（搞事情的） theme：主題文件，里面有一個(gè)scss文件，設(shè)置主題信息。  Angular4 架構(gòu)詳解 官方架構(gòu)圖：  這個(gè)架構(gòu)圖展現(xiàn)了 Angular 應(yīng)用中的 8 個(gè)主要構(gòu)造塊： · 模塊 (module) · 組件 (component) · 模板 (template) · 元數(shù)據(jù) (metadata) · 數(shù)據(jù)綁定 (data binding) · 指令 (directive) · 服務(wù) (service) · 依賴(lài)注入 (dependency injection) 接下來(lái)我按順序并結(jié)合圖來(lái)講解一下。  Angular 或者 ionic 新建的項(xiàng)目，都會(huì)存在一個(gè)根模塊，默認(rèn)名是 AppModule。如果你使用了模塊化來(lái)創(chuàng)建應(yīng)用，包括 AppModule，每個(gè)都會(huì)存在一個(gè) @NgModule 裝飾器的類(lèi)(雖然他很像 java 中的注解，但是他的官方命名叫裝飾器)。我們新建的頁(yè)面，如果不使用懶加載，都要在 @NgModule 中先聲明后使用。 下面舉個(gè)例子，簡(jiǎn)單介紹一下 @NgModule 中的內(nèi)容  ?imports 本模塊聲明的組件模板需要的類(lèi)所在的其它模塊 ?providers 服務(wù)的創(chuàng)建者，并加入到全局服務(wù)列表中，可用于應(yīng)用任何部分。 ?declarations 聲明本模塊中擁有的視圖類(lèi)。Angular 有三種視圖類(lèi)：組件、指令和管道。 ?exports declarations 的子集，可用于其它模塊的組件模板。 ?bootstrap 指定應(yīng)用的主視圖（稱(chēng)為根組件），它是所有其它視圖的宿主。只有根模塊才能設(shè)置 bootstrap 屬性。 PS：在圖中的意義：看圖左上角，模塊是用來(lái)接收一個(gè)用來(lái)描述模塊屬性元數(shù)據(jù)對(duì)象的。  這次我們把這三點(diǎn)一起來(lái)講，先看一下這段代碼  Component組件是一個(gè)裝飾器，他能接受一個(gè)配置對(duì)象， Angular 會(huì)基于這些信息創(chuàng)建和展示組件及其視圖。 · selector：CSS 選擇器，它告訴 Angular 在父級(jí) HTML 中查找