Ionic Getting Started tutorial-ionic routing details (state, route, resolve) (GO)

Http://blog.csdn.net/onil_chen/article/details/51758696?appinstall=0

Today, let's talk about Ionic's routing configuration.

Ask a lot of friends, because this content is more, so I always want to wait for me to learn more about the route of the tutorial.

But some very simple also have friends do not understand, so I went ahead of this tutorial.

Hope to be a little help to everyone, about my missing part, back to the tutorial supplement it.

But the basic content, simple application, should be mentioned in this tutorial.

First we learn from the new project of the tabs type (the project is really awesome and you can take the time to take a look).

Let's start with the code START process and look at this route.

The IDE you are using is webstorm9.0.3

First let's run this project, right click on index.html, choose Run with browser, choose Google Chrome.

Open the Developer tool (shortcut key F12) in the open Google Browser,

Then choose the Phone Debug mode (Developer toolbar, the button next to the magnifying glass, maybe the phone looks or something else, version problem, I forgot what the icon looks like),

Select Iphone6. and then refresh. The interface is re-adapted. (Just for Better looks)

Since this class is about routing, the first thing we need to focus on is

Http://localhost:63342/routeDemo/www/index.html#/tab/dash

Why do you have access to this address? #tab/dash This is the route, but why the access is this route, and what meaning, how to define it?

First we do an operation, in the address bar to access the http://localhost:63342/routeDemo/www/is to remove the Index.html#/tab/dash this is not part of the content.

After the visit, you will find that even if you only visit http://localhost:63342/routeDemo/www/last visited or Http://localhost:63342/routeDemo/www/index.html#/tab/dash

Here are two knowledge points, one is the Web, when the URL is access to a folder of the site, the browser will automatically open the folder under the Index.html file.

That is, the code above is opened, and the code is parsed from top to bottom in order. The ng-app= "starter" that runs to the body is the script that automatically launches the app.

Will find the module named starter in the module pool (which I freely say, easy to understand). Yes, the module, no application, you have not read wrong.

The end of the paper on the light, I know this matter to read the source (read the fucking source code)

We open app.js to view the source code

Can see here defines the name is called Starter module, the front automatically start is it, behind the parentheses inside the content, can be understood as the dependency of this module, that is, the module to run, is to operate in these three modules on the basis of the line, so that is not very rigorous, But it's possible for novices to understand that.

Generally in the project, the return value of this module will be saved, so it is convenient to operate in the code.

var app = Angular.module (name,[]) Such a form, in the code directly using the app is the current application, more convenient.

Well, let's keep looking down.

Take a look at the previous. Run () so that you can understand what is being done when the app is running, and it will be useful to see the content as it is packaged. So your project is just a single saved Web project and it doesn't matter if you delete it.

this. Run () can also be used to introduce Rootscope, the global controller context, to achieve some simple data transfer, or general functions of the unified processing. The wording is as follows

. Run (function ($rootScope) {$rootScope. Debug = True;}) In this way you can get this global variable by introducing $rootscope into the sub-controller, such as when you print the log.

$rootScope. Debug && console.log ("Run Log")

It is also important to note that the. Run () is directly connected to the Angular.module (name,[]). Run () Note that this is a chain-like notation.  There are statements after the semicolon programming habits of small partners, you can note that, as mentioned above, you can take this apart write var app = Angular.module (name,[]); It is possible to disconnect the App.run (); The good thing about this is that the contents of these two parts can be written in different files. Some people like to separate the contents of this part of the route, which is how it can be achieved.

Or continue to look at the source code

. config () can be understood as the configuration file that the application runs, and can be used to define some basic configuration, which is introduced in $stateprovider, which is used to configure routing. The second parameter is actually not available. But this is used to define that when you access the link without any routing information, the system automatically accesses the otherwise configured route. Just like the address http://localhost:63342/routeDemo/www/we first visited. The browser automatically helped us to get the address http://localhost:63342/routeDemo/www/index.html. This is an address without routing information, so the otherwise configured here will help us to automatically fill in the #/tab/dash. This explains why we have direct access to the project directory and will access the Http://localhost:63342/routeDemo/www/index.html#/tab/dash.

Next, let's look at a detailed routing configuration. Here are two things. Whether it is a master (template).

We look at the tab of this route, the URL is the routing address, abstract:true refers to set this interface for the Master interface, so to understand, this is a shelf, all the sub-interface has this unified interface.

The Templateurl is the interface that defines the corresponding route view. Here we are still around the http://localhost:63342/routeDemo/www/index.html#/tab/dash. This link. We need to explain what this tab is.

Here we make an interesting attempt, we log out of the routing configuration inside the $urlrouterprovider.otherwise ('/tab/dash ') to prevent us from entering the wrong route, the system automatically jump. Then we access the Http://localhost:63342/routeDemo/www/index.html#/tab in the browser only to the tab level. (Note that only modifying the route in the browser will not reload the page, which is one of the advantages of routing, so after you refresh the page, modify the route so that the code we just modified will be valid)

