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"
})
Related
My website has 2 main routes:
/home
/:something
Any request to / should go to /home and this is done by using 'otherwise', anything else that does not match home AND is not empty should go to app.lista. The thing is, app.lista matches / because is like :slug is empty, so otherwise is not being called:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: '/_/common/templates/main.html',
controller: 'main'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
How can I tell the stateProvider to not match app.lista if :slug is empty?
Looks like same issue which is logged Here on github and solution seems to be the use ragular expression
I think changing your slug route to
.state('app.lista', {
url: '/{slag:[^\/]+}',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
Should solve your problem plunker
Make your app route non-abstract and change the template and controller to point to that of app.home. Since it is defined before app.list, '/' will match app route instead.
$stateProvider
.state('app', {
url: '/',
templateUrl: '/_/common/templates/home.html',
controller: 'home'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
Use UI Routers resolve to check if route params are missing.
//Example of a single route
.state('app.lista', {
url: '/:slug',
templateUrl: '----.html',
controller: 'list',
resolve: function($stateParams, $location){
//Check if url parameter is missing.
if ($stateParams.slug=== undefined) {
//Do something such as navigating to a different page.
$location.path('/somewhere/else');
}
}
})
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});
}
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'
})
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!