? Previous Article (nested states & nested views)Next article (URL Routing )?
You can name your views so that you can have more than oneUI-ViewPer template. Let's say you had an application state that needed to dynamically populate a graph, some table data and filters for the table like this:
When setting multiple views you need to useViewsProperty on state.ViewsIs an object.
If you defineViewsObject, your state'sTemplateurl,TemplateAndTemplateproviderWill be ignored. so in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'view' object.
The property keys onViewsShocould match your view names, like so:
<!-- index.html --><body> <div ui-view="filters"></div> <div ui-view="tabledata"></div> <div ui-view="graph"></div></body>
$stateProvider .state(‘report‘, { views: { ‘filters‘: { ... templates and/or controllers ... }, ‘tabledata‘: {}, ‘graph‘: {}, } })
Then each view inViewsCan set up its own templates (template, templateurl, templateprovider) and controllers (controller, controllerprovider ).
$stateProvider .state(‘report‘,{ views: { ‘filters‘: { templateUrl: ‘report-filters.html‘, controller: function($scope){ ... controller stuff just for filters view ... } }, ‘tabledata‘: { templateUrl: ‘report-table.html‘, controller: function($scope){ ... controller stuff just for tabledata view ... } }, ‘graph‘: { templateUrl: ‘report-graph.html‘, controller: function($scope){ ... controller stuff just for graph view ... } }, } })View names-relative vs. Absolute names
Behind the scenes, every view gets assigned an absolute name that follows a scheme[Email protected], Where viewname is the name used in the view Directive and state name is the State's absolute name, e.g. contact. item. you can also choose to write your view names in the absolute syntax.
For example, the previous example cocould also be written:
.state(‘report‘,{ views: { ‘[email protected]‘: { }, ‘[email protected]‘: { }, ‘[email protected]‘: { } } })
Notice that the view names are now specified as absolute names, as opposed to the relative name. it is targeting the 'filters ', 'tabledata', and 'graph' views located in the root unnamed template. since it's unnamed, there is nothing following '@'. the root unnamed template is your index.html.
Absolute naming lets us do some powerful view targeting. Remember! With power comes responsibility. Let's assume we had several templates set up like this (this example is not realistic, it's just to define strate view targeting ):
<!-- index.html (root unnamed template) --><body ng-app><div ui-view></div> <!-- contacts.html plugs in here --><div ui-view="status"></div></body>
<!-- contacts.html --><!-- contacts.detail.html -->Let's look at the various views you coshould target from within the contacts. Detail state. Remember that if
@Is used then the view path is considered absolute:$stateProvider .state(‘contacts‘, { // This will get automatically plugged into the unnamed ui-view // of the parent state template. Since this is a top level state, // its parent state template is index.html. templateUrl: ‘contacts.html‘ }) .state(‘contacts.detail‘, { views: { //////////////////////////////////// // Relative Targeting // // Targets parent state ui-view‘s // //////////////////////////////////// // Relatively targets the ‘detail‘ view in this state‘s parent state, ‘contacts‘. // <div ui-view=‘detail‘/> within contacts.html "detail" : { }, // Relatively targets the unnamed view in this state‘s parent state, ‘contacts‘. // <div ui-view/> within contacts.html "" : { }, /////////////////////////////////////////////////////// // Absolute Targeting using ‘@‘ // // Targets any view within this state or an ancestor // /////////////////////////////////////////////////////// // Absolutely targets the ‘info‘ view in this state, ‘contacts.detail‘. // <div ui-view=‘info‘/> within contacts.detail.html "[email protected]" : { } // Absolutely targets the ‘detail‘ view in the ‘contacts‘ state. // <div ui-view=‘detail‘/> within contacts.html "[email protected]" : { } // Absolutely targets the unnamed view in parent ‘contacts‘ state. // <div ui-view/> within contacts.html "@contacts" : { } // absolutely targets the ‘status‘ view in root unnamed state. // <div ui-view=‘status‘/> within index.html "[email protected]" : { } // absolutely targets the unnamed view in root unnamed state. // <div ui-view/> within index.html "@" : { } });
You can see how this ability to not only set multiple views within the same State but ancestor States cocould become a veritable playground for a developer :).
? Back (nested states & nested views)
Next (URL Routing )?
[Translation] angular-multiple named views in Ui)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
