Angular JS页面开始时未正确加载

Question

This is my configuration for angularJS application.

sampleApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/Home");
    $stateProvider
    .state('Product', {
        templateUrl: "templates/Products.html",
        url: '/Product',
        controller: 'MainCtrl2 as pc'
    })

    .state('Login', {
        templateUrl: "templates/Login.html",
        url: "/Login",
        controller: 'loginCtrl'
    })
    .state('SignUp', {
        templateUrl: "templates/SignUp.html",
        url: "/SignUp",
        controller: 'SignUpController'
    })
    .state('Home', {
        templateUrl: "templates/Home.html",
        url: "/Home"
    })
    .state('Feedback', {
        templateUrl: "templates/Feedback.html",
        url: "/Feedback"
    })
    ;
});

Problem is when i am typing my domain name say example.com, i want it to get convert into http://example.com/#/Home , but sometimes (6 out of 10), example.com not changing to http://example.com/#/Home , so application is not loading properly.

Once i click on any of the link in unloaded application it starts working fine.

How to make sure every time page loads properly.

Answer 1

Rather then adding otherwise directly

 $urlRouterProvider.otherwise("/Home");

try using following route

 $urlRouterProvider
   .when('/', function ($state) {
       $state.go('Home');
   }).otherwise('/Home');

Answer 2

Here's what I believe will solve your issue: http://niclassahlin.com/2014/05/31/kickstarting-angular-ui-router/

app.run(['$state', function ($state) {}])

Essentially you need to kickstart the router when your app runs, ensuring the otherwise route is initialised. Not sure why your current app would sporadically route correctly without seeing the full code.