第一章 緒論
創建移動app有三種
安卓原生App，使用java語言，目前推薦kotlin語言，開發工具Android studio
IOS原生App，使用Objective-C或者Swift語言，開發工具Xcode
混合移動App，使用web通用語言（HTML，css，js）+開發框架（Ionic）
了解三個獨立的App編寫Ionic應用程序
Ionic框架：
一個用HTML，css，js構成的用戶界面框架，專門用于混合移動app的開發，
包含一個強大的命令行接口（CLI）和一套附屬服務（如Ionic View和Ionic Creator）
最上層是Ionic框架自身--中間層是AngularJS（web應用框架）--最下層是Apache Cordova（允許web應用程序調用設備原生能力并將APP轉換成原生App）
使用原生app的優劣勢
優點：
開發工具和設備平臺緊密綁定，IDE明確；
所有的原生api和功能對開發者都可用，不需要橋接方案；
app性能盡可能優化，沒有中間層的性能開銷；
缺點：
開發語言只能使用一種或幾種；主要是因為部署app到IOS和Android，需要熟悉多種語言和工具
最早的app是沒有app商店的，屬于移動web App應用，通過設備上的web瀏覽器進行加載，只使用web技術創建App并通過設備瀏覽器進行發布
優點：可以部署到多個平臺，只需要考慮目標市場，升級也只需上傳新包到服務器
缺點：app直接運行在本地瀏覽器，可能會受到瀏覽器無法訪問設備的全部能力，搜索url也不是人人都喜歡
于是乎出現了混合移動App
它也是一種原生移動app，使用web瀏覽器運行web應用，只是在設備和webview之間用了一個原生app容器橋接
優點：多平臺部署，能夠訪問設備的全部能力（插件系統）；
缺點：性能和容量受瀏覽器限制，使用插件進行通信會出現一種依賴，不能保證API是可用的，UI組件可用度低
因此出現了改善這種插件的框架Ionic
Ionic技術棧
Ionic自身、AngularJS、cordova
Ionic提供了web app不具備的UI組件，CLI命令行接口（創建、編譯、發布Ionic應用程序）、圖形化設計構造工具
Ionic主要目標是UI層，集成Angular和Cordova提供接近于原生的體驗
AngularJS（構造復雜、單頁面web app的MVW框架）
Cordova：能夠利用web技術構建嵌入webview的原生app，提供了webview和設備原生層之間的接口，橋接框架，支持多平臺，這也是混合移動app的好處
cordova還可以使用自身的命令工具搭建腳手架、編譯和部署移動應用。
需要準備的學習條件：HTML、CSS、JS，Angular基礎（TypeScript工具）,移動設備
第二章 環境配置
基本Ionic安裝、指定平臺SDK安裝；配置安裝環境，才能使用模擬器，能夠在設備上部署和測試應用程序并實現app發布
Ionic框架安裝：
需要四個組件（Node.js，Git，Ionic，Apache Cordova），Ionic和CLI都是用Node.js編寫的
node.js安裝
打印node.js版本：node -v
NPM(Node的包管理器)更新：npm -v
更新NPM安裝：npm istall npm -g
Git安裝省略
Apache cordova CLI
安裝：npm install -g cordova
Ionic CLI
安裝:npm install -g ionic
查看：ionic -v
新建Ionic項目
ionic start testApp --v2
Ionic框架通過一系列初始模板來創建一個項目的腳手架，模板包括：指定的模板（blank,sidemenu,tabs），GitHub庫，Codepen，一個本地目錄，默認使用tabs
在瀏覽器中預覽：ionic serve
安裝平臺工具：IOS的Xcode，Android studio較好，Windows Universal
配置模擬器
配置設備
添加移動平臺：ionic platform add android
模擬器上測試：ionic emulate[platform]
ionic emulate ios --target="iPad-Air"
日志：ionic emulate ios -l -c
設備上測試：ionic run ios -l -c
ionic run android -l -c
第三章 Ionic命令行界面
CLI，它的功能
使用GitHub的模板創建App的例子
ionic start myApp https://github.com/driftyco/ionic2-start-blank --v2
CLI使用TypeScript作為開發語言
修改APP名稱
ionic start myAPP -a "My awesome Ionic App"
指定編譯平臺
ionic platform add android
管理cordova插件
ionic plugin add cordova-plugin-geolocation(添加)
ionic plugin rm cordova-plugin-geolocation(移除)
ionic plugin ls（查看）
ionic允許你自己搭建指定的模板
ionic g [page|component|deirective|pipe|provider|tabs][element name]
ionic g page mypage
運行app：ionic serve 或ionic serve --lab（顯示多個瀏覽器窗口）
指定ip：ionic serve --address 112.365.365.321
查看CLI信息：ionic info
第四章 AngularJS和TypeScript
AngularJS是基于組件的
組件：
import {Component} from '@angular/core'
//定義組件元數據
@Component({
selector:'myfirstapp'//標簽
template:`<div>Hello,my name is {{name}}.
<button (click)="sayMyName()">Log my name</button></div>`//模板
})
export class MyCompanet{
constructor(){
this.name='Inigo Montoya'
}
sayMyName(){
console.log('Hello my name is',this.name,'you killed my father,prepare to die')
}
}
輸入：需要將信息傳遞到組件的機制，通過Input模塊實現
比如組件<current-user>
<current-user [user]="current-user"></current-user>
這個組件的定義如下：
import {Component,Input}from'@angular/core';
@Component({
selector:'current-user',
template:'<div>{{user.name}}</div>'//模板
})
export class UserProfile{
@Input()user;
constructor(){}
}
通過@Input綁定user變量，angularJS會傳遞currentUser變量給這個組件，讓模板渲染出user.name的值，從而實現數據的傳遞和參數的設置
模板：
渲染：{}
如<div>{{user.name}}</div>
綁定屬性：[]
如<current-user [user]="current-user"></current-user>
事件處理：()類似點擊事件
如<my-component (click)="onUserClick($event)"></my-component>
雙向數據綁定[{}]
如<input [(ngModal)]="username">
星號*：*告訴模板以指定的方式進行處理
如<my-component *ngFor="let item of items"></my-component>
事件：事件使用（）標記
<button (click)="clicked()">click</button>
該組件的定義是：
@Component(...)
class MyCompanent{
clicked(){
}
}
方法可以帶參數，只需在clicked方法加入參數名
<button (click)="clicked($event)">click</button>
該組件的定義是：
@Component(...)
class MyCompanent{
clicked(event){
}
}
如果你的組件需要向其他組件廣播自定義事件，可以導入Output模塊和EventEmitter模塊
使用@Output修飾符定義事件，這個事件是一個EventEmitter實例
import {Component,Output,EventEmitter}from '@angular/core';
@Component({
selector:'user-profile'
template:'<div>Hi,my name is</div>'
})
export class UserProfile{
@Output() userDataUpdated = new EventEmitter();
constructor(){
//修改user
//...
this.userDataUpdated.emit(this.user);
}
}
可以綁定user-profile組件的事件了
<user-profile (userDataUpdated)="userDataUpdated($event)"></user-profile>
生命周期事件（允許訪問生命周期中的每一個環節）通常與創建、渲染、銷毀相關
@NgModule實現App的引導方式，它使用元數據對象告訴Angular如何編譯和運行模塊代碼，允許將所有的依賴進行前置聲明，而不用在app中多次聲明
import {NgModule}from '@angular/core';
import {BrowserModule}from '@angular/platform-browser';
import {AppComponent}from './app.cpmponent';
@NgModule({
imports:[BrowserModule],
declarations:[AppComponent],
bootstrap:[AppComponent]
})
exports class AppModule{}
這段代碼是基本的app.module.ts文件的例子，使用了BrowserModule模塊，才能運行在web瀏覽器中
這個模塊會被main.ts所用，引導過程：
import {platformBrowserDynamic}from '@angular/platform-browser-dynamic';
import {AppModule}from './app.module';
const platform =platformBrowserDynamic();
platform.bootstrapModule(AppModule)
初始化app運行的平臺，然后用這個平臺引導AppModule
組件被創建時，構造器會被調用，所以需要對構造器進行初始化
提供了一個ngOnInit事件
Ionic事件，掌握事件描述的意義，省略
管道符（過濾器）
將一個值轉換成新的值，|
<p>
The author's birthday is {{birthday|date}}
</p>>
經常需要讀寫子組件的方法，當父組件需要這些方法，需要將子方法注入父組件中，@ViewChild
?
TypeScript（改進js）
所有改進的js語言版本都面臨必須將代碼轉換成標準的js（就是所謂的轉譯，一種語言轉換成另一種語言）
TypeScript是對javaScript 的擴展，提供了強大的類型檢查和面向對象特性，是Ionic的主要語言
它的轉譯已經內置在Ionic編譯中
變量指定：let，變量的作用域僅限最近的塊
for(let i =0; i<=10;i++){
console.log(i)
}
類定義：和大多數語言定義相似
promise：用于延遲和異步，需要和遠程服務器打交道或者加載本地數據時用到該方法
三種狀態：
Pengding、Fullfilled、Rejected
var greetingPromise = sayHello();
greetingPromise.then(function(greeting){
console.log(greeting);
},function(error){
console.error('uo',error)
});
Angular很多服務使用Observable而不使用promise，他可以解決多個值的同步
Angular內置了模板引擎，使用`符號進行連接，
箭頭函數：簡化函數作用域和this關鍵字，可以不用輸入function關鍵字、return關鍵字以及大括號
var multiply =(x,y)=>{return x*y};
箭頭函數通常用來數組操縱,數組就不需要定義了 var missions=[{},{}...];
console.log(mission.map(mission=>mission.flights));
類型：string/number/boolean
特殊類型：any/null/undefined/void
類型化函數：變量可以類型化，函數返回值也可以類型化
function sayHello(theName:string):string{
return 'Hello,'+theName;
}
:void用于表示函數沒有返回類型
function log(message):void{
console.log(message);
}
第五章 Apache cordova
cordova開源框架允許使用HTML、CSS、JS創建針對各種移動設備的本地應用
它會將web應用渲染到原生的webView中，web view是一個原生的app組件
cordova將web app無法訪問的電話號碼等信息通過插件都暴漏給開發者，插件提供了一個web app和設備原生能力的橋接層，說白了就是管理各種插件的集合，一般是通過第三方插件提供（NFC通信、壓感觸控、推送通知）
如：Battery status監控設備電池狀態
雖然cordova為開發者提供了大量的功能，但是缺少一個重要的組件：用戶界面組件，因此最好的方法是使用第三方框架，如Ionic，這就是Ionic技術的底層
第六章 理解Ionic（這一章節還需要找項目查看，平安小區app就可以）
ionic頁面組成：html文件（定義要顯示的組件）、Sass文件（定義組件的可視化樣式）、TypeScript文件（定義組件的自定義功能）它是基于web技術開發的，所以會用到很多傳統web app的技術
我們只需要定義真正需要展示給用戶的組件，因為ionic頁面的html文件是在App容器中渲染，不需要像傳統的HTML頁面那樣定義body等初始標簽。
app.html:
<ion-split-pane>
<!-- logged user menu -->
<ion-menu id="loggedUserMenu"[content]="content">
<ion-header>
<ion-toolbar>
<ion-title>平安小區</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>
我的相關
</ion-list-header>
<button ion-item menuClose *ngFor="let p of personalPages"(click)="openPage(p)">
<ion-icon item-start [name]="p.icon"[color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- main navigation -->
<ion-nav [root]="rootPage"#content swipeBackEnabled="false" main name="app"></ion-nav>
</ion-split-pane>
app.scss包含了變量聲明，如$company-brand:#ff11dd,直接通過變量來代替這個顏色值
所有的Ionic組件都使用Sass變量設置樣式，具體參看Ionic文檔
Ionic使用gulp這個構建工具來預編譯sass
page-app{
.content{
}
.toolbar-title-md{
}
.bar-button-default-md{
}
.content_{
}
@each $track,$value in auxiliary-categories(){
}
ion-row{
}
}
App級別的主題樣式會有一個單獨的sass文件
TypeScript（編寫和頁面交互邏輯相關的Angular/TypeScript代碼，功能實現）文件后綴.ts
基本.ts前面已經寫過（省略177行）
平安小區的包含兩個ts文件，.module.ts和.ts
主要應用了NgModule模塊，.ts文件實例如下：
import { Component,ViewChild } from '@angular/core';
import { MenuController,IonicPage, NavController, App, ToastController,InfiniteScroll } from 'ionic-angular';
import { ApiHttpProvider } from '../../providers';
import 'rxjs/add/operator/share';
import { Storage } from '@ionic/storage';
/**
* Generated class for the AccountPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
* @Author 葛明
* @Date 2018-6-8 15:12
* @Note 用戶信息頁面
* @Version 1.0
*/
@IonicPage()
@Component({
selector: 'page-account',
templateUrl: 'account.html',
})
export class AccountPage {
@ViewChild('infinitescroll', { read: InfiniteScroll }) infiniteScroll: InfiniteScroll;
//用戶對象
residentObjs: { userName: string , userVillage: string, sex:string,idCard:number ,loginName:string,loginPwd:string,kinsfolk:string,grid:string ,building:string,unit:string,room:string,userMobile:string,userType?:number} = {
userName: "",
userVillage:"",
sex: "",
idCard : 1,
loginName: "",
loginPwd:"",
kinsfolk: "",
grid:"",
building: "",
unit : "",
room: "",
userMobile:""
};
constructor(public menu: MenuController,public storage: Storage,public app: App,public navCtrl: NavController,public toastCtrl: ToastController, public apiHttp: ApiHttpProvider) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AccountPage');
//this.app.setTitle('用戶信息');
this.update();
}
?
//查詢
update() {
this.storage.forEach( (value, key) => {
if(key=='userName') this.residentObjs.userName=value;
else if(key=='userVillage') this.residentObjs.userVillage=value;
else if(key=='sex') this.residentObjs.sex=value;
else if(key=='idCard') this.residentObjs.idCard=value;
else if(key=='loginName') this.residentObjs.loginName=value;
else if(key=='loginPwd') this.residentObjs.loginPwd=value;
else if(key=='kinsfolk') this.residentObjs.kinsfolk=value;
else if(key=='grid') this.residentObjs.grid=value;
else if(key=='building') this.residentObjs.building=value;
else if(key=='unit') this.residentObjs.unit=value;
else if(key=='room') this.residentObjs.room=value;
else if(key=='userMobile') this.residentObjs.userMobile=value;
else if(key=='userType') this.residentObjs.userType=value;
})
}
}
總結：學習了前面的Ionic、Angular、Cordova后，以及需要的插件，他們之間到底有什么關系呢？
Ionic和Angular：
Ionic只是對Angular進行了擴展，利用Angular實現了很多符合移動端應用的組件，并搭建了很完善的樣式庫，是對Angular最成功的應用樣例。即使不使用Ionic，Angular也可與任意樣式庫，如Bootstrap、Foundation等搭配使用，得到想要的頁面效果
混合開發中扮演的是不同的角色–Ionic/Angular負責頁面的實現，而Cordova負責將實現的頁面包裝成原生應用（Android:apk；iOS:ipa）
就像花生，最內層的花生仁是Angular，花生仁的表皮是Ionic，而最外層的花生殼則是Cordova。
Cordova插件的作用是提供一個橋梁供頁面和原生通信，首先我們的頁面不能直接調用設備能力，所以需要與能夠調用設備能力的原生代碼（Android:Java；iOS:OC）通信，此時就需要Cordova插件了。
Cordova插件能夠再任何Cordova工程中使用，和使用什么前端框架（如Ionic）無關。
Ionic 2中封裝了Ionic Native，方便了Cordova插件的使用，但在Ionic 2中仍然可以像Ionic 1中一樣使用Cordova插件，Ionic Native不是必須的。
即使在Ionic 2中使用了Ionic Native，也首先需要手動添加插件，如：cordova plugin add cordova-plugin-pluginName。
?
