ionic3 使用angular4，与ionic1区别比较大。这里记录一些框架架构。
其中AngularJS2的构架结构可以参考：
AngularJS2学习笔记
项目主体
resources
放icon.png和splash.png
通过
ionic resources --icon
ionic resources --splash
ionic resources
用来生成桌面图标和启动界面
src 文件夹
项目主要在src中编码
assets
assets 里放资源文件，主要是一些图片。
app 目录
这里主要需要修改的是app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { AuthModule } from '../pages/auth/auth.module';
import { SettingModule } from '../pages/setting/setting.module';
import { DeviceModule } from '../pages/device/device.module';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpModule} from '@angular/http';
import { HttpService } from '../providers/HttpService';
import { ScreenOrientation } from "@ionic-native/screen-orientation";
@NgModule({
declarations: [
MyApp ,
TabsPage ,
HomePage,
],
imports: [
BrowserModule,
AuthModule,
SettingModule,
DeviceModule,
IonicModule.forRoot(MyApp),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp ,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,ScreenOrientation,
{provide: ErrorHandler, useClass: IonicErrorHandler},HttpService
]
})
export class AppModule {}pages 目录
所有模块的文件放在pages下
其中 auth/user 模块，list、login、password、register是该模块下的几个功能，service中负责与http的通讯。
auth.module.ts 定义这个模块。
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { AuthModule } from '../pages/auth/auth.module';
import { SettingModule } from '../pages/setting/setting.module';
import { DeviceModule } from '../pages/device/device.module';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpModule} from '@angular/http';
import { HttpService } from '../providers/HttpService';
import { ScreenOrientation } from "@ionic-native/screen-orientation";
@NgModule({
declarations: [
MyApp ,
TabsPage ,
HomePage,
],
imports: [
BrowserModule,
AuthModule,
SettingModule,
DeviceModule,
IonicModule.forRoot(MyApp),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp ,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,ScreenOrientation,
{provide: ErrorHandler, useClass: IonicErrorHandler},HttpService
]
})
export class AppModule {}provider
httpService
import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class HttpService {
constructor(private http: Http) {
}
public get(url: string, paramObj: any) {
return this.http.get(url + this.toQueryString(paramObj))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
public post(url: string, paramObj: any) {
let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
return this.http.post(url, this.toBodyString(paramObj), new RequestOptions({headers: headers}))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
public postBody(url: string, paramObj: any) {
let headers = new Headers({'Content-Type': 'application/json'});
return this.http.post(url, paramObj, new RequestOptions({headers: headers}))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
private handleSuccess(result) {
if (result && !result.success) {//由于和后台约定好,所有请求均返回一个包含success,msg,data三个属性的对象,所以这里可以这样处理
console.info(result.msg);//这里使用ToastController
}
return result;
}
private handleError(error: Response | any) {
let msg = '请求失败';
if (error.status == 0) {
msg = '请求地址错误';
}
if (error.status == 400) {
msg = '请求无效';
console.log('请检查参数类型是否匹配');
}
if (error.status == 404) {
msg = '请求资源不存在';
console.error(msg+'，请检查路径是否正确');
}
console.log(error);
console.info(msg);//这里使用ToastController
return {success: false, msg: msg};
}
/**
* @param obj 参数对象
* @return {string} 参数字符串
* @example
* 声明: var obj= {'name':'小军',age:23};
* 调用: toQueryString(obj);
* 返回: "?name=%E5%B0%8F%E5%86%9B&age=23"
*/
private toQueryString(obj) {
let ret = [];
for (let key in obj) {
key = encodeURIComponent(key);
let values = obj[key];
if (values && values.constructor == Array) {//数组
let queryValues = [];
for (let i = 0, len = values.length, value; i < len; i++) {
value = values[i];
queryValues.push(this.toQueryPair(key, value));
}
ret = ret.concat(queryValues);
} else { //字符串
ret.push(this.toQueryPair(key, values));
}
}
return '?' + ret.join('&');
}
/**
*
* @param obj
* @return {string}
* 声明: var obj= {'name':'小军',age:23};
* 调用: toQueryString(obj);
* 返回: "name=%E5%B0%8F%E5%86%9B&age=23"
*/
private toBodyString(obj) {
let ret = [];
for (let key in obj) {
key = encodeURIComponent(key);
let values = obj[key];
if (values && values.constructor == Array) {//数组
let queryValues = [];
for (let i = 0, len = values.length, value; i < len; i++) {
value = values[i];
queryValues.push(this.toQueryPair(key, value));
}
ret = ret.concat(queryValues);
} else { //字符串
ret.push(this.toQueryPair(key, values));
}
}
return ret.join('&');
}
private toQueryPair(key, value) {
if (typeof value == 'undefined') {
return key;
}
return key + '=' + encodeURIComponent(value === null ? '' : String(value));
}
}constants
export const APP_SERVER_URL = 'http://192.168.1.5'
生成器
生成Page
ionic g page [PageName]
生成Component
ionic g component [ComponentName]
创建指令
ionic g directive [DirectiveName]
创建服务提供者
ionic g provider [ProviderName]
创建管道pipe
ionic g pipe [PipeName]
