Ionic for Angular basic operation of creating templates

[Ionic CLI] The version information is as follows:

Knowledge points to learn in this section:

• Ionic creates a template: [ionic start ionDemo01], the prompt is as follows:

It is prompted to select the js framework. Since [ionic 4.x] and later versions support [Angular] [React] [Vue], the creation command is as follows:

[Ionic strat ionDemo01 --type=angular], the prompt is as follows:

[Ionic cli] Version 6.2.1 provides the template [template] information as shown in the figure above, and you can select a template information when creating a project;

1. [Tabs] ==" Startup project with a simple tabbed interface;
2. [Sidemenu] == "The startup item of the side menu with navigation in the content area;
3. 【Blank】==》blank project/empty template;
4. [List] == ​​"Startup items with a list;
5. [My-first-app] == "Use the gallery to build a sample application for the camera;
6. [Conference] == "A kitchen-sink application that shows all the functions provided by Ionic;

Here we choose [tabs] template to create [ionic for angular] project: [ionic start ionDemo01 tabs --type=angula]

? Create free Ionic account? (y/N) Select n to not create an account temporarily;

 Continue to follow the prompts, enter the project just created [ionDemo01]: [cd ionDemo01], and install the project dependencies: [npm install]

 Run the project [ionDemo01], [ionic serve] to check whether the project has run successfully:

 The above has created the [ionic] tabs template project, and then try the adjustments inside:

1. The default template adds a bottom navigation bar;
2. Page jump and return;

The directory structure of creating [tabs] template project is as follows, similar to ng:

 In the [ionic for angular] project, the page in the ionic template is the module in ng, and then the lazy-loading method of routing is implemented, the embodiment of the module engineering application, continue to complete the above goal [try to adjust].

Create a tab4 page, [ionic g page tab4], and then dynamically add the following configuration in the [app-routing.module.ts] routing configuration:

 

 Here we temporarily delete the configuration and adjust it to the routing configuration of tab4 page/module. The adjustment is as follows:

 Then add the bottom menu bar in the html component of tabs => name [tab4] (add in [ion-tab-bar])

 Save and run [ionic serve], the display is as follows: [ion-icon] icon display=》https://ionicons.com/ 

 Continue to implement page jump (similar to ng) and return, continue to create a page module, [ionic g page naws], add a button to the html page of tab1, click to jump to the news page, and then the news page displays the corresponding news information , And you can return to tab1;