Background: The previous project was written with React+AntDesignPro. A new project will be written in two weeks. The project manager asked me to write it in Angular+ Ionic, so I started my learning journey. Start by creating an Ionic project! Come on!!

Step 1: Install the Ionic

To open the command window as an administrator, you must first install the node environment and run the command:

npm install -g ionic

The diagram below:

Step 2: Create an Ionic project

2.2: Run the command for the New Ionic project

ionic start

Command introduction:

// Set a new Project name: testIonic Project name: testIonic // Set a new Project name: testIonic // Set a new Project name: testIonic Angular // Select the download project template example :blank(blank) Starter template: blank

The diagram below:



A [INFO] prompt will appear when the project is successfully created:

Step 3: Run the Ionic project

3.2: Run the Project Run command:

ionic serve



An address appears when the run is successfulhttp://localhost:8100



Open this address on the page, the following page will appear on behalf of the whole step run successfully!

Run the Ionic project using VS Code

Step 1: Open your project folder with VS Code
Step 2: Run the project

Open the NPM folder and move the mouse over Start. A small arrow will appear on the right side. Click Run

(Because of lazy typing command, click start can run. It could be above VS codeterminal, create a new terminal and enter ionic serve to produce the same effect.)

A window address appears after successful running.http://localhost:4200

This means you have successfully run the project with VS Code ~~



The browser opens the window and the address appears on the following page.Delicious ~ ~

Introduction to Project Catalog

The project directory is as follows:

SRC // SRC /app // The root of the application (components, pages, services, modules) SRC // Assets // Resources (static files, images, JS frames...) SRC/Theme // Theme file, which contains an SCSS file, SRC /global.scss // global CSS file SRC /index.html // index entry file SRC /main.ts // main entry file SRC /polyfills. Ts // This culture contains Angular Need to fill, Json // Angular configuration file ion.config. json // Ionic configuration file package.json // Configure the metadata of the project and the dependencies needed to manage the project before loading the application Json // The root directory of the TypeScript project required to configure the project metadata and manage the tsconfig.json // TypeScript project. Specifies the root file used to compile the project and the compile options tslint.json // Formatting and validating TypeScript

Now try modifying the contents of the home file
// Change the contents of the home.page.html file to: <ion-header [translucent]="true"> <ion-toolbar> <ion-title> Blank </ion-title> </ion-toolbar> </ion-header> <ion-content  [fullscreen]="true"> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">Hello world! </ion-toolbar> </ion-toolbar> </ ion-content class="ion-padding"> <div id="container"> <strong> <a target="_blank" rel="noopener noreferrer" <a target="_blank" rel="noopener" Href = "https://segmentfault.com/u/timor_5d5e2be9e8378" > address < / a > < / p > < / div > < p > {{text}} < / p > < ion - button (click)="onChangeText()"> </ion-button> </ion-content> </ion-content>
// Modifies home.page.ts to import {Component} from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { text = 'Our first Ionic app'; onChangeText() { this.text = 'changed! '; }}

When the page is refreshed, it looks like this:



After clicking the button:The words have changed



Click the link to jump to my blog home page ~