I have states in 2 languages, like this:
$stateProvider
.state('contacts', {
url: "/contacts",
templateUrl: 'contacts.html'
});
$stateProvider
.state('contacts.edit', {
url: "/edit",
templateUrl: 'contacts.html'
})
$stateProvider
.state('contatos', {
url: "/contatos",
templateUrl: 'contacts.html'
})
$stateProvider
.state('contatos.editar', {
url: "/editar",
templateUrl: 'contacts.html'
})
Right now I'm looping an array to push all my states.
Is there another way to do that?
Sure. Your state name isn't used for what the user does, so that doesn't need to be translated. Only the URL does. Unfortunately ui-router doesn't yet support having multiple URLs in a single state, but somebody has a solution using urlMatcherFactory decoration here:
https://github.com/angular-ui/ui-router/issues/185#issuecomment-48124930
Related
I am using $stateProvider to define my routes, and I'm facing issues where if I have two routes with the same number of path parameters they go in a loop with each other and though I'm using ui-sref with the name of the route specifically.
for example :
$stateProvider
.state( {
name: 'main',
url: '/{clientId}',
templateUrl: '/main.html',
controller: 'mainCtrl',
})
is getting in a loop with :
.state('battview_mobile',{
url: '/batteries',
templateUrl: 'modules/batteries/views/batteries.html',
controller: 'batterieseCtrl',
})
though in the HTML I call :
ui-sref="battview_mobile"
Can you advise me why it's happening though I'm naming my state to go to?
Your second state is missing the name parameter:
Also your are passing a parameter clientId with the wrong way. It should be :clientId That means this:
$stateProvider
.state('main',{
url: '/:clientId',
templateUrl: '/main.html',
controller: 'mainCtrl',
})
.state('battview_mobile',{
url: '/batteries',
templateUrl: 'modules/batteries/views/batteries.html',
controller: 'batterieseCtrl',
})
I am using states to go from page to page. From one of URLs I am reading parameter from URL (id) and I can easily do this when defining state.
.config(function($stateProvider) {
$stateProvider
.state("testing", {
url: "/testSession/:id",
controller: "UserTestSessionController",
templateUrl: "./app/components/userTestSession/user-test-session.html",
controllerAs: "vm"
})
})
My URL looked like this: localhost:8000\testSession\id
If I change URL to look like this: localhost:8000\testSession\id?otp="someStringValue" can I somehow define otp in url param of state? Or do I need to change it totally?
You can just add ?opt to the url
If you need to have more than one, separate them with an '&'
.config(function($stateProvider) {
$stateProvider
.state("testing", {
url: "/testSession/:id?otp",
controller: "UserTestSessionController",
templateUrl: "./app/components/userTestSession/user-test-session.html",
controllerAs: "vm"
})
})
Decently new to Angular, trying to figure out the correct way to use $stateProvider.
here is my current setup
$stateProvider
.state('users_orders', {
url: '/users/:userId/orders',
templateUrl: '/assets/orders/users/index.html',
controller: 'UserOrdersController'
})
.state('users_orders_edit', {
url: '/users/:userId/orders/:orderId/edit',
templateUrl: '/assets/orders/users/edit.html',
controller: 'UserOrderController'
})
}])
This setup works fine, but what i would like to do is something like this.
$stateProvider
.state('users_orders', {
url: '/users/:userId/orders',
templateUrl: '/assets/orders/users/index.html',
controller: 'UserOrdersController'
})
.state('users_orders.edit', {
url: '/:orderId/edit',
views: {
edit: {
templateUrl: '/assets/orders/users/edit.html',
controller: 'UserOrderController'
}
}
})
}])
This setup doesnt work though, when i click on my edit link it changes the url, but stays on the same page. Am I doing the setup wrong?
In order to make the second solution work you should have in index.html a
<div ui-view="edit"></div>
Can someone see why this is not working? /series is not loading the Gallery, however the /series/:id/seasons part is working. (Its not a missing ng-view problem see working code below!)
angular.module('xbmcremoteApp')
.config(function ($stateProvider) {
$stateProvider
.state('series', {
url: '/series',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
}).state('series.gallery', {
url: '',
templateUrl: 'app/series/series-gallery/series-gallery.html',
controller: 'SeriesGalleryCtrl'
}).state('series.seasons', {
url: '/:id/seasons',
templateUrl: 'app/series/seasons/seasons.html',
controller: 'SeasonsCtrl'
});
});
if i change it to this it works but thats not what i want:
angular.module('xbmcremoteApp')
.config(function ($stateProvider) {
$stateProvider
.state('series', {
url: '',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
}).state('series.gallery', {
url: '/series',
templateUrl: 'app/series/series-gallery/series-gallery.html',
controller: 'SeriesGalleryCtrl'
}).state('series.seasons', {
url: '/series/:id/seasons',
templateUrl: 'app/series/seasons/seasons.html',
controller: 'SeasonsCtrl'
});
});
EDIT and soltuion:
My post lacked some information. To make that clear: I want to display a gallery when the /seriesurl is called. And i want to display the seasons with the seasons url. No more views!
Found an very easy solution. Setting the abstract property to true forces the stateprovider to use the child view.
....
.state('series', {
abstract:true, //adding this line makes the states work as expected
url: '/series',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
})
....
In the first definition the url /series is evaluated as a root state 'series'
.state('series', {
url: '/series', // url evaluation will stop here, because
... // there is a match for /series
}).state('series.gallery', { // this will never be reached via url
url: '', // but ui-sref="series.gallery" will work
...
While the second mapping does distinguish both states, and '/series' will navigate to 'series.gallery' state :
.state('series', {
url: '', // url like "#" will navigate there
...
}).state('series.gallery', { // url /series will trigger this child state
url: '/series',
...
In general, if states should be unique by url, each of them should have some defintion. So mostlikely this should be working as inteded:
.state('series', {
url: '/', // url like "#/" will navigate to series
...
}).state('series.gallery', { // url '/series' will trigger this
url: '^/series',
...
check the magical sign: ^:
Absolute Routes (^) (cite:)
If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.
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.