Ionic Routing (page switching)

Ui-router works very much like the Angular routing controller, but it only focuses on the state.
• A state corresponds to a page location in the entire user interface and navigation of the application
• Define user interface and interface behavior for specified locations by defining properties such as controller, template, and view
• Resolve some of the recurring parts of the page in a nested way
The simplest form
Templates can be used in the simplest way to specify

 in Index.html--//  app-states.js (or whatever you want to name it)stateprovider.state (' contacts ' })

Where will the template be inserted?
When the state is activated, its template is automatically inserted inside the element that contains the Ui-view attribute in the template corresponding to the parent state. If it is a top-level state, then its parent template is index.html.
Activation status
There are three ways to activate a state:
1 call \) State.go () method, which is an advanced convenience method;
2 Click the link containing the UI-SREF directive;
3 Navigate to the URL associated with the state.
Templates templates
There are several ways to configure a template for a state.
Method One: Configure the template property to specify an HTML string, which is the simplest way to set up templates

Stateprovider.state (' Contacts '})

Method Two: Configure the Templateurl property to load the template at the specified location, which is a common way to set up the template.

Stateprovider.state (' Contacts 'contacts.html '})

The value of Templateurl can also be a URL returned by a function with a preset parameter stateparams.

Stateprovider.state (' Contacts 'function  (stateparams) {return '/partials/ Contacts. ' + Stateparams.filterby + '. html ';}})

Method Three: Returns the HTML of the template through the Templateprovider function.

