change angular state according to the URL parameter - angularjs

Question

Hi in my app I have two states called hello and createHello
Modules related to thees two states are given below.
createHello Module
(function(module){
'use strict';
module.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('createHello', {
url: '/hello/create',
templateUrl: 'app/createHello/createHello.html',
controller: 'createHello'
});
}
]);
})(angular.module('createHello', ['header', 'ui.router', 'timeliner','common']));
hello Module
(function (module) {
'use strict';
module.config(['$stateProvider',
function ($stateProvider) {
$stateProvider.state('hello', {
url: '/hello/{id}',
templateUrl: 'app/hello/hello.html',
controller: 'hello',
resolve: {
.....
}
});
}
]);
})(angular.module('hello', ['header', 'ui.router', 'helloTimer', 'logger', 'timeliner', 'common']));
Any url pattern of /hello/xxxx will go to the hello state. I want this specific url (/hello/create) to go to the createHellostate. At the moment it will also go to the hello state. Any advice on how to solve this issue?

Answer 1

In this case you should used nested states.
module.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('hello', {
url: '/hello',
abstract: true,
template: '<ui-view/>'
})
.state('hello.create', {
url: '/create',
templateUrl: 'app/createHello/createHello.html',
controller: 'createHello'
})
.state('hello.display', {
url: '/:id',
templateUrl: 'app/hello/hello.html',
controller: 'hello'
});
}
]);
Note that routing is done on "first match", so you will need to have your /hello/create route declared before the /hello/:id route.
You can read more on how nesting works here:
https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
In the example above I used an abstract parent state.