欧洲杯官网投注

Ionic Docs Docs

Native

Search docs/
Search docs/
Ionic Docs Docs
  • Structure
  • Responsive Grid
  • Global StylesheetsCSS Utilities
  • Basics
  • Platform Styles
  • CSS VariablesColorsThemesDark ModeAdvancedColor Generator
  • Overview
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatformTestingStoragePerformanceProgressive Web Apps
  • Overview
  • Quickstart
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatform UtilsProgressive Web AppsTesting
  • Overview
  • Build Your First App
  • LifecycleNavigation/Routing
  • Animations
  • Gestures
  • iOS App Store
  • Android Play StoreProgressive Web App (PWA)Electron Desktop App
  • Security
  • Debugging
  • Build ErrorsRuntime ErrorsNative ErrorsCORS Errors
  • Fundamentals
  • Cross PlatformWeb ViewWhat are PWAs?
  • How to Contribute
  • Code of Conduct
  • Glossary
  • VersioningRelease NotesGitHub Changelog
  • Support Policy
  • Browser Support
  • Migration
  • Books
  • CoursesGuidesPostsToolsVideos
    Scaffolding
    Contents

    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 thesrc/app/ directory.

    Project Structure src/
    assets/
    theme/
    global.scss
    index.html
    main.ts
    polyfills.ts
    test.ts
    zone-flags.ts

    Thesrc/ directory has items such as theindex.html file, configuration files for tests, an asset folder for images, and the mainapp/欧洲杯官网投注 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

    Thesrc/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 runningionic 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 asportfolio/intro. You can easily scope components to pages by usingionic 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 andname欧洲杯官网投注 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 seethe documentation forionic generate.

    Previous
    Previewing
    Next
    Developing for iOS