angular ui - angularjs ui-router - how to build master state which is global across app -
<html ng-app="app"> <head> ... </head> <body> <div id="header"></div> <div id="notification"></div> <div id="container"></div> <div id="footer"></div> </body> </html> with given structure of app (derived angular-app):
- header: here site navigation, login/out toolbar etc comes in. dynamic , has it's own controller
- notification: global notification container.
- container: used
<ng-view>. other modules loads in. - footer: global footer.
how state hierarchy looks like? i've gone through example shows single module (contacts) typically app have global (root) state , inside root state other module states rendered.
what i'm thinking app module have root state , each module should have it's own state , have inherit root state. right?
also ui-state example, have used both $routeprovider , $urlrouterprovider $stateprovider has url defined. understand $stateprovide handles routing. if i'm wrong, provider should use routing?
edit: http://plnkr.co/edit/wqkskwfq1nxrq3h667lu?p=preview
thanks!
the approach took in plunker close. @ben-schwartz's solution demonstrates how you'd set defaults in root state 3 essentially-static views. thing missing in plunker child states still need reference top container view.
.state('root',{ url: '', views: { 'header': { templateurl: 'header.html', controller: 'headerctrl' }, 'footer':{ templateurl: 'footer.html' } } }) .state('root.about', { url: '/about', views: { 'container@': { templateurl: 'about.html' } } }); note views: { 'container@': ...} instead of templateurl: ... in 'root.about'
what may asking whether can have modules define own state-sets, attach app's state hierarchy. sort of plug-and-play routes/states each module provides.
to achieve you'll have tightly couple modules main app.
in module:
angular.module('contact', ['ui.router']) .constant('statescontact', [ { name: 'root.contact', options: { url: 'contact', views: { 'container@': { templateurl: 'contacts.html' } }, controller:'contactcontroller' }} ]) .config(['$stateprovider', function($stateprovider){ }]) then, in app:
var app = angular.module('plunker', ['ui.router', 'contact']); app.config( ['$stateprovider', 'statescontact', function($stateprovider, statescontact){ $stateprovider .state('root',{ ... }) .state('root.home', { ... }) .state('root.about', { ... }) angular.foreach(statescontact, function(state) { $stateprovider.state(state.name, state.options); }) }]); this means modules need compatible pattern set out in app. if accept constraint can choose include combination of modules, , states magically added app. if want fancier, can modify state.options.url in statesmodulename loop to, example, prefix module's url structure.
also note module ui.compat necessary when transitioning $routeprovider $stateprovider. should use ui.state instead.
also don't forget adjust in header.html $state.includes('root.contact'))
Comments
Post a Comment