Here is my $stateProvider configuration:
.state('itemDetail', {
abstract: true,
url: '/itemDetail/general/:itemid',
controller: 'ItemDetailsController',
templateUrl: './partials/itemDetails.html'
})
.state('itemDetail.general', {
url: "",
controller: 'ItemDetailsController',
templateUrl: "./partials/itemDetails.General.html"
})
.state('itemDetail.file', {
url: "/file/:itemid",
controller: 'ItemDetailsController',
templateUrl: "./partials/itemDetails.File.html"
})
The user can look at item using #/itemDetail/general/96045 and can click the link to look at file attachments. Now it is work but URL for files now is #/itemDetail/general/96045/file/96045.
Is it possible to have URL for files as #/itemDetail/file/96045?
Well, I would go with one parent and only one child state. There is a working plunker
This will be the new one child state itemDetail.type:
.state('itemDetail', {
abstract: true,
url: '/itemDetail',
controller: 'ItemDetailsController',
templateUrl: 'partials/itemDetails.html'
})
.state('itemDetail.type', {
url: "/:type/:itemid",
controller: 'ItemDetailsController',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest) {
var url = "partials/itemDetails.General.html";
if($stateParams.type === "file"){
url = "partials/itemDetails.File.html"
}
return $templateRequest(url);
}],
})
We are using here $stateParams.type to decide which template to load (and also $templateRequest to profit from angula built in caching)
And this will be the calling html:
<a ui-sref="itemDetail.type({type:'general', itemid:1})">
<a ui-sref="itemDetail.type({type:'file', itemid:22})">
The url will now look as expected
check it here
Yes it can be you need to give state as
.state('itemDetail.file', {
url: '/{itemId}',
controller: 'ItemDetailsController',
templateUrl: 'partials/itemDetails.html'
})
Related
Here below is my URL
localhost:9000/index.html#!/app/apis/1066/general.
If I change value of param to 1067 it should update API(s) general information based on 1067.
But instead URL is set back to param value 1066 instantly and the page is not refreshed.
Here is my route:
$ocLazyLoadProvider.config({
debug:false,
events:true
});
$urlRouterProvider.otherwise('/app/welcome');
$stateProvider
.state('app', {
abstract:true,
url:'/app',
templateUrl: 'views/dashboard/main.html'
})
.state('app.home', {
url: '',
templateUrl: 'views/dashboard/home.html',
controller: 'MainCtrl'
})
.state('app.api', {
url: '/apis',
controller: 'apiCtrl',
templateUrl: 'views/dashboard/apis/index.html'
})
.state('app.addApi', {
url: '/apis/add',
controller: 'apiCtrl',
templateUrl: 'views/dashboard/apis/createApi.html'
})
.state('app.apis', {
url: "/apis/:id",
templateUrl:"views/dashboard/apisMain/updateApis.html",
controller: "updateApisCtrl",
resolve:{
apiData :function ($stateParams, proxyService) {
return proxyService.api($stateParams.id);
}
}
})
.state('app.apis.general', {
url: "/general",
templateUrl: "views/dashboard/general/updateGeneral.html",
controller: "updateGeneralCtrl"
})
I can provide more information if needed. I'm using angularjs 1.7
It might be so that the stateprovider does not consider new url props in it's cache-key.
Try to disable the cache on the state and see if it helps
.state('app.apis', {
cache: false,
url: "/apis/:id",
templateUrl:"views/dashboard/apisMain/updateApis.html",
controller: "updateApisCtrl",
resolve:{
apiData :function ($stateParams, proxyService) {
return proxyService.api($stateParams.id);
}
}
You miss param ID in path config state general, Please try change it:
state('app.apis.general', {
url: "/general",
templateUrl: "views/dashboard/general/updateGeneral.html",
controller: "updateGeneralCtrl"
})
>>>change
state('app.apis.general', {
url: "/:id/general",
templateUrl: "views/dashboard/general/updateGeneral.html",
controller: "updateGeneralCtrl"
})
I'm trying to create a nested state config. When I go with the simple non-nested it works, but when I attempt to do it in a nested fashion it fails.
Below is the working code: (Notice the last state 'new')
app.config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/views/home.html',
controller: 'MainCtrl',
resolve: {
qstnrPromise: ['qstnrs', function(qstnrs) {
return qstnrs.getAll();
}]
}
})
.state('questionnaires', {
url: '/questionnaires/{id}',
templateUrl: '/views/questionnaire.html',
controller: 'QuestionsCtrl',
resolve: {
questionnaire: ['$stateParams', 'qstnrs', function($stateParams, qstnrs){
return qstnrs.get($stateParams.id);
}]
}
})
.state('new', {
url: '/questionnaires/{id}/new',
template: '<h3> testy </h3>'
});
//$urlRouterProvider.otherwise('home');
$urlRouterProvider.otherwise(function($injector, $location){
$injector.invoke(['$state', function($state) {
$state.go('home');
}]);
});
});
If I attempt to change it with the following, it fails. The URL on browser changes but I don't receive the template.
.state('questionnaires.new', {
url: '/new',
template: '<h3>New question</h3>'
});
Have I understood states incorrectly? Or where have I gone wrong?
Try changing your new state to:
.state('new', {
url: '/new',
parent: 'questionnaires',
template: '<h3>New question</h3>'
})
See if that works for you.
You can make the questionnaires state abstract.
$stateProvider
.state('questionnaires', {
abstract: true,
url: '/questionnaires',
})
.state('questionnaires.new', {
// url will become '/questionnaires/new'
url: '/new'
//...more
})
But in this case you will need to add one additional nested state in order to implement the functionality you need for the $stateParams.id.
I have a wizard based process for creating quotes. I'm using angularjs ui-router to manage the wizard urls. The routes shown below work fantastic for creating a new quote. I now need to go back in to edit existing quotes and need to figure out how to use the ID in the URL. I was thinking something like baseUrl/quote#/3/options (quote #3 options step). Currently the url looks like baseUrl/quote#/options. If I change the url in the .state definition from url: 'options', to url:':quoteId/options' it breaks my routes (can no longer get to the option step). Also this wouldn't work for a new quote since it doesn't yet have an ID. What's the best way to get this to work?
quoteWizardModule.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('wizard', {
url: '',
templateUrl: 'Scripts/templates/quoteWizard/wizardLayout.html',
controller: 'wizardNavigationCtrl'
})
.state('wizard.options', {
url: 'options',
templateUrl: 'Scripts/templates/quoteWizard/wizardOptions.html',
controller: 'wizardOptionsCtrl'
})
.state('wizard.newmodel', {
url: 'newmodel',
templateUrl: 'Scripts/templates/quoteWizard/wizardModel.html',
controller: 'wizardModelCtrl',
})
.state('wizard.model', {
url: 'model/:factoryId/:index',
templateUrl: 'Scripts/templates/quoteWizard/wizardModel.html',
controller: 'wizardModelCtrl'
})
.state('wizard.other', {
url: 'other',
templateUrl: 'Scripts/templates/quoteWizard/wizardOther.html',
controller: 'wizardOtherCtrl'
})
.state('wizard.customer', {
url: 'customer',
templateUrl: 'Scripts/templates/quoteWizard/wizardCustomer.html',
controller: 'wizardCustomerCtrl'
})
.state('wizard.shipping', {
url: 'shipping',
templateUrl: 'Scripts/templates/quoteWizard/wizardShipping.html',
controller: 'wizardShippingCtrl'
})
.state('wizard.notes', {
url: 'notes',
templateUrl: 'Scripts/templates/quoteWizard/wizardNotes.html',
controller: 'wizardNotesCtrl'
})
.state('wizard.review', {
url: 'review',
templateUrl: 'Scripts/templates/quoteWizard/wizardReview.html',
controller: 'wizardReviewCtrl'
});
}]);
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.
Is it possible to access $routeParams in this case the id parameter within the abstract ProfileCtrl?
.state('profile', {
abstract: true,
url: "/profile",
templateUrl: 'profile.html',
controller: 'ProfileCtrl'
})
.state('profile.items', {
url: "/:id/items",
views: {
'profile': {
templateUrl: 'ProfileItems.html',
controller: 'ProfileItemsCtrl'
}
}
})
ProfileCtrl can only get parameters of it's url. Use the following:
.state('profile', {
abstract: true,
url: "/profile/:id",
templateUrl: 'profile.html',
controller: 'ProfileCtrl'
})
.state('profile.items', {
url: "/items",
views: {
'profile': {
templateUrl: 'ProfileItems.html',
controller: 'ProfileItemsCtrl'
}
}
})
This way ProfileCtrl is able to get the profile id. It can fetch the profile data and attach it to the $scope. This way any child of profile state will have access to the profile data (due to $scope inheritance).
Hope this helps!