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
Related
I'm learning Ionic framefork to develop an app.
I defined an abstract state like this:
.state('app', {
url: '',
abstract: true,
templateUrl: "templates/default.html"
})
My default.html looks like this:
<ion-side-menus>
<ion-side-menu-content>
<div ui-view="headerview"></div>
<div ui-view="contentview"></div>
</ion-side-menu-content>
<div ui-view="menuview"></div>
And then I declared all my actual states
.state('app.contacts', {
url: '/contacts',
views: {
'headerview': {
templateUrl: "templates/common/header.html" ,
controller: 'headerControllers'
},
'menuview': {
templateUrl: "templates/common/menu.html"
},
'contentview': {
templateUrl: 'templates/contacts.html',
controller: 'contactControllers'
}
}
})
.state('app.partners', {
url: '/partners',
views: {
'headerview': {
templateUrl: "templates/common/header.html" ,
controller: 'headerControllers'
},
'menuview': {
templateUrl: "templates/common/menu.html"
},
'contentview': {
templateUrl: 'templates/partners.html',
controller: 'partnerControllers'
}
}
})
This works like a charm, but I noted that header and menu views will be the same in almost all of my states! That's not very DRY. There is a way to define a default that I can overwrite when needed?
Thank you,
one way to do this is to create store your path in a variable and use it for all your state.
in the begining of your function make :
var defaultHeader = 'templates/common/header.html';
var defaultHeaderController = 'headerControllers';
var defaultMenu = 'templates/common/menu.html';
then during the init of your state you will be able to do :
.state('app.contacts', {
url: '/contacts',
views: {
'headerview': {
templateUrl: defaultHeader ,
controller: defaultHeaderController
},
'menuview': {
templateUrl: defaultMenu
},
'contentview': {
templateUrl: 'templates/contacts.html',
controller: 'contactControllers'
}
}
})
.state('app.partners', {
url: '/partners',
views: {
'headerview': {
templateUrl: defaultHeader ,
controller: defaultHeaderController
},
'menuview': {
templateUrl: defaultMenu
},
'contentview': {
templateUrl: 'templates/partners.html',
controller: 'partnerControllers'
}
}
})
Like that if you want to overwrite the default view you can.
And to update it you have only one place to modify the code.
I have a requirement to get a specific data into the controller which is present inside views section of the state of the $stateProvider of ui-router
state('main', {
abstract: true
url: "/main"
controller: 'MainController'
templateUrl: "main.html"
})
.state('main.state1', {
url: "",
views: {
'view1': {
resolve: function() {
return {
configuration: "widget1"
};
},
templateUrl: "sample1.html",
controller: 'Controller1'
},
'view2': {
resolve: function() {
return {
configuration: "widget2"
};
},
templateUrl: "sample2.html",
controller: 'Controller2'
},
'view3': {
resolve: function() {
return {
configuration: "widget3"
};
},
templateUrl: "sample3.html",
controller: 'Controller3'
},
'view4': {
resolve: function() {
return {
configuration: "widget4"
};
},
templateUrl: "sampl4.html",
controller: 'Controller4'
}
}
});
Now my question will this code work for give the following result
controller1 in the above gets the value of configuration as widget1
controller2 in the above gets the value of configuration as widget2
controller3 in the above gets the value of configuration as widget3
controller4 in the above gets the value of configuration as widget4
if this is not possible then How can I pass the value to the individual controllers
My main.html file looks like this
<div class="main-column">
<div class="detail-container">
<h2>{{pageTitle | translate}}</h2>
</div>
<div class="grid grid-flex">
<div autoscroll="false" ui-view="view1"></div>
<div autoscroll="false" ui-view="view2"></div>
<div autoscroll="false" ui-view="view3"></div>
<div autoscroll="false" ui-view="view4"></div>
</div>
</div>
if you just need to pass a data, dont need a resolve then do like this
.state('state1', {
url: 'url',
templateUrl: 'views/misc/profile.html',
controller: 'profileController',
data: {
configuration: 'widget'
}
});
If you need resolve then try this.
state('state1', {
url: "url.html",
views: {
'view1': {
resolve: {
configuration: function() {
return "widget1";
}
},
templateUrl: "sample1.html",
controller: 'Controller1'
},
'view2': {
resolve: {
configuration: function() {
return "widget2";
}
},
templateUrl: "sample2.html",
controller: 'Controller2'
},
'view3': {
resolve: {
configuration: function() {
return "widget3";
}
},
templateUrl: "sample3.html",
controller: 'Controller3'
},
'view4': {
resolve: {
configuration: function() {
return "widget4";
}
},
templateUrl: "sampl4.html",
controller: 'Controller4'
}
}
});
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 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
How can I get ui-router ui-sref to point to a URL
Here's my link:
<a ui-sref="admin.overview"</a>
and my configuration
var admin = {
name: 'admin',
url: '/admin',
views: {
'root': {
templateUrl: '/Content/app/admin/partials/home.html',
},
'content': {
templateUrl: '/Content/app/admin/partials/overview.html',
},
}
};
var adminContent = {
name: 'admin.content',
parent: 'admin',
url: '/:content',
views: {
'root': {
templateUrl: '/Content/app/admin/partials/home.html',
},
'content': {
templateUrl: function (stateParams) {
return '/Content/app/admin/partials/' + stateParams.content + '.html';
},
}
}
};
$stateProvider.state(admin).state(adminContent)
This works if I point to a like with ui-sref='admin' but how can I get it to point to /admin/overview? or the link works if I code href="/admin/overview" myself? However the ui-sref doesn't create anything with the ui-sref="admin.overview".
Here is the documentation for ui-sref: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
Essentially, you need to enter the desired state, and any parameters that you want to include. For your example, I think:
<a ui-sref="admin.content({ content: 'overview' })">Overview Page</a>