2018-02-26-Ionic app-initialize

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 找到 <ion-app> 标签: <ion-app></ion-app>

以及该标签后面的脚本，这些脚本 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。