Geek Answers Handbook

Multiple ui-view html files in u-router

Is it possible to do something using 2 or more html files using ui-view? I need this to be something like this: enter image description here

I tried to do something while working on plinker , but it seems like I clearly don't understand the concepts. I read the nested ui-vew tutorial, but they just do one index.html and put some ui-view here, but I need some .html files.

test.html is just a file with some text that should appear under the main heading

index.html is as follows

<html ng-app="MyApp"> <head> <link href="stylesheets/style.css" rel="stylesheet"> </head> <body> <h4> This should be Master header </h4> <div ui-view></div> <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> <script data-require="ui-router@*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script> <script src="app.js"></script> <script src="controllers/main.js"></script> </body> </html>

this is app.html

 <head> <link href="stylesheets/style.css" rel="stylesheet"> </head> <body> <h4> This should be Sub master header </h4> <div ui-view></div> </body>

and app.js is written in pseudo code showing how I want it to work, because I obviously don’t know how to make it work

  angular.module('MyApp', [ 'ui.router' ]) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('index', { templateUrl: 'index.html', controller: 'IndexCtrl' }) .state('index.test', { url: '/', templateUrl: 'test.html', controller: 'TestCtrl' }) .state('app', { templateUrl: 'app.html', controller: 'AppController' }) .state('app.test2', { url: '/test2', templateUrl: 'test2.html', controller: 'Test2Controller' }) })

test2.html is just text.

+7
javascript html angularjs angular-ui-router
source share
1 answer

I'm not sure if I understand your goal 100%, but the plunker has been updated to show how we can work with nested views.

Firstly, there is $ state uncertainty showing nesting:

 $stateProvider .state('index', { url: '/', views: { '@' : { templateUrl: 'layout.html', controller: 'IndexCtrl' }, 'top@index' : { templateUrl: 'tpl.top.html',}, 'left@index' : { templateUrl: 'tpl.left.html',}, 'main@index' : { templateUrl: 'tpl.main.html',}, }, }) .state('index.list', { url: '/list', templateUrl: 'list.html', controller: 'ListCtrl' }) .state('index.list.detail', { url: '/:id', views: { 'detail@index' : { templateUrl: 'detail.html', controller: 'DetailCtrl' }, }, })

And here is the layout.html main index layout.html :

 <div> <section class="top"> <div ui-view="top"></div> </section> <section class="middle"> <section class="left"> <div ui-view="left"></div> </section> <section class="main"> <div ui-view="main"></div> </section> </section> </div>

And how does it work?

I. View List

we can see the contents of tpl.top.html

 <div> This is a tpl.top.html<br /> <a ui-sref="index">index</a> <a ui-sref="index.list">index.list</a><br /> </div>

which has some navigation to the representation of an index list or . The list view will be entered into the tpl.left.html file, which looks like this:

 <div> This is a tpl.left.html <h4>place for list</h4> <div ui-view=""></div> </div>

Eliminating the view target is not called <div ui-view=""></div> , we can define the $ state list as follows:

 .state('index.list', { url: '/list', templateUrl: 'list.html', controller: 'ListCtrl' })

we see that we aim the anchor of the view state (root), which is not called. But for the details we use a different technique:

II. Detailed view

This is the content of tpl.main.html:

 <div> This is a tpl.main.html <h4>place for detail</h4> <div ui-view="detail"></div> </div>

In this case, the anchor for the view is named: ui-view = "detail", so we must define this detailed state as follows:

 .state('index.list.detail', { url: '/:id', views: { 'detail@index' : { templateUrl: 'detail.html', controller: 'DetailCtrl' }, }, })

We can see that since the parent view is not an object of our state (the parent index is the target) , we must use aboslute naming: 'detail@index'

III. Browse Names - Relative and Absolute Names

small cite from doc:

Behind the scenes, each view is given an absolute name that follows the viewname@statename , where viewname is the name used in the view directive, and the state name is the absolute state name, for example. contact.item. You can also write name names in absolute syntax.

SUMMARY:
So, this example is about almost all the essential features of ui-router . We showed here how to use the nested representation of names (absolute / relative), as well as how to use multiple views for one state (determining the state of the index)
Please note that everything is in action here (click inex.html in the upper section, then try to select some details)

+11
source share

More articles:


All Articles