Theory apart, the minimal set of elements that you need, to catch the meaning of the suggestions I want to share with you, is:<\/p>\n
- \n
- An index.html page that you would\u00a0use as starting point of your SPA (i.e. as container for some menu entries)\n
<!DOCTYPE html>\r\n<html ng-app=\"uiTabs\">\r\n<!--..your dependancies...-->\r\n<body ng-controller=\"MenuCtrl\"> \r\n <div class=\"container-fluid\">\r\n <!--..bootstrap adaptive container...-->\r\n <div class=\"row\">\r\n <div class=\"col-md-2\">\r\n <ul class=\"nav nav-list\">\r\n <li ng-repeat=\"item in menu\">\r\n <a ui-sref=\"{{item.state}}\">{{item.name}}<\/a>\r\n <!--..ui-sref links to a ui-router\u00b4s state instead of a simple href...-->\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"col-md-8\">\r\n <div ui-view><\/div> \r\n <!--Each Element of the app will be injected here -->\r\n <!-- ui-view is the element that a state will search in order to inject its view-->\r\n <\/div> \r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/li>\n - An Angular Module where to inject the ui-router and ui-bootstrap dependencies\n
var app = angular.module('uiTabs', ['ui.bootstrap', 'ui.router']);\r\n<\/pre>\n<\/li>\n - A Controller for the index.html\n
app.controller('MenuCtrl', ['$scope', '$stateParams', '$state',\r\n function($scope) { \r\n $scope.menu = [{state: 'tabs', name: 'Example Tabs'},\r\n {state: 'content', name: 'Example Content'}];\r\n }\r\n]);\r\n<\/pre>\n<\/li>\n - A Config for your App where you can define each state’s behavior\n
app.config(function($stateProvider, $locationProvider, $urlRouterProvider) {\r\n});<\/pre>\n<\/li>\n<\/ul>\nNow, what you\u00a0would normally do, in order to define the states associated with each menu entry is:<\/p>\n
$stateProvider.\r\n .state('tabs', {\r\n url: '\/tabs',\r\n template: \"<div id='container'><h1>{{voice}}<\/h1><br\/><div ui-view><\/div> <\/div>\",\r\n controller: function($scope, text) {\r\n $scope.voice = \"Content example --tabs--\";\r\n }\r\n })\r\n .state('content', {\r\n url: '\/content',\r\n template: \"<div id='container'><h1>{{voice}}<\/h1>{{text}}<br\/><div ui-view><\/div><\/div>\",\r\n controller: function($scope, text) {\r\n $scope.voice = \"Content example --Content--\";\r\n $scope.text = text;\r\n },\r\n resolve: {text: function($http) {\r\n return $http.get(\/*your rest service that delivers the content*\/)\r\n .then(function(result) {\r\n return result.data;\r\n });\r\n }\r\n },\r\n })<\/pre>\nThis would let you simply navigate between the states with your index’s buttons, while:<\/p>\n
- \n
- ui-router injects the active state’s view in the <div ui-view><\/div>\u00a0<\/em>of the index.html,<\/li>\n
- activates the state’s controller<\/li>\n
- (eventually), pre-resolves data.<\/li>\n<\/ul>\n
Obviously, being that each state’s template contains its own <div ui-view><\/div><\/em>, you can\u00a0easily create some sub-states (i.e., tabs.list or content.submenu) and inject them, in turn, in the related parent’s state. This is wonderful! This is what ui-router, basically, has been designed for!<\/p>\n
But, what if we would want\/need to have a more complicated situation, with multiple<\/strong>\u00a0views, injected within other views and, at\u00a0the same time, parallel views\u00a0one next to another?\u00a0<\/strong>(click here<\/a>\u00a0to go to the mockup)<\/p>\n
![\"Example](\"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/09\/multiple-views-1024x836.jpg\")
<\/a><\/p>\nMultiple\u00a0named views and abstract states<\/h3>\n
Multiple named views<\/h4>\n
The solution comes with ui-router itself, under the name of (multiple<\/strong>)\u00a0named views.<\/b> In practice, instead of just decorating\u00a0a state with a single view (and a controller) we consider a state as, potentially, made of many<\/strong> views. Each view will be identified via its own name<\/strong> and will have its own controller (and data). The views will\u00a0live within their\u00a0state, being therefore activated when the navigation „wakes“ the state (per \/url, per $state.go or per ui-sref ).<\/p>\n
This perspective is something like (1 state)-to-(n views). What ui-router enables is also (1 ui-view)-to-(n states). This means that you can\u00a0control which view<\/strong>, from which state<\/strong> will be injected in\u00a0which ui-view.<\/strong> This lets you injecting each view within each other, creating complex structures with substructures.<\/p>\n
From theory to practice: all it’s based upon 3 elements:<\/p>\n
- \n
- A name for the ui-view (you need it to identify where<\/strong> to inject your view)\n
<div ui-view ='tabsView'><\/div><\/pre>\n<\/li>\n
- The state in which<\/span> the view that contains\u00a0the ui-view is defined<\/span><\/li>\n
- The definition of the NAME<\/strong>\u00a0of each view (which controls everything)\n
.state('tabs.first', {\r\n url: '\/insideTab1',\r\n views: {\r\n \"tabsView@tabs\": {\r\n template: \"<h5>First Tab's Menu Voice 1<\/h5>{{text}}\"....\r\n }\r\n }\r\n })<\/pre>\n<\/li>\n<\/ul>\nThe name of each view is made of: theNameOfTheTarget<\/strong>UiView@theNameOfTheState.ThatContains<\/strong>The.UiView.<\/em><\/p>\n
In other words, you can use the name of the view to define where<\/span> (in terms of state and ui-view) the view itself will be injected. You can think at this namespace as a way to define the routes of your application and to attach each of them to your SPA’s workflow.<\/p>\n
Abstract states<\/h4>\n
Another element that I suggest you to use, when working with multiple ui-routes, is the definition of proper abstract<\/strong> states. These are states that you can’t directly access, but only navigate through<\/span>. Those are perfect for data pre-resolution or for global element’s definition. An example of that can be the following definition of a set of bootstrap’s Tabs for our sample application:<\/p>\n
- \n
- The view of the abstract state (\/tabs.tpl.html):\n
<h1>Tab Design 4 ui-router<\/h1>\r\n<ul class=\"nav nav-tabs\">\r\n\u00a0\u00a0\u00a0 <li ui-sref-active=\"active\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a ui-sref=\"tabs.first\">Menu Tab<\/a>\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\u00a0\u00a0\u00a0 <li ui-sref-active=\"active\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a ui-sref=\"tabs.second.content\">Content Tab<\/a>\r\n\u00a0\u00a0\u00a0 <\/li>\r\n<\/ul>\r\n\r\n<div ui-view ='tabs'><\/div><\/pre>\n<\/li>\n
- And the related state’s definition:\n
\u00a0 $stateProvider\r\n\u00a0\u00a0\u00a0 .state('tabs', {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 url: '\/tabs',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 views: {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"mainView\": { \/\/hence, you need to name \"mainView\" the ui-view div in the index.html \r\n \/\/and make the proper changes also in the content view\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 abstract: true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 templateUrl: \"tabs.tpl.html\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 controller: function($scope, text) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/Controller in the abstract state is used only\r\n \/\/ to set \"global\" elements for the state and the sub-states\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $scope.title = \"Tab Design 4 ui-router\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $scope.text = text;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 resolve: {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text: function($http) {\r\n \/\/RESOLVE IN THE ABSTRACT STATE ONLY AND ONLY ELEMENTS THAT ARE USEFUL\r\n \/\/ IN EACH SUB-STATE TO AVOID CONFUSION WITH THE SCOPES\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return $http.get(\/*your rest service*\/ ).then(function(result) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return result.data;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 })\r\n<\/pre>\n<\/li>\n<\/ul>\nThis way, each tab (say tabs.first<\/em> and tabs.second<\/em>) will have the skeleton of the abstract state as template and they will „live“ within the parent’s ui-view=“tabs“.<\/p>\n
Then, we need to define the content of each tab: for this purpose we use the multiple named view system of the previous paragraph! I will omit the rest of the code I want to share with you, because it would be too long for the article, but you can find it in the following Plunker<\/a>.<\/p>\n
Notice, in the app.js<\/em> file how each state contains one or more named views and how each named view is injected in the ui-view declared in its name.<\/p>\n
…another small hint<\/h4>\n
- The state in which<\/span> the view that contains\u00a0the ui-view is defined<\/span><\/li>\n
- ui-router injects the active state’s view in the <div ui-view><\/div>\u00a0<\/em>of the index.html,<\/li>\n