Trying to get the following url structure to work:
/page/
/page/article
/page/article/third-level-1
/page/article/third-level-2
Ive tried the follow but it doesn't render the article view at all. The page view renders fine:
<section ui-view></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
})
.state('page.article', {
url: '/article/',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html'
});
I then tried everything under the sun, and managed to get the second view to render with the following, however the Controller doesnt run on the article view:
<section ui-view="app"></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
views: {
'app': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
}
}
})
.state('page.article', {
url: '/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
});
How can i get the child view to render and use the/a controller? Haven't even gotten down to the third level.
It should be this.
.state('page.article', {
url: '/page/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
Related
I am trying to develop an app using Angular 1.4.(Refer below image). I need suggestions on below
What is the best way to develop home Page in this. Should I use <ui-view>(UI routing) to creates the 8 states or should I use 8 different custom directives to tabs(tab1, tab2, tab3, etc...)
Can my application has both routeprovider and stateprovider together in config file.(Another post from Stackoverflow)
--------------------------------------------------------------------------->
My view/idea for developing this---->
will be using ng-view to load the pages(home, nav2, nav3, etc)
will be using ui-view to load the tabs/panel inside home page(tab1, tab2, tab3, etc)
Using Both ng-view and ui-view does not show any results in the file. i.e, App crashes.. So I have moved to ui-view to display all the states.
Below is the code which works fine.
Tutorial
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url:"/home",
views:{
"":{
templateUrl: "views/home.html"
},
"profile#home":{
templateUrl: "views/home/profile.html"
},
"companyAnnouncement#home":{
templateUrl: "views/home/company-announcement.html"
},
"leaveBalance#home":{
templateUrl: "views/home/leave-balance.html"
},
"leaveDetails#home":{
templateUrl: "views/home/leave-details.html"
},
"attendenceDetails#home":{
templateUrl: "views/home/attendence-details.html"
},
"holidayList#home":{
templateUrl: "views/home/holiday-list.html"
},
"queryStatus#home":{
templateUrl: "views/home/query-status.html"
},
"payrolQueryStatus#home":{
templateUrl: "views/home/payrol-query-status.html"
}
}//views ends here
})
.state("login", {
url: "/login",
templateUrl: "views/login.html"
})
.state("selfService", {
url:"/self-service",
views:{
"":{
templateUrl: "views/self-service.html"
}
}
})
.state("edirectory", {
url: "/edirectory",
templateUrl: "views/edirectory.html",
controller: 'edirectoryController',
controllerAs: 'edirectoryCtrl',
resolve: {
employeeList: function (edirectoryService) {
return edirectoryService.getAllEmployees();
}
}
})
.state("myLeave", {
url: "/my-leave",
templateUrl: "views/my-leave.html"
})
.state("attendence", {
url: "/attendence",
templateUrl: "views/attendence.html"
})
.state("compOffRequest", {
url: "/comp-off-request",
templateUrl: "views/comp-off-request.html"
})
.state("raiseQuery", {
url: "/raise-query",
templateUrl: "views/raise-query.html"
})
.state("eacademy", {
url: "/eacademy",
templateUrl: "views/eacademy.html"
})
.state("downloads", {
url: "/downloads",
templateUrl: "views/downloads.html"
});
});
Im transitioning from one state to another using $state.go() like below:
$state.go('menuItem.list');
This causes following error.
Could not resolve 'menuItem.list' from state 'branches.view'
Below are the state providers for menuItem and branch modules.
module : branch
.state('branches', {
abstract: true,
url: '/branches',
template: '<ui-view/>'
})
.state('branches.list', {
url: '',
templateUrl: 'modules/branches/client/views/list-branches.client.view.html',
controller: 'branchesListController',
controllerAs: 'vm'
})
.state('branches.view', {
url: '/:branchId',
templateUrl: 'modules/branches/client/views/view-branch.client.view.html',
controller: 'branchesController',
controllerAs: 'vm'
})
module : menuItem
.state('menuItems', {
abstract: true,
url: '/menuItems',
template: '<ui-view/>'
})
.state('menuItems.list', {
url: '',
templateUrl: 'modules/menuItems/client/views/list-menuItems.client.view.html',
controller: 'menuItemsListController',
controllerAs: 'vm'
})
This way you can all modules in new module file
angular.module('branches.modules', [
'branches', 'branches.list', 'branches.view', 'menuItems','menuItems.list'
]);
and add that in your main app.js or app.module.js
angular.module('app', ['ui.router', 'branches.modules']);
yo can use code below :
module : branch
.state('branches', {
abstract: true,
url: '/branches',
template: '<ui-view/>'
})
.state('branches.list', {
url: '',
views: {
templateUrl: 'modules/branches/client/views/list-branches.client.view.html',
controller: 'branchesListController',
controllerAs: 'vm'
}
})
.state('branches.view', {
url: '/:branchId',
views: {
templateUrl: 'modules/branches/client/views/view-branch.client.view.html',
controller: 'branchesController',
controllerAs: 'vm'
}
})
module : menuItem
.state('menuItems', {
abstract: true,
url: '/menuItems',
template: '<ui-view/>'
})
.state('menuItems.list', {
url: '',
views:{
templateUrl: 'modules/menuItems/client/views/list-menuItems.client.view.html',
controller: 'menuItemsListController',
controllerAs: 'vm'
}
})
you must use views in state
Good Luck
Sorry if similar questions have been asked before but I have been strugling to get a certain setup working for a while. I took a working plunker from from an existing question and am trying to tweak it just a little to my needs.
Orginal Plunker: http://plnkr.co/edit/uY1Sl3f0KCTukPGHDRdW
My (slightly) edited fork: http://plnkr.co/edit/hlw4Et00UeGjzxD4Mszi
What I am trying to achieve is a base layout containing a header, footer and unnamed view for the page content. I can do this fine with the original plunker. But when I try to get more fancy and have a structure more like this:
$urlRouterProvider.otherwise('/home/list');
$stateProvider
.state('root', {
abstract: true,
views: {
'#': {
controller: 'RootCtrl',
controllerAs: 'rootCtrl'
},
'header#': {
templateUrl: 'header.html',
controller: 'HeaderCtrl',
controllerAs: 'headerCtrl'
},
'footer#': {
templateUrl: 'footer.html',
controller: 'FooterCtrl',
controllerAs: 'footerCtrl'
}
}
})
And here is the adjusted state definition:
.state('root.home', {
parent: 'root',
url: '/home',
views: {
'#': {
template: '<ui-view></ui-view>',
controller: 'HomeController',
controllerAs: 'homeCtrl'
},
'list#root.home': {
url: '/list',
template: 'homeList.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}
},
});
What I am trying to do here is make it so that 'root.home' state is just a base state for prepending the URL 'home' or whatever the url is in my real application. I have tried ready though the ui-route sample app but it's a lot to take in and am going in circles. I'm sure this is simple...
There is a working updated plunker. There is one state definition adjustment.
This was original piece of code:
.state('root.home', {
parent: 'root',
url: '/home',
views: {
'#': {
template: '<ui-view></ui-view>',
controller: 'HomeController',
controllerAs: 'homeCtrl'
},
'list#root.home': {
url: '/list',
template: 'homeList.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}
},
});
What was wrong there? Firstly a note - we do not need to define parent: 'root', because our parent is in our name 'root.home'. So, to make it more clear, I decided to keep parent setting, while change the state name into 'home'.
Secondly, we have two views in play for our state, but the second one, is ordered to be injected into the first one.
// this line is instructing UI-Router: inject this into
// the other view definition of the current state
// search for ui-view="list"
'list#root.home'
but there was no ui-view="list" defined.
Finally, we cannot declare url for views. Url belongs just to states:
// this is wrong. The view cannot have url
// url is for state
'list#root.home': {
url: '/list',
So, we should introduce the child of our state... 'home.list'
This is the adjusted state(s) definition (from the new working plunker):
.state('home', {
parent: 'root',
url: '/home',
views: {
'#': {
template: '<div ui-view="list"></div>',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}
},
})
.state('home.list', {
url: '/list',
views: {
'list': {
templateUrl: 'homeList.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}
},
});
Hello when i have this states defined:
.state('locations', {
url: '/locations',
templateUrl: '/templates/locations/index.html',
controller: 'LocationsCtrl'
})
.state('locations.show', {
url: '/{location_id}',
templateUrl: '/templates/locations/show.html'
});
How can i have /templates/locations/index.html to show for example a list of all locations,
but templates/locations/show.html to show a view of the location, but not nested inside the view of index.html. Basically i want the routes nested, but not the views.
I just worked on an example similar to yours
.state('overview', {
url: '/all',
templateUrl: '_/partial/overview/all.html',
controller: 'homeCtrl'
})
.state('places', {
url: '/:id/place',
templateUrl: '_/partial/details/detail-place.html',
controller: function($scope, $stateParams) {
$scope.path = $scope.paths[$stateParams.id];
}
})
In your case
.state('locations', {
url: '/locations',
templateUrl: '/templates/locations/index.html',
controller: 'LocationsCtrl'
})
.state('show', {
url: '/{location_id}',
templateUrl: '/templates/locations/show.html'
});
That means the show state shouldn't be nested under locations.
How do I load different layouts ?
Currently I have three layouts for my backend, one for admin, one for user and last for teacher i.e adminLayout.html, userlayout.html and teacherLayout.html for dashboards.
I am writing my routes something like this -
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/pages/home.html',
controller: 'homeCtrl'
})
.when('/users/login', {
templateUrl: 'views/users/login.html',
controller: 'usersLoginCtrl'
})
.when('/users/dashboard', {
templateUrl: 'views/users/dashboard.html',
controller: 'usersDashCtrl'
})
.when('/teachers/login', {
templateUrl: 'views/teachers/login.html',
controller: 'teachersLoginCtrl'
})
.when('/teachers/dashboard', {
templateUrl: 'views/teachers/dashboard.html',
controller: 'teachersDashCtrl'
})
});
For /users/dashboard I want usersLayout.html and /teachers/dashboard I want teachersLayout.html.
How could I acheive this ?
I tried $window.location.href = "LINK_TO_LAYOUT"; but its is taking the whole path in the URL, however I want to my URL like -
mysite.com/teachers/dashboard
mysite.com/users/dashboard
mysite.com/admin/dashboard
You should use Ui-Router.
It support nested views.
So in your example your routes would be like this.
app.config(function($stateProvider){
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/pages/home.html',
controller: 'homeCtrl'
})
.state('users', {
url: '/users',
templateUrl: 'views/users/layout.html'
})
.state('users.login', {
url: '/users/login',
templateUrl: 'views/users/login.html',
controller: 'usersLoginCtrl'
})
.state('users.dashboard', {
url: '/users/dashboard',
templateUrl: 'views/users/dashboard.html',
controller: 'usersDashCtrl'
})
.state('teachers', {
url: '/teachers',
templateUrl: 'views/teachers/layout.html'
})
.state('teachers.login', {
url: '/teachers/login',
templateUrl: 'views/teachers/login.html',
controller: 'teachersLoginCtrl'
})
.state('teachers.dashboard', {
url: '/teachers/dashboard',
templateUrl: 'views/teachers/dashboard.html',
controller: 'teachersDashCtrl'
})
});
Then you need to creat this new Layout Pages.
On: views/users/layout.html
<div id="usersLayout">
<ui-view/>
</div>
On: views/teachers/layout.html
<div id="teachersLayout">
<ui-view/>
</div>
Hope this get you going.
One of ways use 'abstract' state from ui-router
$stateProvider
.state('contacts', {
abstract: true, // <<< this is your layout
url: '/contacts',
// Note: abstract still needs a ui-view for its children to populate.
// You can simply add it inline here.
// >>> Or use templateUrl: 'contactLayout.html'
template: '<ui-view/>'
})
.state('contacts.list', {
// url will become '/contacts/list'
url: '/list'
//...more
})
.state('contacts.detail', {
// url will become '/contacts/detail'
url: '/detail',
//...more
})
Please spend some time for learning ui-router and you will have powerfull and simple tool for routing in angularjs.
Check docs for more info about abstract state.