I have the following:
Routes
function Config($stateProvider, $urlRouterProvider, USER_ROLES) {
$stateProvider
.state('dashboard', {
url: '/dashboard',
views: {
'header#': {
templateUrl: 'partials/layout/sections/auth/header.html'
},
'content#': {
templateUrl: 'partials/dashboard/template.html'
},
'centre-column#dashboard': {
templateUrl: 'partials/dashboard/content.html'
},
'left-column#dashboard': {
templateUrl : 'partials/dashboard/left-column.html',
controller : 'DashNavCtrl'
}
},
layoutType: 'three-column'
})
.state('dashboard.recruiter', {
views: {
'right-column#dashboard': {
templateUrl : 'partials/dashboard/recruiter/right-column.html',
controller : 'DashSidebarCtrl'
}
}
})
template.html
<!-- page-container -->
<div class="page-container">
<!-- main-container -->
<main class="main-container pad-e-2x" role="main" ui-view="centre-column">
</main>
<!-- /main-container -->
<div ui-view="left-column"></div>
<div ui-view="right-column"></div>
</div>
<!-- page-container -->
But when I transitionTo 'dashboard.recruiter', it doesn't display both the right and left columns.
Can anyone point me in the right direction?
I created working example, which shows all your setting in action. Not really sure which part of the code to show here, because it is working as it is, as you did it. I just used some templates instead of templateUrl
$stateProvider
.state('dashboard', {
url: '/dashboard',
views: {
'header#': {
templateUrl: 'header.html',
},
'content#': {
templateUrl: 'template.html'
},
'centre-column#dashboard': {
template: '<div class="layout center"><h3>center</h3></div>',
},
'left-column#dashboard': {
template: '<div class="layout left"><h3>left</h3></div>',
controller : 'DashNavCtrl'
}
},
layoutType: 'three-column'
})
.state('dashboard.recruiter', {
views: {
'right-column#dashboard': {
template: '<div class="layout right"><h3>right</h3></div>',
controller : 'DashSidebarCtrl'
}
}
})
With some css we can see that this is working as expected
Related
I have the following states in config file:
var home = {
name: 'home',
template: '<div ui-view></div>',
url: '/',
};
var homeSubjects = {
name: 'home.subjects',
url: 'Subjects',
views: {
'': { templateUrl: 'app/subjects/partials/subjects.html' },
'subjects.intro#home.subjects': {
templateUrl: 'app/subjects/partials/subjects_intro.html',
},
'subjects.auth#home.subjects': {
templateUrl: 'app/subjects/partials/subjects_auth.html',
}
}
};
var homeSubjectsSubjectExams = {
name: 'home.subjects.exams',
url: '/Exams',
views: {
'': { templateUrl: 'app/exams/partials/exams.html'},
'exams.intro#home.subjects.exams': {
templateUrl: 'app/exams/partials/exams_intro.html',
},
'exams.auth#home.subjects.exams': {
templateUrl: 'app/exams/partials/exams_auth.html',
},
}
}
In my index.html file i have the following code:
<div ui-view></div>
In subjects.html I have:
<div id="subject">
<div class="intro" ui-view="subjects.intro"></div>
<div class="auth" ui-view="subjects.auth"></div>
</div>
<div ui-view></div> // <--- I want the exams.html to appear here
In my exams.html I have:
<div id="exams">
<div class="intro" ui-view="exams.intro"></div>
<div class="auth" ui-view="exams.auth"></div>
</div>
I want the exams.html to appear below the subject.html page. Anyone has any idea how am I supposed to go with this?
You should be almost there. The example as is is working.
There is a plunker with that all - AS IS.
I did not change almost anyhting (just use template instead of templateUrl to make it more simple):
.state('home.subjects', {
name: 'home.subjects',
url: 'Subjects',
views: {
'': {
templateUrl: 'app/subjects/partials/subjects.html'
},
'subjects.intro#home.subjects': {
//templateUrl: 'app/subjects/partials/subjects_intro.html',
template: 'app/subjects/partials/subjects_intro.html',
},
'subjects.auth#home.subjects': {
//templateUrl: 'app/subjects/partials/subjects_auth.html',
template: 'app/subjects/partials/subjects_auth.html',
}
}
})
.state('home.subjects.exams', {
name: 'home.subjects.exams',
url: '/Exams',
views: {
'': {
templateUrl: 'app/exams/partials/exams.html'
},
'exams.intro#home.subjects.exams': {
//templateUrl: 'app/exams/partials/exams_intro.html',
template: 'app/exams/partials/exams_intro.html',
},
'exams.auth#home.subjects.exams': {
//templateUrl: 'app/exams/partials/exams_auth.html',
template: 'app/exams/partials/exams_auth.html',
},
}
})
And this is the result if we go to <a ui-sref="home.subjects.exams">
app/subjects/partials/subjects_intro.html
app/subjects/partials/subjects_auth.html
app/exams/partials/exams_intro.html
app/exams/partials/exams_auth.html
As we can see, the home.subjects is on page, and below is injected exams substate
Check it here
I am currently using <div ng-include src="'js/app/partials/layout/header.html'"></div> just above my <div ui-view> in my index.blade.php file while using Angular with Laravel.
I have looked into parent state inheritance in ui.router but it seems to not work, and feels complicated / or perhaps an overkill for layouts. I just want to inject a header and a footer.
This is what I was doing earlier in my attempt to use ui.router states to create a layout injection system. As you can see below.
<div ui-view="header"></div>
<div ui-view></div>
.state('root', {
url: '/',
abstract: true,
views: {
'header': {
templateUrl: 'js/app/partials/header.html'
}
},
data: {
requireLogin: false
}
})
.state('root.login', {
url: '/login',
templateUrl: 'js/app/partials/login.html',
controller: 'LoginCtrl',
data: {
requireLogin: false
}
})
You need to change your structure of your html, by making named views & those will be specified with templateUrl & controller from views option of the state.
Basically inside your home.html you would have three named views such as header, content & footer, root state is setting header & footer templates with controlllers. Then your child state login will set the content view by using absolute state name using content#root in this #root because content named view has been loaded inside root state.
Markup
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
Code
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('root', {
abstract: true,
url: '/',
//templateUrl: 'js/app/partials/home.html',//remove this
views: {
'': {
templateUrl: 'js/app/partials/home.html' //add it here
},
'header': {
templateUrl: 'js/app/partials/header.html'
},
'footer': {
templateUrl: 'js/app/partials/header.html'
}
},
data: {
requireLogin: false
}
})
.state('root.login', {
url: 'login',
views: {
'content#root': {
templateUrl: 'js/app/partials/login.html',
controller: 'LoginCtrl',
},
},
data: {
requireLogin: false
}
})
});
Working Plunkr
I Think you use this.
`.state('header', {
abstract : true,
templateUrl: 'js/app/partials/header.html'
})
.state('home', {
url: '/',
templateUrl: 'js/app/partials/home.html',
parent : 'header',
data: {
requireLogin: false
}
})
.state('login', {
url: '/login',
parent : 'header',
templateUrl: 'js/app/partials/login.html',
controller: 'LoginCtrl',
data: {
requireLogin: false
}
})`
Hi I'm trying to dynamically create templates based on the uri eg, contacts/jane would use the template contacts.jane.html
contacts.js
'use-strict';
angular.module('meanApp')
.config(function ($stateProvider) {
$stateProvider
.state('contacts', {
url: '/contacts',
controller: 'ContactsCtrl',
views: {
'': {
templateUrl: 'app/contacts/contacts.html'
},
'list#contacts': {
templateUrl: 'app/contacts/contacts.list.html'
},
'details#contacts': {
templateUrl: function ($stateParams) {
return 'app/contacts/' + $stateParams.id + '.html';
},
controller: function ($scope, $stateParams) {
}
}
}
})
.state('contacts.details', {
url: '/:id',
controller: 'ContactsCtrl'
});
});
contacts.html
<div ng-controller="ContactsCtrl">
<h1>My Contacts</h1>
<div ui-view="details"></div>
<div ui-view="list"></div>
There is a working example. What we need here, is to define the template inside of the child state:
$stateProvider
.state('contacts', {
url: '/contacts',
controller: 'ContactsCtrl',
views: {
'': {
templateUrl: 'app/contacts/contacts.html'
},
'list#contacts': {
templateUrl: 'app/contacts/contacts.list.html'
},
'details#contacts': {
// this could be, filled on a contacts state
// with some default content
template: "place for detail",
}
}
})
// this state has the 'id' defined
// so, here we can decide which template to use
// based on the $stateParams
.state('contacts.details', {
url: '/:id',
views: {
"details": {
controller: 'ContactsCtrl',
templateUrl: function($stateParams) {
url = 'app/contacts/' + $stateParams.id + '.html'
return url;
},
}
}
});
Also, the controller is defined in state so the template contacts should/could for example look like this (no ng-controller):
<div>
<h1>My Contacts</h1>
<div ui-view="list"></div>
<hr />
<div ui-view="details"></div>
</div>
Check that in action here
I'm using modules /sub modules on the angular app, my controller doesn't load on a specific route but the view does, according to a comment on this question I should reference the child module inside the main module and that should do the trick.
this is my code for bootstrapping the app:
angular.module('mainApp', ['ui.bootstrap', 'ui.utils', 'ui.router', 'ngResource', 'ngAnimate', 'ngCookies', 'facebook', 'subModule1', 'subModule2', 'subModule3']);
angular.module('mainApp').config(function ($stateProvider, $urlRouterProvider, $locationProvider, FacebookProvider) {
$stateProvider.state("root",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('root.home', {
url: '/index',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
},
}
).state('root.login', {
url: "/login",
views: {
'container#': {
templateUrl: '/partial/login/login.html',
controller: 'LoginCtrl'
}
},
});
FacebookProvider.init('xxxxxx');
$urlRouterProvider.otherwise('/index');
$locationProvider.hashPrefix('!');
});
I have the sub-module configuration in a separate folder named /subModule1/submodule1.js
angular.module('subModule1').config(function($stateProvider) {
$stateProvider.state("submodule1",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
resolve: {
dashboardinfo: function($resource) {
var resourceGet = $resource('/submodule1/dashboard');
return resourceGet.get().$promise;
}
}
},
'sideBar#': {
templateUrl: '/submodule1/partial/sidebar/sidebar.html'
},
'navBar#': {
templateUrl: '/submodule1/partial/navbar/navbar.html'
}
}
});
});
the controller is defined as:
angular.module('subModule1').controller('DashboardCtrl', function ($scope, $interval, $resource, notification, dashboardinfo) { ... }
the index located on the root of the page which is the page layout have the
<html ng-app="mainApp">
and the controller have the ng-controller definiton as follows:
<div ng-controller="DashboardCtrl">
Everything is fine just the controller isn't running, it doesn't get executed by the view.
The ui-router and ng-controller="DashboardCtrl" are intended to work together. In the ui-router world we are assigning Controllers to views directly in the state definition.
So this (exactly as you have already have it, no change) is enough:
.state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
to say, that the view rendered inside of the ui-view="container" on the root (index.html) should be provided with DashboardCtrl.
There is an example using the above state definition (1:1 as possible).
This is the index.html content:
<div ui-view="header"></div>
<div ui-view="navBar"></div>
<div ui-view="container"></div>
<div ui-view="sideBar"></div>
<div ui-view="footer"></div>
And this links will correctly trigger the above states:
// root
<li><a ui-sref="root.home">root.home</a></li>
<li><a ui-sref="root.login">root.login</a></li>
// dashboard
<li><a ui-sref="submodule1.dashboard">submodule1.dashboard</a></li>
All the other details check here
I'm trying out Angular UI router for the first time. I'm having issues where the views are not being called accordingly. Check the plunker: http://plnkr.co/edit/cBfR6u2BPJvKN16vi6hG?p=preview
Does anything stand out on the router?
deviceApp.config(function ($stateProvider) {
$stateProvider
.state('devices', {
views: {
'environment': {
template: 'Look I am a view!',
controller: 'DataCtrl'
},
'devicedetail': {
templateUrl: 'index.html',
controller: 'DeviceCtrl'
}
}
}
)}
);
perhaps the absence of a "url" definition in your view object?
'environment': {
url: '/environment',
template: 'Look I am a view!',
controller: 'DataCtrl'
},
You can do something like that :
config.js
.config(function ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$urlRouterProvider.when('', '/');
})
app.js
state('main', {
url: '/',
views: {
'': { templateUrl: 'app/main/main.html', controller: 'MainCtrl'},
'navbar': { templateUrl: 'components/navigation/navbar/navbar.html'},
}
index.html
<body>
<header ui-view="navbar" class="header"></header>
<section class="content">
<div ui-view></div>
</section>
</body>