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

Posted 2023-03-07

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

【英文标题】：Angular not responding to any routes with ui-router - URL just disappears when I enter

【发布时间】：2015-08-19 21:55:35

【问题描述】：

我正在使用 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;
                ]
            ,
        );
    
    ]);

【参考方案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

【讨论】：

它说它不能 GET http://localhost:7070/#/admin/rounds，这是有道理的，因为我的 Express 应用程序为 /admin 路径的应用程序提供服务

好吧..这是代表虚拟应用程序的 /admin 部分。不是问题。只需使用两次

如果可行，那就太好了；) 享受强大的 UI-Router ;)