0

I have defined states using the ui-router like this:

(function() {
    'use strict';
    angular.module('test.app').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider.state('home', {
            url: '/',
            templateUrl: 'home/home.html',
            controller: 'HomeController',
            controllerAs: 'home'
        }).state('about', {
            url: '/about',
            templateUrl: 'about/about.html',
            controller: 'AboutController',
            controllerAs: 'about'
        });

        $urlRouterProvider.otherwise('/');

        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    }])
    .run(['$rootScope', '$templateCache', function($rootScope, $templateCache) {
        $rootScope.$on('$stateChangeStart', function(event, next, current) {
            if (typeof(current) !== 'undefined'){
                $templateCache.remove(current.templateUrl);
            }
        });
    }]);
})();

I have injected ui.router in my app module.

angular.module('test.app', [..., 'ui.router'...]

home.html:

<div data-ui-view>
    <h1>I am home!</h1>
</div>

about.html:

<div data-ui-view>
    <h1>I am about!</h1>
</div>

I am using browser-sync to host it on a local server:

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: "./src"
        },
        port: 8080
    })
});

I am facing a strange problem here. The default route '/' works perfectly and loads home.html but when i try to access '/about' I get the message Cannot GET /about in the browser. There are no errors in the console.

I tried this this and a few more threads but no good! Where did I go wrong?

Community
  • 1
  • 1
kds23
  • 296
  • 3
  • 17
  • How're you trying to access `/about`, by typing the URL directly in the browser, or by `ui-sref` or `$state.go`? – 31piy Feb 28 '17 at 10:55
  • @31piy I am typing it directly in the browser like `http://localhost:8080/about` – kds23 Feb 28 '17 at 10:57
  • Are you using any server e.g. Node? – 31piy Feb 28 '17 at 10:58
  • @31piy Yes, I am using node – kds23 Feb 28 '17 at 11:00
  • In that case, please post your JS files related to Node configuration as well. – 31piy Feb 28 '17 at 11:01
  • Sorry for the confusion! Actually I am running it using a Gulp configuration utilizing `browser-sync` as mentioned above. – kds23 Feb 28 '17 at 11:04
  • When you hit this URL by browser, this request first goes to the server, and then comes to the browser. ui-router can only work on the browser. Please ensure the `/about` is being routed to appropriate view. – 31piy Feb 28 '17 at 11:07
  • @31piy Okay! Could you be more specific? Seems like the view is appropriate. The same about.html works if put in the default `'/'` route. But any route other than `'/'` is not working. – kds23 Feb 28 '17 at 11:11

0 Answers0