Angular 不响应任何带有 ui-路由器的路由 - 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);

所以，开始url很可能是...

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

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

作为我们应用程序的开始 url。在#符号

之后管理任何路由

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

检查一下here

Angular 不响应任何带有 ui-路由器的路由 - URL 在我输入时就消失了

Angular not responding to any routes with ui-router - URL just disappears when I enter

routing

node.js

express

angularjs

angular-ui-router