Once an app is created by the Ionic CLI, the next step is to start building out features and components. The majority of the app will be developed in the
src/├── app/├── assets/├── environments/├── theme/├── global.scss├── index.html├── main.ts├── polyfills.ts├── test.ts└── zone-flags.ts
src/ directory has items such as the
index.html file, configuration files for tests, an asset folder for images, and the main
app/ directory for the app's code.
src/└── app/ ├── app-routing.module.ts ├── app.component.html ├── app.component.spec.ts ├── app.component.ts └── app.module.ts
src/app/ directory contains the root app component and module as well as additional directories that contain app features such as pages, components, services, etc.
The Ionic CLI can generate new app features with the
ionic generate command. By running
ionic generate in the command line, a selection prompt is displayed which lists the available features that can be generated.
$ ionic generate? What would you like to generate?❯ page component service module class directive guard
After a selection is made, the Ionic CLI will prompt for a name. The name can be a path, allowing easy generation of features within an organized project structure.
Any level of nesting is allowed, such as
portfolio/intro. You can easily scope components to pages by using
ionic g component "portfolio/intro/About Me", for example.
$ ionic generate? What would you like to generate? page? Name/path of page: portfolio █
name of the generated feature can be entered on the command line:
$ ionic g page "User Detail"> ng generate page "User Detail"CREATE src/app/user-detail/user-detail.module.ts (564 bytes)CREATE src/app/user-detail/user-detail.page.scss (0 bytes)CREATE src/app/user-detail/user-detail.page.html (138 bytes)CREATE src/app/user-detail/user-detail.page.spec.ts (720 bytes)CREATE src/app/user-detail/user-detail.page.ts (280 bytes)UPDATE src/app/app-routing.module.ts (475 bytes)[OK] Generated page!
The Ionic CLI uses the underlying framework tooling to stay close to best practices. For
@ionic/angular, the Angular CLI is used under the hood.
After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving.
For more details, run
ionic g --help from the command line or see the documentation for