Angularjs ui-router - how to create a major state that is global through the application
<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 this application structure (derived from angular -app):
- header: Here is the site navigation bar, input / output panel, etc. It is dynamic and has its own controller.
- notification: global notification container.
- container: That was my
<ng-view>. Thus, all other modules are loaded here. - footer: global footer.
What does the state hierarchy look like? I went through an example that shows one module (contacts), but usually the application will have a global (root) state and other module states are displayed inside the root state.
I think my app module probably has root status, and then each module should have its own state, and I should inherit from root state. I'm right?
Also from the ui-state example, they used both $routeProvider and $urlRouterProvider , as well as $stateProvider defined url. I realized that $stateProvide also handles routing. If I am mistaken, which provider should I use for routing?
EDIT : http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview
Thank!
The approach you used in your plunker is close. @ ben-schwartz demonstrates how you set default values in your root state for three substantially static views. The absence in your plunker is that your child states still need to reference the view of the top container.
.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 you can also ask is whether the modules can define their own states, which then join the application state hierarchy. The type of plugins for routes / states of each module provides.
To achieve this, you will closely link your modules with the main application.
In the 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 the application:
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 that all of your modules must be compatible with this template specified in your application. But if you accept this limitation, you can choose any combination of your modules, and their states will be magically added to your application. If you want to become even more attractive, you can change state.options.url in your statesModuleName loop to, for example, prefix your URL module structure.
Also note that the ui.compat module is only needed when moving from $routeProvider to $stateProvider . Usually you should use ui.state .
Also don't forget to adjust in header.html $state.includes('root.contact') )
Despite the confusion, the frequently asked questions in the wi-router wiki say this is not possible: ui-router / wiki / faq
One approach is to allow each function to determine its own root state (as in this example: AngularJS state management using ui-router )
Another would be to define the entire hierarchy of states in your "myApp" module and simply control the controllers, etc. from dependent modules. This works especially well when you support a mobile and desktop site; define a hierarchy of site states in the mobileApp and desktopApp modules and have functionalities (for example, controllers, services, etc.) shared in separate modules.
It depends on how you prefer to approach it.
All areas inherit from rootScope , so you can place global status there. The NG literature mentions that you should only indicate a global state, not functionality. The functionality required for the entire system relates to services, and in particular, you should not implement services whose sole purpose is to maintain state. All of the tips seem to be implicitly shared in the context of how this makes it easier or harder for you to easily perform end-to-end testing.