Abstract: [MAN Ironman] Day 07: AngularJS - Plugin: UI-Router
A -> AngularJS - Plugin:UI-Router
Foreword
In Routing introduced yesterday, so that everyone on the feed after basic concepts necessary to introduce super plugin must be installed on the AngularJS: UI-Router.
UI-Router
github
UI-Router is a routing framework AngularJS, mainly to help you can have your page architecture will separate into different sub-page rendering Nested view, different from the original $ route service, UI-Router is coming through a state of architecture switch pages, which gives you greater flexibility to switch your page.
Used as follows:
...
...
example
example
First, the structure has a total of five pages, roughly following the instructions on the page
- index.html
Home example, load all css, js range of applications and set ng-app, focusing on set as follows:
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
});
SUMMARY side connection sections allocated to each layout by setting the control state corresponding to each of the url templateUrl and controller.
- route1.html
When the page for the url refers to # / route1, which contains a sub-set state of the display contents route1.list.html, url refers to page # / route2 is displayed, which contains a sub-display state is set route2 .list.html content, the source code is as follows:
Route 1
Show List
Route 2
Show List
Show List specified here through the ui-sref way content from html page content after each file name connected .list.
-
route1.list.html与route2.list.html
List of State 1 Items
- {{ item }}
h3>List of State 2 Things
- {{ thing }}
Side respectively read target item in the manner thing through ngRepeat
Epilogue
Introduction to the side, I think we can already build a simple web SPA, the next step is then introduced one by one AngularJS the firepower for everyone to know! Day-8 over!
If you feel pretty good article, please give the recommended trouble at the top of the article, it is to continue to support your efforts brother of output power!
Original: Large column [MAN Ironman] Day 08: AngularJS - Plugin: UI-Router