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>
Related
I have an app built using ionic framework, I follow the instructions on ionicframework learn page and now I am using the native sidemenu. The problem is, I can't use controller alias. Here is a snipet of my app.js with the route config:
angular.module('checklist-atendimento', [
'ionic',
'oc.lazyLoad',
'ngStorage',
'ngCordova',
'ngMask'
])
.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('/app/atendimento/1');
$httpProvider.interceptors.push('TratamentoDeErrosService');
$stateProvider
.state('app', {
abstract: true,
url: '/app',
views: {
'conteudo': {
templateUrl: 'app/templates/menu.html'
}
}
})
.state('app.inicio', {
url: '/inicio',
views: {
'menuContent': {
templateUrl: 'app/views/inicio.html',
controller: 'InicioController',
}
}
})
.state('app.atendimento', {
url: '/atendimento/:codMenu',
views: {
'menuContent': {
templateUrl: 'app/views/atendimento.html',
controller: 'AtendimentoController',
controllerAs: 'atendimentoCrl'
}
}
})
});
As you can see, I have 2 states, one without controllerAs (InicioController) and the other using controllerAs (AtendimentoController).
In controller I put
$scope.test ="TEST!!!"
and in the view I put
<b>{{atendimentoCtrl.test}}<b>
Nothing happens, if I use just {{test}}, but the text is shown.
Anyone knows how to do it ?
EDIT:
HERE there is a example of what a talking about:
http://plnkr.co/ohL5HE
Look inside ItemCtrl and inside index.html, on item.html.
I tried use an alias to controller but it don't works.
You need to change
$scope.test ="TEST!!!"
to:
this.test ="TEST!!!"
The issue here is just a typo... This is a controller state
.state('app.atendimento', {
url: '/atendimento/:codMenu',
views: {
'menuContent': {
templateUrl: 'app/views/atendimento.html',
controller: 'AtendimentoController',
controllerAs: 'atendimentoCrl'
}
}
})
where we can see 'atendimentoCrl'. And here is a view statement
<b>{{atendimentoCtrl.test}}<b>
where we can see atendimentoCtrl (compare Ctrl suffix and Crl above)
So, there is missing t in the controllerAs
in my app.js folder I have a
$stateProvider
.state('state1', {
url: '/',
templateUrl: 'app/list.html',
controller: 'Ctrl1',
})
.state('state2', {
url: '/details',
templateUrl: 'app/details.html',
controller: 'Ctrl2'
})
.state('state3', {
url: '/list',
templateUrl: 'app/list.html',
controller: 'Ctrl3'
});
At the moment I am calling all of these altogether in index.html using
Is there a way to specify which controller you want displayed in each part of the page. As I'm calling it now it seems that it simply calls everything where it is called in the index.html page which makes it quite hard to organise.
I have the following states:
$stateProvider.
state('candidates', {
abstract: true,
url: '/candidates',
templateUrl: '/Scripts/App/js/Views/candidates/candidates.html',
controller: 'candidatesTableController'
}).
state('candidates.item', {
url: '/{item:[0-9]{1,4}}',
templateUrl: '/Scripts/App/js/Views/candidates/candidate.html',
controller: 'candidatesDetailController'
}).
state('candidates.item.details', {
url: '/details',
templateUrl: '/Scripts/App/js/Views/candidates/partials/generalDetails.html',
controller: function($scope, $stateParams) {
$scope.item= $stateParams.item;
}
}).
state('candidates.item.edit', {
url: '/details/edit',
templateUrl: '/Scripts/App/js/Views/candidates/partials/form.html',
controller: function($scope, $stateParams) {
$scope.item = $stateParams.item;
}
}).state('candidates.item.photo', {
url: '/details/photo',
templateUrl: '/Scripts/App/js/Views/candidates/partials/updatePhotoID.html',
controller: function($scope, $stateParams) {
$scope.item = $stateParams.item;
}
});
Here my urlRouterProvider:
$urlRouterProvider
.when('/candidates/:item', '/candidates/:item/details')
.otherwise("/");
When I use ui-sref everything work fine but when i using the actual url, it never can find the following url:
"/#/candidates/4/details"
it redirect to the root ("/#/")
I can't figure out why?
Thanks
I created a plunkr with your routes defined here:
http://run.plnkr.co/Sn3s7ooM6MOSxQnB/#/candidates/4/details
Code visible here:
http://plnkr.co/edit/wArFenIZ7j3WczUhtJO6
Notice that the first link in this answer takes you right to the details page for a candidate item. Maybe you can figure out from my simplified code what it is that you need to change to achieve the same behavior.
Also, I noticed that your redirect doesn't work (the second nav item in my plunker allows you to go to this state without a redirect; try clicking it yourself):
.when('/candidates/:item', '/candidates/:item/details')
This redirect will work if you set the candidates.item state to be abstract. Maybe this is what you want.
See this in action here: http://plnkr.co/edit/y9LI0OKGMStVnMY2NX5q
Code visible here: http://plnkr.co/edit/y9LI0OKGMStVnMY2NX5q
I hope that helps
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.
I try to make this Plunker to work, spent more then 5 hours, posting here was a last resort.
app.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
// the pet tab has its own child nav-view and history
.state('tab.pet-index', {
url: '/pets',
views: {
'pets-tab': {
templateUrl: 'pet-index.html',
controller: 'PetIndexCtrl'
}
}
})
.state('tab.pet-detail', {
url: '/pet/:petId',
views: {
'pets-tab': {
templateUrl: 'pet-detail.html',
controller: 'PetDetailCtrl'
}
}
});
console.log('app load ...');
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/pets');
});
Here I call $urlRouterProvider.otherwise('/tab/pets')
But I fail to get controller:
app.controller('PetIndexCtrl', function($scope, PetService) {
console.log('PetIndexCtrl load ...');
$scope.pets = PetService.all();
});
What I do wrong here? please help,
Thanks,
It seems to come down to the ion- prefix missing in several places.
When I change nav-view to ion-nav-view, tabs to ion-tabs etc, things seems to work.
plunkr