With the following code, I'm trying to create a page with the url /admin, that would lead you to /admin/devices after clicking a button and after clicking another button to /admin/devices/new. The first part works properly and I get redirected to /admin/devices. The second part not quite, since it changes the url to /admin/devices/new but it doesn't change the template.
To change through url's I use $state.go(admin.devices) and $state.go(admin.devices.new)
Any idea?
$stateProvider
.state('admin', {
url: '/users',
abstract: true
})
.state('admin.devices', {
url: '/devices',
template: require('../templates/admin/devices/index.html'),
controller: 'AdminDevicesCtrl',
controllerAs: 'ctrl'
})
.state('admin.devices.new', {
url: '/new',
template: require('../templates/admin/devices/new.html'),
controller: 'AdminDevicesNewCtrl',
controllerAs: 'ctrl'
});
Related
I have the following code for states:
.config(function ($stateProvider, $urlRouterProvider, CONSTANTS) {
$urlRouterProvider.otherwise('/cyo');
$stateProvider.state('pri', {
url: '/pri',
controller: 'priController',
templateUrl: CONSTANTS.PRI_TEMPLATES.PRI_TEMPLATE_URL,
redirectTo: 'pri.size'
}).state('rec', {
url: '/rec',
controller: 'recController',
controllerAs: 'recCtrl',
templateUrl: CONSTANTS.REC_TEMPLATES.REC_TEMPLATE_URL
})
});
The URL is being generated is http://adc.com/REC/1440/#
1440 being a ID that changes depending upon a prod Cat. the template is not loaded with this url. but as soon I add '/rec/' after the current url the template is loaded - http://adc.com/REC/1440/#/rec/ the page loads correctly
I am not able to understand how to get this fixed.
Ayush
You should define the state paramaters when you define the state.
Try this:
.state('rec', {
url: '/rec/:id',
params: {id: 'defaultValue'}, // optional
controller: 'recController',
controllerAs: 'recCtrl',
templateUrl: CONSTANTS.REC_TEMPLATES.REC_TEMPLATE_URL
})
And the html code:
<a ui-sref='rec({id: 123})'>Go to rec</a>
I'm new to ui-router and can't get layout.directory.teams or layout.directory.people to load their respective templates. I expect those templates to be loaded in the ui-viewon the layout state's template.
/dashboard works fine...the dashboard.html template is loaded in the ui-view in content.html template.
/directory/teams doesn't load the teams.html template.
/directory/people doesn't load the people.html template.
.state('layout', {
abstract: true,
templateUrl: "components/common/content.html"
})
.state('layout.dashboard', {
url: "/dashboard",
controller: 'DashboardCtrl',
controllerAs: 'dashboard',
templateUrl: "app/features/dashboard/views/dashboard.html",
})
.state('layout.directory', {
abstract: true,
url: "/directory"
})
.state('layout.directory.teams', {
url: "/teams",
controller: 'DirectoryCtrl',
controllerAs: 'directory',
templateUrl: "app/features/directory/views/teams.html",
})
.state('layout.directory.people', {
url: "/people",
controller: 'DirectoryCtrl',
controllerAs: 'directory',
templateUrl: "app/features/directory/views/people.html",
})
A child state renders its template in the template of its parent where ui-view directive is, even if the parent is abstract.
So, in your case, add ui-view to the template of layout.directory state:
.state('layout.directory', {
abstract: true,
url: "/directory",
template: "<div ui-view></div>"
})
I am trying to open the state 'profile.general' by default when I navigate to the parent state profile which loads the main template.
How do I activate the nested state for the ui-view when the /profile url is navigated to?
$urlRouterProvider.otherwise("/profile/general");
$stateProvider.state('profile', {
url: '/profile',
abtract: true,
views: {
"main": {
controller: 'ProfileCtrl',
templateUrl: 'src/app/profile/index.tpl.html'
}
}
}).state('profile.general', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-general.html'
//controller: 'ProfileCtrl'
}).state('profile.security', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-security.html'
}).state('profile.social', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-social.html'
}).state('profile.privacy', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-privacy.html'
}).state('profile.payments', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-payments.html'
}).state('profile.restrictions', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-restrictions.html'
});
})
HTML
<div id="profile-views" ui-view></div>
There is a working plunker
These lines should help:
$urlRouterProvider.when("/profile", "/profile/general");
$urlRouterProvider.otherwise("/profile/general");
And we should give url to the general sub state:
.state('profile.general', {
//url: '/register/details',
url: '/general',
templateUrl: 'src/app/profile/profile-general.html'
So, with these in place, we have .when redirection... which whenever user is targeting just the abstract state - does redirect to selected url.
Also, because we introduced the url for a child, we can use the .otherwise as the overall default state.
Other way how to do that, is to omit the url of one child (just exactly one child):
How to: Set up a default/index child state
Check it here
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'm using the UI router for Angular. I have two nested states using the same controller. When I go from state1 to state2 via ui-sref click, the controller is called and resetting all my variables. I want the controller to be called only once.
.state('GN.state1', {
url: '/createGNForm',
templateUrl: 'app/createGNForm/createGNForm.html',
controller: 'GNCtrl'
})
.state('GN.state2', {
url: '/newChapter/{chapterID}',
templateUrl: 'app/createGNForm/createNewChapter.html',
controller: 'GNCtrl'
})
Expanding on teleaziz's answer:
.state('GN', {
url: '/GN',
abstract: true,
template: '<div ui-view></div>',
controller: 'GNCtrl'
})
.state('GN.state1', {
url: '/createGNForm',
templateUrl: 'app/createGNForm/createGNForm.html',
})
.state('GN.state2', {
url: '/newChapter/{chapterID}',
templateUrl: 'app/createGNForm/createNewChapter.html'
})
Have an abstract parent state and nest all the states you want to use the same controller under it.