I have a job state with :jobId parameter.
$stateProvider
.state('employer', {
url: "/",
abstract: true,
templateUrl: '../partials/employer/employerHome.html',
controller: 'UserHomeController',
})
.state('employer.edit', {
url: "^/edit",
templateUrl: '../partials/employer/profile.html',
controller: 'UserHomeController',
})
.state('employer.jobs', {
url: "^/jobs",
templateUrl: '../partials/employer/jobs.html',
controller: 'formController'
})
.state('job', {
parent: 'employer.jobs',
url: '/job/:jobId',
// abstract: true,
controller: 'formController',
onEnter: ['$uibModal', '$state', '$http', '$stateParams', function ($uibModal, $state, $http, $stateParams) {
console.log('Open modal');
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
backdrop: false,
windowClass: 'right fade',
keyboard: true,
controller: 'PostModalInstanceCtrl',
resolve: {
job: function () {
return $stateParams.jobId;
},
},
}).result.finally(function () {
$state.go('employer.jobs');
console.log('job modal closed')
});
}],
})
.state('system_matches', {
parent: 'job',
url: "/system_matches",
controller: 'TController',
views: {
'job#': {
templateUrl: '../partials/employer/system_matches.html',
}
}
});
when I go to the system_matches state the URL looks good: /employer#/jobs/job/1/system_matches and the HTML is loading in the console but cant see the view.
the job/:jobId state is in a modal and from there I want to go to
the system matches state that is not in a modal.
I guess I need to add a ui-view div. my question is where do I need to put the div and how is it supposed to be named with the id parameter?
Related
I have followed the documentation and online tutorials to create my ui-router states however when I enter my state, the URL doesn't update. Same happens when I do $state.go('main.about-me'); for example. The state changes but not the URL. Is there something wrong with my config that I can't see clearly?
Will be thankful for any tips. Thanks.
'use strict';
angular
.module('myApp.config', ['ui.router'])
.config(routes)
.run(['$rootScope', '$location', '$stateParams', '$state', appRun]);
function routes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: 'main',
abstract: true,
views: {
'': {
templateUrl: 'main/main.tpl.html',
controller: 'mainController as vm'
},
'nav-bar#main': {
templateUrl: 'main/nav-bar/nav-bar.tpl.html',
controller: 'navigationBarController as vm'
}
}
})
.state('main.home', {
url: '/home',
views: {
'content': {
templateUrl: 'home/home.tpl.html',
controller: 'homeController as vm'
}
}
})
.state('main.about-me', {
url: '/about-me',
views: {
'content': {
templateUrl: 'about-me/about-me.tpl.html',
controller: 'aboutMeController as vm'
}
}
})
.state('main.contact-me', {
url: '/contact-me',
views: {
'content': {
templateUrl: 'contact-me/contact-me.tpl.html',
controller: 'contactMeController as vm'
}
}
});
$urlRouterProvider.otherwise('');
}
function appRun($rootScope, $location, $stateParams, $state) {
console.log('run the app');
console.log('$location', $location);
console.log('$rootScope', $rootScope);
console.log('$stateParams', $stateParams);
$state.go('main.home');
}
Inside my body I have this
<div ng-cloak>
<div ui-view class="content-container"></div>
</div>
So, I have a state where the resolve spits out an array which shows correctly on the frontend.
But I can't seem to be able to pass the parent resolve data to the child state.
$stateProvider.state('berliner', {
url: '/berlinerliste',
params : {search: 'Berliner 2017'},
resolve: {
fair: function(SearchService, $stateParams) {
return SearchService.getAllExhibitors($stateParams.search);
}
},
views: {
'header': {
templateUrl: 'header.htm'
},
'main':{
templateUrl: 'bl2017.htm',
controller: function($scope, fair){
$scope.fair = fair;
console.log($scope.fair);
}
}
}
})
.state('berliner.exhibitor', {
url: '/{id}',
resolve: {
exhibitor: function($stateParams, fair) {
var slug = $stateParams.id;
return slug;
}
},
views: {
'header': {
templateUrl: 'header.htm'
},
'wop':{
templateUrl: 'exhibitor.htm',
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
}
}
})
All the console log come out undefined.
What am I missing?
PLUNKR
Here's a Plunkr to examplify the issue.
I would say, that the concept should work.. just:
controller belongs to view. not to all views: {}
E.g. this (wrong)
// each view can have controller,
// but views : {} property 'controller' is not used at all
views: {
'header': {
templateUrl: 'header.htm'
},
'wop':{
templateUrl: 'exhibitor.htm',
},
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
should be adjusted as that:
views: {
'header': {
templateUrl: 'header.htm'
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
},
'wop':{
templateUrl: 'exhibitor.htm',
controller: ...
There is an example, how
parent does resolve
child view's controller consumes it
states:
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
resolve: {
example: ['$timeout', function($timeout){
return $timeout(function(){
return {x: 1}
},100)
}],
},
})
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
})
child controller
.controller('ChildCtrl', ['$scope', 'example', function ($scope, example) {
console.log(JSON.stringify(example));
}])
Check it here
I need to initialize my Angular with some User data that the whole app depends on. Therefore I need the initialization to be resolved before the router kicks in and controllers are initialized.
Currently, I wrote the initialization code in a run() block of the angular module. The initialization involves an asynchronous http request to get user data and the rest of the application relies upon the user data.
How can I ensure that the http request is resolved before the router kicks-in initializing the controllers?
I am using the ui-router.
The initialization consists in the following:
1) get cookie 'userId'
2) get User from server (asynchronous http request, the whole app depends upon the User)
3) set authService.currentUser
this is a sample of the code
.run(['$cookies', 'userApiService', 'authService',
function($cookies, userApiService, authService){
var userId = $cookies.get('userId');
userId = parseCookieValue(userId);
userApiService.getOne(userId).then(function(user){
authService.currentUser = user;
});
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.when('/', '/main');
$stateProvider
.state('login', {
url: '/login',
views: {
'header': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},
'content': {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
})
.state('main', {
url: '/main',
views: {
'content#': {
template: '',
controller: function($state, authService) {
if(!authService.isAuthenticated()) {
$state.go('login');
}
if(authService.isStudent()) {
$state.go('student');
}
if(authService.isAdmin()) {
$state.go('admin');
}
}
}
}
})
.state('student', {
url: '/student',
views: {
'header#': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},
'content#': {
templateUrl: 'views/student.html',
controller: 'StudentCtrl'
},
'footer#': {
templateUrl: 'views/footer.html',
}
}
})
.state('admin', {
url: '/admin',
views: {
'header#': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},
'content#': {
templateUrl: 'views/admin.html',
controller: 'AdminCtrl'
},
'footer#': {
templateUrl: 'views/footer.html',
}
}
})
}])
Expanding on someone's comment, you can create a root state that is a parent to all of your other app's states (children to the root). The root state resolves all the user data and then you can inject the user data to any controller or store it in a service.
$stateProvider
.state('root', {
url: '',
abstract: true,
template: '', // some template with header, content, footer ui-views
resolve: {
// fetch user data
}
})
.state('root.login', {
url: '/login',
views: {
'header': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},
'content': {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
})
.state('root.main', {
url: '/main',
views: {
'content#': {
template: '',
controller: function($state, authService) {
if(!authService.isAuthenticated()) {
$state.go('login');
}
if(authService.isStudent()) {
$state.go('student');
}
if(authService.isAdmin()) {
$state.go('admin');
}
}
}
}
})
... // your other states
The key is that all of your app states must be a child of your root state i.e. root.<name> in your state declaration. This will ensure that no other controller starts until your user data is available. For more information on resolve and how to use it read here. Also, parent and child states.
Playing around with angular stateProvider, this is my route:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
On bootstrapping I would like to go to state 'test':
app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$state.go('test');
console.log('app.run');
}]);
These are the controllers:
app.controller('StartCtrl', function($scope) {
console.log('start');
});
app.controller('TestCtrl', function($scope) {
console.log('test');
});
Why is the application routing to the 'start' state ? I would like to go to the 'test' state?
Code reference:http://plnkr.co/edit/FCcL4M?p=preview
You need to change the url for either the test or the start "state", right now they are both the same. I changed the test state url to "/test" and it loaded correctly.
http://plnkr.co/edit/2esV4dbd4ptNSEmwD3g4?p=preview
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}
]);
Just need to add to previous answer : both start and test need to be corrected
to follow standards.
http://plnkr.co/edit/TjDzyL?p=preview
pp.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/start",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
Is it possible for me to define a state in UI router that acts as a child state for all other states or for a list of parent states?
I have a login state that opens a modal that then is used for logging in or signing up etc.
Currently, I've defined it as follows:
$stateProvider.state('index',{
url: '/',
templateUrl: '/static/partials/index.html',
controller: 'indexCtrl'
}).state('index.login',{
url:'login',
onEnter: ['$stateParams', '$state', '$modal', function($stateParams, $state, $modal) {
$modal.open({
windowClass: 'modal fade login-modal',
templateUrl: "/static/partials/modals/loginModal.html",
controller: 'loginCtrl'
}).result.finally(function() {
$state.go('^');
});
}]
});
What I'd like to do is have
$stateProvider.state('index',{
url: '/',
templateUrl: '/static/partials/index.html',
controller: 'indexCtrl'
}).state('login',{
url:'login',
parent: 'List of parent states here', //States that can be defined as parents
onEnter: ['$stateParams', '$state', '$modal', function($stateParams, $state, $modal) {
$modal.open({
windowClass: 'modal fade login-modal',
templateUrl: "/static/partials/modals/loginModal.html",
controller: 'loginCtrl'
}).result.finally(function() {
$state.go('^');
});
}]
});
If not, how can I use ui-router to achieve what I have in mind?
Not sure if I get the question right, but it looks to me like you want a single parent state (login) and multiple children states (login, signup, ...).
If this is the case, you can create you main state as abstract and then create the children..
$stateProvider
.state("loginDialog", {
url: "/login/",
templateUrl: "loginDialog.html",
abstract: true
})
.state("loginDialog.login", {
url: "", //default partial shown in loginDialog
templateUrl: "login.html"
})
.state("loginDialog.signup", { //another view shown instead of login
url: "^/login/signup/",
templateUrl: "signup.html"
});