Stateprovider.state (' Contacts 'function  (timeout, stateparams) {return timeout ( function () {return ' );}})

If you want to have some default content before the state is activated, the default content will be replaced by the template that corresponds to the state when the state is activated.


Some content would load here!


Controllers Controller
You can assign a controller to a template. Warning: The controller will not be instantiated if the template is not defined.
To set up the controller:

Stateprovider.state (' Contacts ''function= ' My Contacts ';}})

If a controller is already defined in the module, you only need to specify the name of the controller:

Stateprovider.state (' Contacts 'Contactsctrl '})

Use the Controlleras syntax:

Stateprovider.state (' Contacts 'Contactsctrl as Contact ')

For more advanced needs, you can use Controllerprovider to dynamically return a controller function or string:

Stateprovider.state (' Contacts 'function(stateparams) {var ctrlname = Stateparams.type + "Controller"; return ctrlname;}})

The controller can use the \ (Scope.on () method to listen for event state transitions.
The controller can be instantiated as needed when the corresponding scope is created. For example, when a user clicks a URL to manually navigate a state, \) Stateprovider loads the corresponding template into the view, and binds the controller and the scope of the template together.
Resolver Resolve
You can use resolve to provide optional dependency injection for the controller.
A resolve configuration item is an object that is composed of key/value.
key–{string}: The dependency name of the injection controller.
factory-{string|function}:
? String: Alias for a service
? Functions: The return value of the function is used as a dependency injection, and if the function is a time-consuming operation, then the controller must wait for the function to complete (be resolved) to be instantiated.
Example
Before the controller is instantiated, each object in resolve must be resolved, and notice how each resolved object is injected into the controller as a parameter.

$stateProvider. State (' MyState ', {resolve:{//Example using function with simple return value.     //Since It ' s not a promise, it resolves immediately.Simpleobj:function(){        return{value: ' simple! '}; },     //Example using function with returned promise.     //This is a typical way to use     //please inject any desired service dependencies to the function, for example $httpPromiseobj:function($http) {//$http Returns a promise for the URL data        return$http ({method: ' GET ', url: '/someurl ')}); },     //Another promise example.     //if you want to process the returned results, you can use the. Then method     //This is another typical way to usePROMISEOBJ2:function($http) {return$http ({method: ' GET ', url: '/someurl ')}). Then (function(data) {returnDosomestufffirst (data);     }); },             //using the service name example, this will look for a service named ' Translations ' in the module and return the service     //note:the Service could return a promise and     //It would work just like the example aboveTranslations: "Translations",     //Use the Service module as a dependency on the solution function, passing in a parameter     //tip: A dependency $stateParams represents a parameter in a URLTRANSLATIONS2:function(translations, $stateParams) {//assume that Getlang is a service method         //That's uses $http to fetch some translations.         //Also assume our URL is "/:lang/home".Translations.getlang ($stateParams. lang); },     //Example showing returning of custom made promiseGreeting:function($q, $timeout) {varDeferred =$q. Defer (); $timeout (function() {Deferred.resolve (' Hello! '); }, 1000); returndeferred.promise; }  },  //The controller will wait until the above solution is resolved before it is instantiatedControllerfunction($scope, Simpleobj, Promiseobj, PromiseObj2, translations, translations2, greeting) {$scope. simple=Simpleobj.value; //the objects in Promiseobj can be safely used here$scope. Items =Promiseobj.items; $scope. Items=Promiseobj2.items; $scope. Title= Translations.getlang ("中文版")). title; $scope. Title=Translations2.title; $scope. Greeting=greeting; }})

To provide custom data for the state object
You can provide custom data to the state object (using the Data property is recommended to avoid conflicts)
An example of object-based and string-based definition of state

var contacts =' contacts 'contacts.html '5"Blue"}} Stateprovider.state (Contacts). State (' contacts.list 'contacts.list.html '"Red" } })

The data defined above can be accessed in the following ways:

function//  output 5; // output "blue";}

OnEnter and OnExit callback functions
The OnEnter and OnExit callback functions are optional configuration items, which are called when a state becomes active and inactive. The callback function can also access all resolved dependencies.

Stateprovider.state ("Contacts", {Template:' , Resolve: {title:' My Contacts '},controller:function(scope, title) {Scope.title= ' My Contacts ';},//title is a solution to a dependency, which is also used to resolve dependenciesOnEnter:function(title) {if(title) { ... Dosomething.}},//title is a solution to a dependency, which is also used to resolve dependenciesOnExit:function(title) {if(title) { ... Dosomething ...}})

State Change events
All of these events are in \) Rootscope scope trigger
Statechangestart-Triggers when the template starts parsing

Rootscope.on (' Statechangestart 'function(event, ToState, Toparams, FromState, Fromparams) {...})

Note: Using Event.preventdefault () can prevent template parsing from occurring

Rootscope.on (' $stateChangeStart 'function// // a ' Transition prevented ' ERROR})

  • $stateNotFound-v0.3.0-The status is looked up by the state name when transition occurs when the state cannot be found. The event is broadcast on the scope chain, allowing only one chance to process the error. Unfoundstate will be passed as a parameter to the event listener function, the following example can see the three properties of Unfoundstate. Use Event.preventdefault () to prevent template parsing,  

// somewhere, assume lazy.state have not been defined$state. Go ("Lazy.state", {a:1, b:2}, {inherit:false c3>}); // somewhere elsescope.on (' statenotfound 'function//  "Lazy.state"  //  {a:1, b:2}//  {inherit:false} + default options})

statechangesuccess-Triggers when template parsing is complete

Rootscope.on (' statechangesuccess 'function(event, ToState, Toparams, FromState, Fromparams) {...})

Statechangeerror-Triggers when an error occurs during template parsing

Rootscope.on (' statechangeerror 'function(event, ToState, Toparams, FromState, Fromparams, error) { ... })

View Load Events View loading event
viewcontentloading-When the view begins to load, the DOM render is triggered before it finishes, and the event is broadcast on the \ (scope chain).

Scope.on (' viewcontentloading 'function// Access to all the view Config Properties. // and one special property ' TargetView ' //  -The event is emitted by the scope of the view when the view loading is complete and the DOM rendering is   complete. Scope.on (' viewcontentloading ', Scope.on (' viewcontentloaded 'function( Event) {...});

Ionic Routing (page switching)