Angularjs Routing Series (3)--Ui-router first Experience

This series explores the routing mechanism of ANGULARJS, which is developed under Webstorm.

The ANGULARJS Routing series includes:

1. Angularjs Routing Series (1)--Basic routing configuration
2. Angularjs Routing Series (2)--Refresh, view routes, route events and URL formats, get route parameters, Route resolve
3. Angularjs Routing Series (3)--Ui-router first Experience
4, ANGULARJS routing series (4)--ui-router $state service, routed events, get route parameters
5, Angularjs Routing Series (5)--Ui-router routing constraints, resolve properties, routing additional data, routing entry exit events
6, Angularjs Routing Series (6)--Ui-router's nested state

Project file Structure

node_modules/
public/
..... app/
..... bower_components/
......... toastr/
............. toastr.min.css
............. toastr.min.js
......... jquery/
............. dist/
................. jquery.min.js
......... angular/
............. angular.min.js
......... angular-ui-router/
............. release/
................. angular-ui-router.min.js
......... angular-route/
................. angular-route.min.js
..... controllers/
............... Homecontroller.js
............... Allschoolscontroller.js
............... Allclassroomscontroller.js
............... Allactivityiescontroller.js
............... Classroomcontroller.js
............... Classroomsummarycontroller.js
............... Classroommessagecontroller.js
..... css/
......... bootstrap.cerulean.min.css
..... filters/
......... activitymonthfilter.js
..... services/
......... dataservices.js
......... notifier.js
..... templates/
......... home.html
......... allschools.html
......... allclassrooms.html
......... allactivities.html
......... classroom.html
......... classroomdetail.html
......... classroom_parent.html
..... app.js
..... index.html
..... favicon.ico
server/
..... data/
..... routes/
..... views/
..... helpers.js
Package.json
Server.js

About Ui-router

Compared to Ngroute, Ui-router not only contains the full functionality of Ngroute, but also includes additional features, providing a state-based routing mechanism.

What does the state in Ui-router mean?
Angularjs the places in the application.


How do I get ui-router?

Bower Intall angular-ui-router#0.2.15
Or
NPM install [email protected]
Or
Https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js
Or
Http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js

How do I use get ui-router?

→ Add a reference to Angular-ui-router.js
→ Add a dependency on the Ui.router module
→ Use ui-view in the view

How do I configure Ui-router?

(function() {    var app = Angular.module (' app ', [' Ui.router ']);    App. Config ([function($stateProvider) {        $stateProvider            . State (' home ', {                URL:'/',                ' HomeController ',                ' home '                , ' app/templates/ Home.html '}    ]);} ());

Activating a State

$state. Go (' classrooms ');
<a ui-sref= "Classrooms" >Classrooms</a>
<a href= "/classrooms" >Classrooms</a>

Using the Ui-router first experience

index.html, redesign, use Ui-router

Bootstrap.cerulean.min.csstoastr.min.css<!--Angular -Angular.min.jsangular-ui-router.min.js<!--Application -App.js<!--Services -DataServices.jsnotifier.js<!--Filters -Activitymonthfilter.js<!--Controls -HomeController.jsAllSchoolsController.jsAllClassroomsController.jsAllActivityiesController.jsClassroomController.jsCl AssroomSummaryController.jsClassroomMessageController.js<BodyNg-app= "App">    <ahref="#/">School Buddy</a>    <ahref= "#/schools">Schools</a>    <ahref= "#/activities">Activities</a>        <DivUi-view></Div></Body>

App.js, redesign, use Ui-router

(function() {    var app = Angular.module (' app ', [' Ui.router ']);        App. Config ([function($logProvider, $stateProvider) {        $logProvider. debugenabled (  True);                $stateProvider            . State (' home ', {                '/',                '             });    } ());

The Templateurl property of Ui-router

App.js, using the Templateurl property

(function(){    varApp = Angular.module (' app ', [' Ui.router ']); App. Config ([' $logProvider ', ' $stateProvider ',function($logProvider, $stateProvider) {$logProvider. debugenabled (true); $stateProvider. State (' Home ', {URL:‘/‘, Templateurl:'/app/templates/home.html ', Controller:' HomeController ',//can also be written as homecontroller as homeControlleras: ' Home '            }); }]);} ());

App.js, add more routes

(function(){    varApp = Angular.module (' app ', [' Ui.router ']); App. Config ([' $logProvider ', ' $stateProvider ',function($logProvider, $stateProvider) {$logProvider. debugenabled (true); $stateProvider. State (' Home ', {URL:‘/‘, Templateurl:'/app/templates/home.html ', Controller:' HomeController ',//can also be written as homecontroller as homeControlleras: ' Home '}). State (' Schools ', {URL:'/schools ', Controller:' Allschoolcontroller ', Controlleras:' Schools ', Templateurl:'/app/templates/allschools.thml '}). State (' Classrooms ', {URL:'/classrooms ', Controller:' Allclassroomscontroller ', Controlleras:' Classrooms ', Templateurl:'/app/tempates/allclassrooms.html '}). State (' Activities ', {URL:'/activities ', Controller:' Allactivitiescontroller ', Controlleras:' Activities ', Templateurl:'/app/templates/allactivities.html '            })    }]);} ());

Not to be continued ~ ~

Angularjs Routing Series (3)--Ui-router first Experience