I wanting to dynamically load views into an accordion with ui-router. The thing is, when I generate the views by name inside ng-repeat I can't load the views at all.
I know that someone else asked a similar question here but there's not solution to it.
Is this possible at all?
<div class="panel panel-default" data-ng-repeat="group in groups">
<div data-ui-view="step{{ group.number }}"></div>
</div>
Edit:
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/index1/id");//
$stateProvider
.state("index1", {
abstract:true,
url: "/index1",
template: "<h1>This is index 1 abstract</h1><div ui-view></div>"
})
.state("index1.id", {
url: "/id",
template: "<h1>This is index1.id</h1>",
controller: function($scope,$state){
}
})
.state("index2", {
abstract:true,
url: "/index2",
template: "<h1>This is index 2</h1><div ui-view></div>"
})
.state("index2.id", {
url: "/id",
template: "<h1>This is index 2.id</h1>" ,
controller: function($scope,$state){
}
});
})
Edit: I've created a fiddle.I tried to load a named view after the repeater had finished but it just would not work. I just need a little help to get me started on this.
ui-router didn't support interpolated ui-view names until now: https://github.com/christopherthielen/ui-router/commit/81f6a19a432dac9198fd33243855bfd3b4fea8c0
It's not built into a release yet, but you can download the source and build it.
Related
I have multiple views on one page and within one view I have nested view.How should I configure this in app.js.Given below is my code which is not working.
This is my index.html file
<body ng-app="configuratorApp" >
<div ui-view="view1"></div>
<div ui-view="view2"></div>
</body>
This is my view1.html file
<div ui-view> </div>
<button type="button" ui-sref="view1.child1"></button>
<button type="button" ui-sref="view1.child2"></button>
This is my view1-child1.html file
<h1>Child1<h1>
This is my view1-child2.html file
<h1>Child2<h1>
This is my view2.html file
<h1>Hello World</h1>
This is my app.js file
.state('home',{
url: '/',
views: {
'': {
templateUrl: 'index.html'
},
'view1#home': {
templateUrl: 'view1.html'
},'view2#home': {
templateUrl: 'view2.html'
}
}
})
.state('view1.child1', {
url: '/child1',
templateUrl: 'view1-child1.html'
})
.state('view1.child2', {
url: '/child2',
templateUrl: 'view1-child2.html'
})
You confused the views with the states.
There is no view1.child1 state, reason being you do not have a view1 as a parent state (unless the code you posted above is incomplete). The name should be home.child instead.
.state('home.child1', { //this should be home.child1 instead of view1.child1
url: '/child1',
templateUrl: 'view1-child1.html'
})
.state('home.child2', {
url: '/child2',
templateUrl: 'view1-child2.html'
})
Also bear in mind that you will need a root template (or unnamed root template) in your index.html, else your homestate cannot be populated.
So in your index.html, you need to have this:
<body ng-app="configuratorApp">
<div ui-view></div> <!--this is the root template, to let Home state 'live' here-->
</body>
Here is the working plnkr
P.s. if the plnkr is not working just refresh it. sometimes it has problem fetching the htmls
I am having trouble working out how to structure my routing code with UI router.
In my index file, I call in the menu template and 2 sidebar templates as follows:
index.html
<!-- head code above here -->
<body ng-app="ICP_App" ng-cloak>
<div layout-fill layout="row" ng-controller="AppController as AppCtrl">
<div ui-view="left-nav"></div>
<div ui-view="right-nav"></div>
<div ui-view="toolbar"></div>
<!-- this is where I am expecting/wanting my dashboard template to load (and others when at the correct url-->
<div class="page-content view" ui-view></div>
<!-- footer code under here -->
My routes:
$urlRouterProvider.otherwise('dashboard');
$stateProvider
.state('root', {
abstract: true,
templateUrl: '../partials/icp_index.html',
controller: 'AppController as AppCtrl',
url: '',
views: {
'left-nav': {
templateUrl: '../partials/left-nav.html'
},
'right-nav': {
templateUrl: '../partials/right-nav.html'
},
'toolbar': {
templateUrl: '../partials/toolbar.html'
}
}
})
.state('root.dashboard', {
url: '/dashboard',
templateUrl: '../partials/agency-dashboard.html',
controller: 'AppController as AppCtrl'
})
However, the menu and sidebars load, but the main content area is left blank. I wonder if it is to do with the '.otherwise'?
My index file should contain the menu and sidebars, then the content for that state to be loaded where I have indicated above - in this case the dashboard template. The '.otherwise' is there to show the dashboard (within the index file) when a url is incorrect or incomplete.
Thanks in advance.
You have to name that ui-view, and on your child state, you need to specify and/or override the desired view, so it would be something like:
<div class="page-content view" ui-view="main-content"></div>
and the state definition:
.state('root.dashboard', {
url: '/dashboard',
views: {
'main-content#root': {
templateUrl: '../partials/agency-dashboard.html',
controller: 'AppController as AppCtrl'
}
}
})
Also you should have two templates, one only defines the root ui-view (index.html), and the other one is your icp_index which contains the named views. This plunkr shows the structure:
plnkr.co/edit/zjngTr0JU6cUGBtMsfN0
I'm working on upgrading a project I found to the latest version of Angular and preparing it for Angular 2 conversion etc. So, I'm using some nested views in Angular using ui-router, and I can only get the nested views to display if they are explicitly included in the index page as ng-template files.
index.jade
script(type="text/ng-template", id="404")
include partials/404
script(type="text/ng-template", id="home")
include partials/home
script(type="text/ng-template", id="private/layout")
include partials/private/layout
script(type="text/ng-template", id="private/home")
include partials/private/home
script(type="text/ng-template", id="private/nested")
include partials/private/nested
script(type="text/ng-template", id="private/nestedAdmin")
include partials/private/nestedAdmin
app.routes.js
(function() {
'use strict';
angular
.module('app.routes', [
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
var access = routingConfig.accessLevels;
// Public routes
$stateProvider
.state('public', {
abstract: true,
template: "<ui-view/>",
data: {
access: access.public
}
})
.state('public.home', {
url: '/',
templateUrl: 'home'
})
.state('public.404', {
url: '/404',
templateUrl: '404'
});
// Regular user routes
$stateProvider
.state('user', {
abstract: true,
template: "<ui-view/>",
data: {
access: access.user
}
})
.state('user.profile', {
url: '/profile',
templateUrl: 'profile',
controller: 'profileController',
controllerAs: 'vm'
})
.state('user.private', {
abstract: true,
url: '/private',
templateUrl: 'private/layout'
})
.state('user.private.home', {
url: '/',
templateUrl: 'private/home'
})
.state('user.private.nested', {
url: '/nested',
templateUrl: 'private/nested'
})
.state('user.private.admin', {
url: '/admin',
templateUrl: 'private/nestedAdmin',
data: {
access: access.admin
}
});
});
})();
I wanted to remove the whole ng-template part as I felt this would not be efficient when scaling the app up, so I removed the ng-template scripts from the index page. When I do this, the first layer of nested routes work, so routes such as public.home work okay. The problem comes with the second layer of nested views, so now routes such as user.private.home and user.private.nested do not work and aren't displayed.
Here is the generated HTML with and without the ng-templates scripts:
WITH ng-templates scripts
<div data-ui-view="" class="col-md-6 col-md-pull-4 ng-scope">
<p class="ng-scope">Only visible to users</p>
</div>
WITHOUT ng-templates
<div data-ui-view="data-ui-view" class="col-md-6 col-md-pull-4 ng-scope"></div>
Any ideas?
Found my own answer here: https://github.com/angular-ui/ui-router/issues/247
Turns out it's an issue with Jade/ui-router, I'm not sure which. The solution is to either include ui-view using pure HTML <div ui-view></div> or by placing doctype html at the top of your partial file.
It was a confusing issue because the nested templates worked fine when injected into $templateCache using ng-template as shown in my post.
I Need to load two html files in a base html file .In other words I have base html file in which I have header and contend view .I need to load different HTML file in header and in contend view ..
Here is Base HTML file
<div class="container">
<div class="row page-header">
<ui-view name="header"></ui-view>
</div>
<ui-view name="content"></ui-view>
<div class="row">
<div class="col-xs-12">
<hr>
<p class="text-center">Test Come</p>
</div>
</div>
</div>
In this view
<ui-view name="header"></ui-view>
in header I need to load header.html and <ui-view name="content"></ui-view> in thisI need to load content.html
http://plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview
Thanks
You need to update your state according to child states:
var config = function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: '/',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: 'base.html' },
// the child views will be defined here (absolutely named)
'content#main': { template: 'contend.html' },
// for column two, we'll define a separate controller
'header#main': {
templateUrl: 'header.html',
}
}
});
};
You can have just one ng-view.
You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.
UI-Router is a project that may help: https://github.com/angular-ui/ui-router One of it's features is Multiple Parallel Views
EDIT
Checkout this plnkr
There were some problem with your code
(1) inject $stateProvider instead of $routeProvider if you are uing ui-router
(2) use ui-view instead of ng-view
(3) you can have multiple view at same template level. If you tries to define ui-view inside ui-view and you create multiple ui-view in single state, it will not work.
(4) ui-view inside ui-view will create another state.
var app=angular.module("firstApp",['ui.router']);
var config = function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('base', {
url: "/",
views: {
"content": { templateUrl: "contend.html" },
"header": { templateUrl: "header.html" }
}
})
};
config.$inject = ['$stateProvider', '$urlRouterProvider'];
var loginCntrl=function($scope){
}
loginCntrl.$inject=['$scope']
app.config(config);
app.controller(loginCntrl);
I have a problem trying to load a JavaScript method in nested views using ui-router. I have this code:
$stateProvider
.state('/', {
url: '/',
controller: 'MainCtrl',
views: {
'': { templateUrl:'partials/home.html'},
'navbar#': {
templateUrl: 'includes/navbar.html'
},
'sidebar#': {
templateUrl: 'includes/sidebar.html'
}
}
})
and in the index.php
<div ui-view="navbar"></div>
<div ui-view="sidebar"></div>
the content is loaded but some methods do not work. For example this:
$(function() {
$('#side-menu').metisMenu();
});
If I put the sidebar and navbar code directly in the index.php, the JavaScript method works. However, if the code is in nested view, it doesn't work.
ps: I'm using this template http://startbootstrap.com/templates/sb-admin-2/