Angular 没有使用 ui-router 响应任何路由 - 当我输入时 URL 就会消失

Question

我正在使用 NodeJS+Express 来提供带有 Angular 应用程序的 HTML 页面。加载时似乎工作正常。没有错误。

问题是该页面几乎是空白的 - 除了标题。但是应该去<div ui-view></div> 所在位置的部分没有显示任何内容。

更糟糕的是，当我去一个地址时，比如

http://localhost:7070/admin/#/rounds

浏览器只是将其更改为

http://localhost:7070/admin/#/

然后回到不显示任何内容。

我在index.js 中的 Angular 应用看起来像这样：

一些.run() 和.config() 设置

app.run(['$rootScope', '$state', '$stateParams',
    function ($rootScope,   $state,   $stateParams) {
        // It's  very handy to add references to $state and $stateParams to the $rootScope
        // so that you can access them from any scope within your applications.For example,
        // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
        // to active whenever 'contacts.list' or one of its decendents is active.
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }
    ]);

app.config(["$locationProvider", function($locationProvider) {
    //$locationProvider.html5Mode(true);
}]);

状态定义：

app.config(
    ['$stateProvider', '$urlRouterProvider',
    function ($stateProvider,   $urlRouterProvider) {
        console.log("Is this running at all?");
        $urlRouterProvider.otherwise('/');

        $stateProvider
        .state("admin", {
            abstract: true,
            url: '/admin',
            template: '<ui-view />'
        })
        .state("admin.login", {
            url: '/login',
            templateUrl: 'login.html',
            controller: 'userLoginCtrl'
        })
        /* DASHBOARD */
        .state("admin.dashboard", {
            url: "",
            controller: 'dashboardAppCtrl',
            templateUrl: "dashboard.html"
        })
        .state("admin.subjects", {
            url: "/subjects",
            controller: 'subjectsCtrl',
            templateUrl: "subjects.html"
        })
        /* ROUNDS */
        .state("admin.rounds", {
            url: "/rounds",
            controller: 'roundsAppCtrl',
            templateUrl: "rounds.html",
            resolve: {
                gameId: ['$stateParams', function($stateParams){
                    console.log("gameId ");
                    return $stateParams.gameId;
                }]
            }
        })
        .state("admin.round", {
            url: "/round/:roundId",
            controller: 'adminRoundCtrl',
            templateUrl: "adminround.html",
            resolve:{
                gameId: ['$stateParams', function($stateParams){
                    return $stateParams.gameId;
                }],
                roundId: ['$stateParams', function($stateParams){
                    return $stateParams.roundId;
                }]
            },
        });
    }
    ]);

Answer 1

有a working plunker

答案比较简单

$urlRouterProvider.otherwise('/admin');

而不是这个

http://localhost:7070/admin/#/rounds

我们必须试试这个

http://localhost:7070/admin/#/admin/rounds

关键是，每个子状态 'admin.xxx' 都是 'admin' 状态的子状态。这意味着，它继承了它的 url: '/admin'

另外，我们使用了

//$locationProvider.html5Mode(true);

所以，startingurl 很可能是 ...

EXTEND：如 cmets 中所述，IIS Express 与虚拟应用程序一起使用 /admin，因此这部分将在 url 中出现两次 /admin/#/admin...

http://localhost:7070/admin/index.html
// i.e. 
http://localhost:7070/admin/

作为我们应用的起始网址。稍后在 # 符号

之后管理任何路由

http://localhost:7070/admin/#/admin/round/22

查看here