Question

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

project structure eclipse][1

控制器完美地调用index.html：

controller

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]：

Answer 1

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

实施例

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

Answer 2

/new

试试这个。您可以使用// Parses an Excel Date ("serial") into a // corresponding javascript Date in UTC+0 timezone. // // Doesn't account for leap seconds. // Therefore is not 100% correct. // But will do, I guess, since we're // not doing rocket science here. // // https://www.pcworld.com/article/3063622/software/mastering-excel-date-time-serial-numbers-networkdays-datevalue-and-more.html // "If you need to calculate dates in your spreadsheets, // Excel uses its own unique system, which it calls Serial Numbers". // lib.parseExcelDate = function (excelSerialDate) { // "Excel serial date" is just // the count of days since `01/01/1900` // (seems that it may be even fractional). // // The count of days elapsed // since `01/01/1900` (Excel epoch) // till `01/01/1970` (Unix epoch). // Accounts for leap years // (19 of them, yielding 19 extra days). const daysBeforeUnixEpoch = 70 * 365 + 19; // An hour, approximately, because a minute // may be longer than 60 seconds, see "leap seconds". const hour = 60 * 60 * 1000; // "In the 1900 system, the serial number 1 represents January 1, 1900, 12:00:00 a.m. // while the number 0 represents the fictitious date January 0, 1900". // These extra 12 hours are a hack to make things // a little bit less weird when rendering parsed dates. // E.g. if a date `Jan 1st, 2017` gets parsed as // `Jan 1st, 2017, 00:00 UTC` then when displayed in the US // it would show up as `Dec 31st, 2016, 19:00 UTC-05` (Austin, Texas). // That would be weird for a website user. // Therefore this extra 12-hour padding is added // to compensate for the most weird cases like this // (doesn't solve all of them, but most of them). // And if you ask what about -12/+12 border then // the answer is people there are already accustomed // to the weird time behaviour when their neighbours // may have completely different date than they do. // // `Math.round()` rounds all time fractions // smaller than a millisecond (e.g. nanoseconds) // but it's unlikely that an Excel serial date // is gonna contain even seconds. // return new Date(Math.round((excelSerialDate - daysBeforeUnixEpoch) * 24 * hour) + 12 * hour); };从html页面导航

Answer 3

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

Answer 4

以下是我解决此问题的方法：

<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'
    })

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

4 个答案: