I am currently trying to replace ngRoute with ui-router in order to utilize multiple views.
Within my template file, I have the following code: <div ui-view></div>
In my application file, I have the following configuration:
angular.module('myApp', [
'ui.router',
//'signup',
'myApp.controllers',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise({
redirectTo: '/'
});
$stateProvider.
state('/', {
url: '/',
templateUrl: '/partials/homepage',
controller: 'MyCtrl1'
}).
state('about.detail', {
url: '/about/:id',
templateUrl: function(params){
return '/partials/about/'+params.id
},
controller: 'MyCtrl1'
}).
state('funnel', {
url: '/funnel',
templateUrl: '/partials/funnel',
controller: 'MyCtrl2'
});
$locationProvider.html5Mode(true);
});
For some unknown reason, these routes fail to be recognized when accessed directly (e.g., /funnel).
I'm not sure if I have set up the routing correctly for it to work when I visit localhost:3000/funnel. Can anyone confirm?