Getting Node and NPM
下载安装 NodeJS installer
Ionic CLI and Cordova
npm install -g ionic cordova
(-g 代表全局安装 ionic 与 cordova)
Create your first Ionic app:
ionic start helloWork blank
To run your app
cd helloWork
ionic serve
Ionic Tutorial
ionic start MyIonicProject tutorial
start - 创建 app 命令
MyIonicProject - 这是项目名称,又是应用名称
tutorial - 项目的初始化模板
Ionic 提供了以下的官方模板:
tabs: 一个简单的 3 个tab布局
sidemenu: 一个具有侧边栏的布局
blank: 一个只有一个页面的空白布局
super: 一个具有超过 14 个可以使用的页面设计
tutorial: 入门引导项目
项目目录结构:
src/index.html 是应用的主入口(the main entry point for the app)
Ionic 找到 标签:
以及该标签后面的脚本,这些脚本 polyfills.js, vendor.js, main.js 都会被编译系统生成。
我们的代码都是在 src 目录中。这也是一个 Ionic app 大部分工作所发生的地方。
运行 ionic serve, src 目录中的代码会被转换正确 Javascript 代码,为浏览器所能运行理解的。(目前是 ES5)
src/app/app.module.ts 应用入口(the entry point of our app)
@NgModule({
declarations: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
imports: [BrowserModule, IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
providers: []
})
export class AppModule {}
主模块 NgModule,整个应用的控制中心枢纽。
主模块中,设置了主组件为 MyApp,在 src/app/app.component.ts。该组件是 被 app 第一个加载的。同时,该组件将会是一个用于加载其他组件的容器。
(你可以将 app.component.ts 理解为一个整个应用的布局,其他所有的组件都会被加载到该布局中。)
app.component.ts 中,设置了模板 src/app/app.html。