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