ANGULARJS Series--ui-router

Introduction

The previous blog spoke about using ANGULARJS to develop a directory structure for an app project, and this time we'll dive into Angularjs's routing mechanism.

Source

First, we need to know why we should use the routing mechanism.

We all know that the traditional URL is: http://.......com. The browser will send a server request to this address to get the relevant HTML and JS, when we want to jump to the second page, the browser will then launch a full server request to get the entire HTML content. In a single-page application, the URL is: http://.......com/#login .... The key is that the browser does not handle the URL with #, the browser will send the server request to the address before #, ignoring the content after #. The client can perform subsequent processing based on the remaining portions of the URL. When a user migrates from the first page to the second page, the browser does not send extra requests and the page does not reload. It just loads the data along with the HTML fragment instead of retrieving the entire HTML, especially if most of the content on the page hasn't changed.

We know that Angularjs is a rich client single page application, so it is very important to have a different view on one page.

Angularui in the process of continuous development has been divided into several modules, today we come to understand ui-router. This is a stand-alone module.

principle

Ui-router only concerned about the state, according to the change of state to navigate to different views, the view through the Ng-contorller command to find the corresponding controller controllers, and then in the Controller content processing a variety of business logic, according to the instructions of the model load binding to the view, and finally presented.

Process

Url--> Routing state changes--load developing view--Find controller--> logic processing--based on instruction binding view--rendering

can go to github to download the specified version: Https://github.com/angular-ui/ui-router This is then referenced in our page.

Use

Here's how we use Ui-router in the project!

1. Establish app.js files and router.js filesFirst we set up the App.js file in the JS directory. Inject our Ui-router module and other global modules.

Then create the Routes.js file in the JS directory.

<span style= "FONT-SIZE:18PX;" >angular.module (' itoo-exam-evaluation.routes ', [' Ui-router ']) </span><pre name= "code" class= " JavaScript "><span style=" FONT-SIZE:18PX; >.config (function ($stateProvider, $urlRouterProvider) {</span>

$stateProvider. State ("login", {URL: "/login", Templateurl: "Templates/login.html", Controller: "Userctrl"}). State (" Studentevaluate ", {url:"/studentevaluate ", Templateurl:" templates/studentevaluate.html "})

<span style= "FONT-SIZE:18PX;" > $urlRouterProvider. Otherwise ("/login"); </span>

});

2. Code parsing

First line : Declare the ANGULARJS module. Tell the HTML page this is a Angularjs page, and his content is explained by the Angularjs engine.

<span style= "FONT-SIZE:18PX;" >angular.module (' itoo-exam-evaluation.routes ', [' Ui-router ']) </span>

Second line : We inject $stateprovider and $urlrouterprovider2 services so we can configure the routing for this application.

<span style= "FONT-SIZE:18PX;" >.config (function ($stateProvider, $urlRouterProvider) {</span>

statement block 1: $stateProvider. State defines the first status to be displayed on the main page, and the first route to be used after the master page is loaded.

<span style= "FONT-SIZE:18PX;" > $stateProvider State    ("login", {            URL: "/login",            templateurl: "templates/login.html",            Controller: "Userctrl"        }) </span>

default route : Routes are routed to this page by default when no route path matches the current navigation state .

<span style= "FONT-SIZE:18PX;" > $urlRouterProvider. Otherwise ("/login"); </span>

State Configuration Parameters URL: The default relative path (the absolute path begins with ^)

Views: Each child view can contain its own template, controller, and preload data. (after 2 options, the controller can be bound in the view)

Abstract: Abstraction template cannot be activated

templateurl: The path to an HTML template or a function that returns an HTML template path

Controller , Controllerprovider: Specify any controllers that are already registered or a function that acts as a controller

<span style= "FONT-SIZE:18PX;" > State (' tab.selectedcourses ', {            URL: '/selectedcourses ', views            : {                ' tab-selectedcourses ': {                    Templateurl: ' templates/tab-selectedcourses.html ',                    controller: ' Selectedcoursesctrl '                }            ,            Abstract:true,            templateurl: "templates/tabs.html",            Controller: "Selectedcoursesctrl"        }) </span >

Template: An HTML string or a function that returns an HTML string

Templateprovider: function that returns an HTML string

Resolve: Pre-load a series of dependencies or data before the route arrives and inject it into the controller.

Data: It is not injected into the controller, it is used to pass data from the parent state to the child State.

Onenter/onexit: These two functions are called when entering or leaving a view of the current state

SummaryLearning a knowledge, are to step-by-step, not afraid at that time do not know, as long as a step by step in-depth research, through the project to practice, will certainly understand! There's nothing to stop a person who wants to move forward!!

ANGULARJS Series--ui-router