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.
Related
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',
}
}
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"
});
});
I want to create multi step form using angularjs.
Here is the code:
(function () {
"use strict";
angular.module("gameManagement", ["ui.router", "ngAnimate", "ngResource", "toaster"])
.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterPorvider) {
$urlRouterPorvider.otherwise("/Game/Home");
$stateProvider
.state("Home", {
url: "/Game/Home",
templateUrl: "/app/Game/GameView.html",
controller: "GameController as vm"
});
$stateProvider
.state("Log", {
url: "/Game/Log",
templateUrl: "/app/Log/GameLogView.html",
controller: "GameLogController as vm"
});
$stateProvider
.state("MultiStepForm", {
url: "/Game/MuiltyStepForm",
templateUrl: "/app/MultiStepForm/MuiltyStepForm.html"
});
$stateProvider
.state("MultiStepForm.view", {
url: "/Game/MuiltyStepForm/view",
templateUrl: "/app/MultiStepForm/MuiltyStepForm.html"
})
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
}]);
})();
I get this error when I try to move to state MultiStepForm.view.step2
Error: Could not resolve '.MultiStepForm.view.step2' from state 'MultiStepForm.view'
Any idea why I get the error?
And can I create nested state inside nested state?
Hi this is because you are using nested states so in your example
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
step2 inherits from step1 and not from multistepform.view
I think you should be able to fix it by doing this :
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
parent: MultiStepForm.view,
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
parent: MultiStepForm.view,
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
check out this url for more info about nested states nested views in angular
i make an mobile site for buy/renew/transfer/ domains.
The whole app has 4 templates connected into functional chain.
Buy : Search -> (login if needed?) -> Pay -> -Confirmation
Renew : Choose -> (login if needed?) -> Pay -> -Confirmation
Transfer: Choose -> (login if needed?) -> Pay -> -Confirmation
While the app has the same templates, the functionality and titles are different. And i want to be able to check the parent state within every state in order to make dynamic changes, and switch request strings.
The simplest way is to define 12 (4X3) routes in my stateProvider. but i'm looking for more effective way to do this by unite buy.search, renew.search, transfer.search and others in three groups of routes. is it possible? Do any one may suggest me other approach?
Thanks
===UPDATE===
current stateProvider
.state('app.buy.search', {
url: "/search",
templateUrl: "templates/search_domain.html",
controller: 'SearchCtrl'})
.state('app.buy.login', {
url: "/buy/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'})
.state('app.buy.pay', {
url: "/buy/pay",
templateUrl: "templates/pay.html",
controller: 'PayCtrl'})
.state('app.renew.search', {
url: "/search",
templateUrl: "templates/search_domain.html",
controller: 'SearchCtrl'})
.state('app.renew.login', {
url: "/buy/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'})
.state('app.renew.pay', {
url: "/buy/pay",
templateUrl: "templates/pay.html",
controller: 'PayCtrl'})
.state('app.transfer.search', {
url: "/search",
templateUrl: "templates/search_domain.html",
controller: 'SearchCtrl'})
.state('app.transfer.login', {
url: "/buy/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'})
.state('app.transfer.pay', {
url: "/buy/pay",
templateUrl: "templates/pay.html",
controller: 'PayCtrl'})
You can reduce the router configurations by applying dynamic url. In your case, pages (search, pay, login) are same for modules (buy, renew, transfer). So you can change the configuration as follows
$stateProvider
.state('app', {
url: '/',
templateUrl: 'dashboard.html',
controller: 'MainCtrl'
})
.state('app.search', {
url: '{module}/search',
views: {
"searchView": {
templateUrl: 'search.html',
controller: 'SearchCtrl'
}
}
})
.state('app.pay', {
url: '{module}/pay',
views: {
"payView": {
templateUrl: 'pay.html',
controller: 'PayCtrl'
}
}
})
.state('app.login', {
url: '{module}/login',
views: {
"loginView": {
templateUrl: 'login.html',
controller: 'LoginCtrl'
}
}
})
Demo: http://plnkr.co/edit/NGsZJB?p=preview
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.