? ? ? ? ionic2 你可以是理解為基于 angular 2 框架的引申(主要針對(duì)移動(dòng)端,主要是里面提供了大量的組件可以使用,可以把它理解成里面包含了很多的UI庫(kù), 就好比 ios開發(fā)中的 UIKit一樣).
如果從頭讓你寫一個(gè)Ionic 2/3的項(xiàng)目,你會(huì)寫嗎?
? ? ? ? 相信很多人都不是自己親手去搭建的項(xiàng)目. ? 都是在別人搭建好的基礎(chǔ)上 去寫功能.. 甚至 你都不了解啟動(dòng)文件在哪 , http請(qǐng)求等一些需要全局封裝配置 怎么處理等等.....
? ? ? ? 我們先來(lái)看angular 的官網(wǎng)文檔:angular 是一個(gè)框架,看一個(gè)框架第一步肯定是要看這個(gè)框架的架構(gòu)!架構(gòu)! ?你可以把這個(gè)架構(gòu)理解成是 一套規(guī)則, 這套規(guī)則是以為我們提供便利為前提的標(biāo)準(zhǔn)去制定的, 而我們要想享受它所提供的便利,那么我們就首先要了解這套規(guī)則,以遵守規(guī)則為前提,然后再去使用它.
正文:?
? ? ? ? ?Angular 是一個(gè)用 HTML 和 JavaScript 或者一個(gè)可以編譯成 JavaScript 的語(yǔ)言（ TypeScript ），來(lái)構(gòu)建客戶端應(yīng)用的框架。我們是這樣寫 Angular 應(yīng)用的：用 Angular 擴(kuò)展語(yǔ)法編寫 HTML模板， 用組件類管理這些模板，用服務(wù)添加應(yīng)用邏輯， 用模塊打包發(fā)布組件與服務(wù)。
? ? ? ? 其中的關(guān)鍵字: ?組件 , ?模板 , ?服務(wù) , ?模塊 . ? ? ? ?這幾個(gè)重要的架構(gòu)組成, 官方文檔寫的很清楚.自己先好好理解下 ,下面我說(shuō)下我個(gè)人的理解: 先上一個(gè)ionic 2項(xiàng)目結(jié)構(gòu) 局部 目錄圖:?
app文件夾: ?項(xiàng)目的根配置目錄; ? ? ?assets文件夾: 引用的資源(圖片素材等)放置在這里
pages文件夾: ?也就是功能模塊文件夾(tabs 控制的幾大模塊)
pipes文件夾: 里面放的是自定管道(過(guò)濾器)
providers文件夾: 服務(wù)配置文件夾.(各模塊用到的服務(wù),主要封裝的是各模塊用到的接口請(qǐng)求,以及邏輯數(shù)據(jù)的處理, 跨頁(yè)面的數(shù)據(jù)傳遞 就是依賴服務(wù)區(qū)實(shí)現(xiàn)的)
首先說(shuō) ?
模板:? 你就可以理解成 用angular2 擴(kuò)展語(yǔ)法編寫 的HTML. ? 也就是 .html文件
組件:? 你也可以理解成.ts文件. 就相當(dāng)于js文件,作用是干嘛的?? 組件通過(guò)一些由屬性和方法組成的 API 與視圖交互。? 還有,組件其實(shí)就是一個(gè)類文件 與 @Component裝飾器 的結(jié)合. ? (裝飾器 , 指令,元數(shù)據(jù) ?這些關(guān)鍵詞 你也去搜下具體的解釋. ?通俗的來(lái)說(shuō),就是, ts文件中, 通過(guò)裝飾器 引用你編寫的模板,然后通過(guò)你寫的方法等邏輯代碼 去實(shí)現(xiàn)API的視圖交互.暫且這么理解,雖然不太準(zhǔn)確)
還有那些 依賴注入, 服務(wù),數(shù)據(jù)綁定啥的. 都自己看下就行. ?切回正題, 項(xiàng)目結(jié)構(gòu)文件都是怎么關(guān)聯(lián)的;
模塊 @NgModule
? ? ? ?模塊這個(gè)關(guān)鍵字 你可以好好理解下. ? ?你寫的項(xiàng)目下.不僅僅有js(ts), html, css , 是不是發(fā)現(xiàn)該模塊下還有一個(gè)module.ts文件. ? ? 因?yàn)橐粋€(gè)模塊下.有很多界面. 我們是如何把這些界面想關(guān)聯(lián)起來(lái)的? 就是用模塊 這個(gè)概念實(shí)現(xiàn)的. ?不過(guò)為了規(guī)范,文檔上說(shuō),每個(gè)模塊下 都用index.js 去實(shí)現(xiàn)關(guān)聯(lián). 就是一個(gè)名字而已.你有這個(gè)概念就行.?
? ? ? ? 說(shuō)了模塊,再回到整個(gè)App. ? 那么APP是不是 由很多模塊構(gòu)成的? ?那么我們把各大模塊關(guān)聯(lián)起來(lái),那么是不是就是整個(gè)App了?
? ? ? ? 我是通過(guò)倒序的方法給你們講的,目的是方便理解.? 當(dāng)然,正確概念是,模塊不僅把你的頁(yè)面關(guān)聯(lián)起來(lái),還有你寫的服務(wù)等等都會(huì)關(guān)聯(lián)起來(lái)的. ? ? ?官方文檔是這么寫的: ?"用模塊打包發(fā)布組件與服務(wù)". ? ? 打包,就是封裝帶一起.你可以理解成結(jié)合起來(lái)的意思.
app.module.ts ?是你構(gòu)建ionic項(xiàng)目的根模塊. ?在這里面,我們導(dǎo)入了 我們的幾大模塊(1. MeetingModel 會(huì)議模塊 2.BoardroomModule 會(huì)議室模塊,UserModule 個(gè)人用戶模塊. ). ? 以及全局Tabs,導(dǎo)航欄, ?全局服務(wù)等等.
然后我再貼一個(gè)模塊下的@NgModule ?它 主要是把每個(gè)模塊下的界面關(guān)聯(lián)到一起
declarations 里面寫的就是我們關(guān)聯(lián)的這些界面. ? ? 再往下拆分, ?每個(gè)界面其實(shí)由三部分構(gòu)成(js,html,css).
從小大到構(gòu)成了我們整個(gè)項(xiàng)目. ??
因?yàn)轫?xiàng)目是公司上線項(xiàng)目,我不方便貼出來(lái)代碼給大家參考的.. 并且網(wǎng)上有很多這樣的項(xiàng)目可以下載. ?關(guān)鍵是在于理解.. 我自己也是前前后后看了十幾遍文檔 ,從最初的一臉懵逼,到慢慢的滲透, 都是有一個(gè)過(guò)程的. ?要養(yǎng)成自學(xué)的習(xí)慣. ?等你什么時(shí)候能獨(dú)立的掌握一個(gè)框架的話,當(dāng)你再去學(xué)習(xí)其他的,都會(huì)有很多可以參考的地方讓你去快速上手.?
