angularjs - Angular 不响应 ui-router 的任何路由 - 当我输入时 URL 就消失了

Question

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

问题是该页面几乎是空白的 - 除了标题。但是应该去哪里的部分 <div ui-view></div>是，不显示任何内容。

更糟糕的是，当我访问某个地址时，例如

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

浏览器只是将其更改为

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

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

我的 Angular 应用程序，在 index.js看起来像这样:

一些.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);

所以，起始网址很可能是......

EXTEND:如评论中所述，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