Then we will see two shallow boxes on the interface.

Look carefully, or you'll think there's nothing. We're looking at the HTML from the console.

Note that this view is parsed. Well, let's put it aside for the moment, and we'll look at another route configuration

The first is the name of the route Tab.dash the point here and the point in JS as an object attribute, which represents a dependency. The dash this view is a sub-view of the tab.

There is an obvious difference between this routing configuration and the tab routing configuration, which is that there is an additional view that can be simply understood to define the details of the views. Format is views:{name:{parms}}

The most interesting thing here is the ' tab-dash ' view name. First of all to guide the view where the name comes from, and what does it mean?

We open tabs.html file

You can see that there is a ion-nav-view in the tab defined in tabs that the name is defined as ' tab-dash ' which means. Tab.dash This route defines that the view of this route is drawn in the ' Tab-dash ' tab view.

This ion-nav-view we have seen <ion-nav-view ></ion-nav-view> in index.html. So how do you understand it here?

Let's make a little change to the code. Change the tab configuration. Add the Views property.

Then give index.html the <ion-nav-view ></ion-nav-view> add attribute name= ' main '.

Then run the project and the project runs successfully. Once you've defined a name for each view, it's a lot easier to understand. Let me draw a simple diagram to illustrate these relationships.

Here I draw a comparison between the views, easy to understand. But the relationships between these views are based on the instructions below.

First of all, we understand that the system defaults to a route that does not define the views property, and they are drawn by default in the top-most main view. From the top down, the first view without a defined name.

For example, we often have some interfaces in the project that do not require the following tab switch. So we can define them as without the views attribute, that is, the route that does not declare the owning view, they will be drawn in the main view, they and the tabs view is the sibling relationship. This view is drawn directly in the main viewing, so the blue tabs view in the diagram does not actually exist.

Tabs View there are a number of sub-views defined below, which control these sub-views according to the code can only be displayed at the same time, the other child views will be put into the view cache. So the purple view on the way should be the same as the tabs view, but they are there. When these views are exactly the same size, then we look like we have only one view. Here I am drawing a simplified version of the tabs toggle view relationship that is easy to understand.

Face View Side

According to the above two different angles of the diagram should be able to understand how the tabs switch. What we can see is the top level, so the tabs toggle bar defined in the tabs master is in every sub-view, that's how it's done.

So the view should not be defined, how to define can be based on the project needs a flexible choice. A route defined in the same view will have a history reservation when switching, and you can use the Back button directly to return the operation. But in the sub-view, that is, there is no view to set views, there is no history between them, the return between them need a manual supplement function, I think it should be where I use the wrong. But it hasn't been fixed yet.

After reading the properties defined in the new project, let's take a look at a few of the properties that are not mentioned in the frequently used new project.

1. Template

This property and Templateurl are used to define the HTML template for the view, which accepts an HTML string, which accepts the address of a file path. Better understand.

2, Prefetchtemplate

The default is true. This setting is false, which means that the HTML template is not loaded in advance. Here we look at the log of the new project

Here we go through the routing configuration when we start the project, and all the HTML is preloaded into the cache. Yes, the switch between the views behind it will be smooth.

But there is also a problem, that is, when starting the project, to load too many files, some files are not necessarily useful, in many levels below the file, rarely used.

So you can choose to set some of the infrequently used views to false so that you don't load them in the first place.

When doing the load on demand. You can also set this value to False. JS files are loaded on demand, access to the first page only loaded a JS file loaded dozens of hundreds of HTML files, which is not scientific.

3, Resolve: Pre-loading
Using the preload feature, you can preload a series of dependencies or data and inject them into the controller.
The resolve in the route ensures that the data guarantee (promises) is loaded prior to the route arrival.
Preloaded objects require an object, the key minutes of this object are injected into the controller's dependencies, and the value of this object is the service that needs to be loaded.
If a string is passed in, the route view matches the service that is already registered.
If a function is passed in, the function is injected, and the value returned by the function is one of the controller's dependencies.
If the function returns a data guarantee (promise), the data is guaranteed to be preloaded before the controller is instantiated and the data will be injected into the controller.

This is used to implement the on-demand load base, there are other module dependencies, or the implementation of the predecessor function, it is done by it.

Here are a few common events to be talked about.

1, $ionicView. Enter

An event that responds when entering a view, using the on method in the controller to listen for triggering

2, $ionicView. Leave

The event that responds when the view is left. Note that if you jump from the A interface to the B interface, the B interface's enter responds first and then responds to the leave event of the A interface.

3. $stateChangeStart

Switching routes is a response to events that can be used to determine what a pre-route is, and to control what functions are executed when entering certain pages, such as entering certain pages and displaying the buttons in the upper right corner.

For the time being, there is so much to be remembered, and one that needs to be explicitly focused on is the resolve attribute. Follow-up in-depth study, the involvement of it will be more.

This class does not have a demo, just create a new tabs type of project and then look at it.

There are other questions you can find in the following ways

Ionic Getting Started tutorial-ionic routing details (state, route, resolve) (GO)