Ionic2 src folder Analysis __ionic2

The SRC folder in Ionic2 is our main work area and we look at the structure of this folder: app assets pages theme

Altogether four folders. The main two folders are app and pages

App is the root directory for Ionic applications, and the pages are child-built.
Let's look at the five files below the app.
APP.SCSS is used to set the global CSS style, generally we do not need, so there is nothing to say.
App.module.ts we call it the root module, unless you have a great enough to write an oversized application, there is only one root module in general, and all modules are injected into the module. Let's analyze what's going on here.

Above is the entire structure;

We first introduce the Ngmodule and ErrorHandler modules in the core library of ANGULAR2 for the normal work and error handling mechanism of ANGULAR2.
Then, the Ionicapp,ionicmodule,ionicerrorhandler three modules are introduced into the core library of Ionic2 for Ionicapp, module and error handling mechanism.

Introducing the root component

To introduce a child component

Note that this is the introduction of Status-bar and Splash-screen services in the ionic-native, which is the Ionic2, in the original library (from the belt), and this knowledge point will be in detail in other articles.

In the above we have said that this file is a root module, we have also introduced the ANGULAR2 ngmodule mechanism. What do you mean? That is, all the introduced root modules/modules/services have to be injected in. Otherwise, everything is in vain, it is like a strip.
The declarations and entrycomponents arrays are identical inside, injecting your root component and subassembly (Component) into it.
Imports tell Ionicmodule the Ionic root module, which is the root component of your application. The root component of this case is Myapp.bootstrap is to tell you Angular2 which is the root component of your ionic. This case is Ionicapp. So this logic is MyApp < Ionicmodule < Ionicapp < Angular2.

Providers is used for service injection, so just bring in the service packs we just introduced.

All right, here we have a complete root module, and we just need to expose the Appmodule root module through class. So the question is, who is it exposed to? The answer is main.ts this file.

This file has only three lines of code, which introduces the Platformbrowserdynamic module in Angular2, telling Angular2appmodule is the core of everything.

Here we should be able to understand the relationship between our own application and ionic and Angular2, and I will return to the application itself.

The name of the root component used by either ANGULAR2 or Ionic2 is app.component.ts. Here is the code inside the file:

or a line of analysis:

We introduced the components module from the ANGULAR2 Core library, introduced the Platform platform service in the Ionic core library, and introduced the status bar and the prologue service from the Ionic native library, I say here, these two services are both iOS and Android native function, Ionic service is an imitation of native applications.

The introduction of subassembly tabspage, in fact, is the navigation bar components, there is nothing to say. Other articles will elaborate.

We declare the template to be app.html in the @component, and here is the app.html

Here, a lot of people estimate to be ignorant, what ghost. Why is there only one <ion-nav> tag in the template for a root component? [Root] what the hell. This is in fact the Ionic API, here to remember that this is a navigation bar of the shell, which is wrapped in rootpage this value is good.

Here we can package the root component of the entire app, rootpage the type of the value can be any, which is the Tabspage component we introduced above. So the navigation that we build in Tabspage this subassembly can be rendered to the root component, which is always there whenever in this application.

The constructor function is one of the things we want to talk about, which is similar to the callback function of controller in ANGULAR1, which means that when myapp the root component is called externally, the service items it injects are run.

Platform.ready () indicates that the ionic is fully loaded and the platform is in position. In the callback function of the then () function, the status bar enters the default style state, and the open application screen is hidden.

Well, here, there are all the files on the SRC folder of Ionic2 to be explained.
As for the files in the pages directory and the root components in the app folder are basically the same, you can understand them.