Hello i have diffrents states for 1 controller. that looks like this:
.state('new-orders', {
url: "/new-orders",
templateUrl: "views/new-orders.html",
controller: 'OrderCtrl',
cache: false
})
.state('view-order', {
url: "/view-order/:orderid",
templateUrl: "views/view-order.html",
controller: 'OrderCtrl',
cache: false
})
.state('open-orders', {
url: "/open-orders",
templateUrl: "views/open-orders.html",
controller: 'OrderCtrl',
cache: false
})
.state('completed-orders', {
url: "/completed-orders",
templateUrl: "views/completed-orders.html",
controller: 'OrderCtrl',
cache: false
});
now when a user is in state new-orders, a user can open a order. I do so using:
$scope.goToOrder = function(orderid) {
$state.go('view-order/:orderid/',{orderid:orderid});
}
but for some reason when goToOrder is called i get this response:
Error: Could not resolve 'view-order/:orderid/' from state 'new-orders'
$state.go accept a state name not a url.
Try this:
$scope.goToOrder = function(orderid) {
$state.go('view-order',{orderid:orderid});
}
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.
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'
})
Could not resolve story.detail?storyId=167&pubId=84 from state search
var params = 'storyId='+$scope.stories[index].ID+'&pubId='+$scope.pubId;
$state.go('story.detail?'+params);
$stateProvider
.state('story.list', {
url: '/search?storyId&pubId',
templateUrl: 'views/search.html',
controller: 'SearchCtrl',
resolve: {
ds : ['$wakanda', function($wakanda){
return $wakanda.init();
}]
}
})
.state('story', {
url: '/story',
abstract: true,
templateUrl: 'views/story.html'
// controller: 'StoryCtrl'
})
.state('story.detail', {
url: '/story.detail?storyId&pubId',
templateUrl: 'views/story_detail.html',
controller: 'StoryDetailCtrl',
resolve: {
ds : ['$wakanda', function($wakanda){
return $wakanda.init();
}]
}
});
I've read through other similar questions and replies here.
I don't know why router could not resolve the state name story.detail?storyId=167&pubId=84 from state search.
$state.go should be configured like so:
$state.go('story.detail', {
storyId : $scope.stories[index].ID,
pubId : $scope.pubId
});
I have states defined as below in my angularjs app using angular ui router state provider. And, I would like to define multiple states with the same configuration ie. with the same template and controller.
$stateProvider
.state('parent', {
templateUrl: 'parent.html',
abstract: true,
parent: 'apm'
})
.state('parent.list', {
abstract: true,
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('parent.list.closed', {
url: '/q',
templateUrl: 'closed.html'
})
.state('parent.list.details', { // would like to have same template, controller on different state parent.details without list
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
.state('parent.list.details.data', { // would like to have same template, controller on different state parent.details.data without list
url: '/details',
views : {
'view1' : {
templateUrl : 'view1.html'
},
'view2' : {
templateUrl : 'view2.html',
controller : 'View2Ctrl'
},
'view3' : {
templateUrl : 'view3.html'
},
'view4' : {
templateUrl : 'view4.html'
}
}
})
Is it possible to do something like
.state(['parent.list.details', 'parent.details'], {
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
Any help or suggestions?
Each state needs to be defined in it's own .state() method. You will run into multiple problems trying to do it the way you listed above. Most importantly would be the url.
You can simply do this:
.state('parent.list', {
url: '/list',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
.state('parent.list.details', {
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
While the code is not condensed or efficient in the sense you have to declare the controller and partial used on each state, it is necessary because each state needs its own .state() method
I wanted the same and made it like this:
//add a new Function to the object $stateProvider
$stateProvider.states = (statesArr, obj) => {
for (var i in statesArr) {
var state = statesArr[i];
$stateProvider.state(state, obj);
}
return $stateProvider;
};
//use the new function
$stateProvider
.states(["main", "main.test"], {
url: '/main',
templateUrl: 'modules/ViewContainer.html',
controllerAs: 'currentCtrl',
controller: 'MainCtrl'
})