无法使用 AngularJS routeProvider 重定向到某些页面答案

【问题标题】：Unable to redirect to some pages using AngularJS routeProvider无法使用 AngularJS routeProvider 重定向到某些页面
【发布时间】：2018-02-16 04:58:39
【问题描述】：

我正在尝试编写基于 Angularjs 的 Spring Boot 应用程序。我的项目结构如下：

控制器完美调用index.html：

app.js：

var app = angular.module('app', ['ngRoute','ngResource']);
app.config(function($routeProvider){
    $routeProvider
        .when('/users',{
            templateUrl: 'views/users.html',
            controller: 'usersController'
        })
        .when('/roles',{
            templateUrl: 'views/roles.html',
            controller: 'rolesController'
        })
        .otherwise(
            { redirectTo: '/'}
        );
});

我在运行应用程序时获得了第一页，但是当我单击用户和角色链接时，什么也没有发生。

更新： index.html 是：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Spring boot and Angularjs Tutorial</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
<h2>Administrator Panel</h2>
<div class="home-section">
    <ul class="menu-list">
        <li><a href="#/users">Users</a></li>
        <li><a href="#/roles">Roles</a></li>
    </ul>
</div>
<div ng-view></div>
<script src="/lib/angular.js"></script>
<script src="/lib/angular-resource.js"></script>
<script src="/lib/angular-route.js"></script>

<script src="/js/app.js"></script>
<script src="/js/controller.js"></script>



<link href="/css/bootstrap.css" rel="stylesheet" />
</body>
</html>

我该如何解决这个问题。

[1]：

【问题讨论】：

你能发布你的html链接吗？
我用 index.html 更新了我的问题
你的角度版本是多少？
我使用的是 1.6.6 版
像这样改变你的href
用户

【解决方案1】：

这是我解决此问题的方法：

<div class="list-group">
                        <a href="#home" class="list-group-item"
                            ng-class="{active: currentNavLink == '/home'}"> <i
                            class="fa fa-home fa-lg"></i>&nbsp;Home
                        </a> <a href="#contacts" class="list-group-item"
                            ng-class="{active: currentNavLink == '/contacts'}"> <i
                            class="fa fa-user fa-lg"></i>&nbsp;Contacts
                        </a> <a href="#todos" class="list-group-item"
                            ng-class="{active: currentNavLink == '/todos'}"> <i
                            class="fa fa-indent fa-lg"></i>&nbsp;ToDos
                        </a>


                    </div>

在 app.js 中的位置：

myApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.when('', '/home');
    $urlRouterProvider.otherwise('/home');
    /*
    $urlRouterProvider.rule(function($injector, $location) {
      return '/home';
    });
    */
    $stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    })
    .state('contacts', {
        url: '/contacts',
        templateUrl: 'templates/contacts.html',
        controller: 'ContactController'
    })  
    .state('todos', {
        url: '/todos',
        templateUrl: 'templates/todos.html',
        controller: 'TodoController'
    })

【讨论】：

【解决方案2】：

您是否在模板开头声明了 ng-app="app"？

【讨论】：

是的，这里是在 index.html 中：
似乎您缺少整个应用程序的“主控制器”。试试这个： ngRoute 在应用范围内运行良好。因此，您需要一个主控制器来处理整个应用程序。

【解决方案3】：

<ul class="menu-list">
    <li><a ui-sref="users">Users</a></li>
    <li><a ui-sref="roles">Roles</a></li>
</ul>

试试这个。您可以使用ui-sref 从 html 页面导航

【讨论】：

似乎链接是标签，我无法点击它们。
你在 index.html 中没有提到 ng-app 和 ng-controller
没有 html 标签： ng-controller 在 app.js 中定义
在 index.html 中提供 <body data-ng-app="myApp" data-ng-controller="myCtrl"> 这将被视为整个应用程序的根控制器。看来您在谈论嵌套控制器
在 index.html 中定义 ng-controller 而不是在 app.js 中

【解决方案4】：

对于 AngularJS 中的链接，您应该使用 ng-href 指令：https://docs.angularjs.org/api/ng/directive/ngHref

例如

<a ng-href="#/users">Users</a>

【讨论】：

我试过了，它带有一个非链接的网址，但作为一个标签。