365体育投注开户

Search docs/

Scaffolding out an App

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/365体育投注开户 directory.

Project Structure

src/
global.scss
index.html
main.ts
polyfills.ts
test.ts
zone-flags.ts

The src/ directory has items such as the index.html file, configuration files for tests, an asset folder for images, and the main app/365体育投注开户 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

The 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.

Generating New Features

The Ionic CLI can generate new app features with the ionic generate command. By running ionic generate365体育投注开户 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

Alternatively, the type and name365体育投注开户 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/angular365体育投注开户, 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 ionic generate.

Previous
Starting
Next
Migration