项目结构

When you first generate an ionic 2 app, This is the generated project structure

├── config.xml
├── hooks
├── ionic.config.json
├── node_modules
├── package.json
├── platforms
├── plugins
├── resources
├── src
├── tsconfig.json
├── tslint.json

We will almost always spend 90% of the time in thesrcfolder, as that's where the application logic is. The whole app however is usually loaded from a simplesrc/index.htmlfile, which during build is copied to a new folderwww

src/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="assets/manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('assets/service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

We'll almost never touch this file. Notice the<ion-app></ion-app>: this is the entry point for our ionic app. It's called the root component of our app.

We'll see where it's defined shortly, but this is how Angular 2 apps are built. There is always a<root-component></root-component>kind of structure in theindex.htmlpage. The other parts of this file are just loading ionic build dependencies.

Another interesting part of this file is the service worker script tag that is commented out.Service Workersare out of scope for this tutorial, but they enable offline capabilities when it comes to web apps, and come in handy when building progressive web apps.

框架结构简要介绍

  • config.xml
    • 包含各配置项目， 如 app name, and the package name, that will be used to install our app into an actual device.
  • src
    • This is where we'll spend the most of our time building our app. It contains the structured source code of our app.
  • node_modules
    • Contains the npm packages listed in the package.json file. These are packages necessary for building the ionic app.
  • platforms
    • This is where platform specific builds, build tools and packages/libraries are stored. You will find a folder for the platform your are building on. To add a platform, android for example, simply run ionic platform add android, and this will add the folder _android _folder to this folder.
  • plugins
    • This is where cordova plugins will be stored when they are installed. Cordova plugins enables your app to have native functionality in the mobile device, e.g accessing the media storage of the device, or even the bluetooth API.
  • resources
    • This also contains platform specific resources, such as icons and splash screens.

Thesrc/app/app.component.ts is the root component of our app. It is loaded/declared in thesrc/app/app.module.ts, which simply represents our whole app as a module, which is the loaded in the app/main.dev.ts or app/main.prod.ts, depending on which build you do. This structure supports [Ahead of Time Compilation], an angular 2 feature that offloads compilation from the app bundle.

The src/app/app.html file is the root view for our application. In this case it holds a side menu.

If you are familiar with Angular 2, this should be straight foreward, if not, we'll cover some basics of this structure as we go.

An Ionic 2 app is usually divided into page components which are contained in thesrc/pagesdirectory. You could think of them as what page is viewable on the screen at a particular given time (An Activity for Android Developers). The concept is actually interesting, because pages in ionic 2 are put in a stack, one on top of each other, and navigation back is as simple as removing the top most page in the stack (Last In First Out).

The src/themes folder contains sass files that help in theming the application.

Finally, let's take a closer look at thesrc/app/app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  providers: []
})
export class AppModule {}

Since we are using this Angular 2 module structure, we need to declare before hand all the components, providers, directives or pipes that our application uses. We will be adding these to this file as we go. You can see that this template imports all the pages it requires, adds the to the_decalarations_property of the@NgModuleand also to the_entryComponents_property. This is also where we import our root component defined in the src/app/app.component.ts

results matching ""

    No results matching ""