Ionic - 开始项目

一、目录结构分析

 

hooks:编译 cordova 时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中node_modules :node 各类依赖包
resources :android/ios 资源(更换图标和启动动画)src:开发工作目录，页面、样式、脚本和图片都放在这个目录下

www:静态文件
platforms:生成 android 或者 ios 安装包路径( platforms\android\build\outputs\apk:apk

所在位置)执行 cordova platform add android 后会生成plugins:插件文件夹，里面放置各种 cordova 安装的插件
config.xml: 打包成 app 的配置文件
package.json: 配置项目的元数据和管理项目所需要的依赖
tsconfig.json: TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选项tslint.json:格式化和校验 typescript

 

src 工作目录:

 

app:应用根目录
assets:资源目录(静态文件(图片，js 框架。。。)各pages:页面文件，放置编写的页面文件，包括:html，scss，ts。theme:主题文件，里面有一个 scss 文件，设置主题信息。

 

二、src 下面文件分析

 

 

三、app.module.ts 分析

 

配置信息：

declaration 声明组件
import 引入/依赖的模块
bootstrap 启动的模块
entryComponents 配置不会在模板中使用的组件
provider 配置服务

 

 

//这个根模块会告诉 ionic 如何组装该应用
import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';
import { ComponentsModule } from '../components/components.module'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; /*根组件*/
//其他组件
                                                 
 
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact'; import { HomePage } from '../pages/home/home';
import { NewsPage } from '../pages/news/news';
//底部 tab 切换
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({
declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    NewsPage,
    TabsPage
],imports: [
BrowserModule, ComponentsModule, IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [ /*配置不会在模板中使用的组件*/ MyApp,
AboutPage,
ContactPage,
    HomePage,
    NewsPage,
    TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

 

 

 

 

 

四、创建组件

 

创建的组件都需要在app.mudule.ts里全局注册

1、cd 到我们的项目目录

2、通过 ionic g component 组件名称创建组件

3、创建完成组件以后会在 src 目录下面多一个 components 的目录，这个目录里面有我们用命令创建的所有的组件。

4、如果我们要使用这些组件必须在 app.module.ts 里面注册（import）我们的模块，注册完成后就可以在page里使用此组件

五、创建页面以及页面跳转

1、cd 到我们的项目目录

2、通过 ionic g page 组件名称创建组件

3、import 目标页面

4、给标签增加click方法，并写入方法内容，跳转到步骤3里import到页面

 

关于导航，从一个页面导航到另一个页面，只需将新页面推入或弹出到堆栈上即可： 

（1）push()：导航到新页面 
（2）pop():倒退页面