Question

我有一个AngularJS项目有两个视图; /settings和/。 app.js文件看起来像;

.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

  $routeProvider

  .when('/', {
      templateUrl: './views/bill.html',
      controller: 'BillCtrl'
  })

  .when('/settings', {
    templateUrl: './views/settings.html',
    controller: 'SettingsCtrl'
  })

  .otherwise({
      redirectTo: '/'
  });

  $locationProvider.html5Mode(true);

}]);

定义所有路线。

然后我app/views/bill.html＆amp; app/views/settings.html。

现在，grunt serve完美无缺，可以使用ngHref转到任何视图。问题是当我执行grunt build并且nginx指向构建目录（路径为/kds）时，我看到GET http://localhost/views/settings.html 404 (Not Found)

路径应该是相对的，因此它应该是GET http://localhost/kds/views/settings.html但事实并非如此。这是怎么回事？

这看起来更像是一个糟糕的服务器配置而不是其他任何东西。或者构建是否会让我感到烦恼？

服务器指令是;

location /kds { alias /Users/asheshambasta/code/kds/dist/; index index.html index.htm; }

编辑（完整app.js）

'use strict';

angular.module('kdsApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'apiService',
  'Lib',
  'ngTouch',
  'ipCookie'
  ])

.run(['$location', 'ipCookie', 'APICfg', function($location, ipCookie, APICfg) {
    var login = ipCookie('lgInf');
    if (!login || !login.usr || !login.pass || !login.srv) {
        $location.path('/settings');
    } else {
        APICfg.setSrv(login.srv);
        APICfg.setCId(login.cId);
    }
}])

.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

  $routeProvider

  .when('/', {
      templateUrl: '/views/bill.html',
      controller: 'BillCtrl'
  })

  .when('/settings', {
    templateUrl: '/views/settings.html',
    controller: 'SettingsCtrl'
  })

  .otherwise({
      redirectTo: '/'
  });

  $locationProvider.html5Mode(true);

}]);

应用程序所需的所有文件：

  <!-- build:js({.tmp,app}) scripts/scripts.js -->
  <script src="scripts/app.js"></script>
  <script src="scripts/apiservice.js"></script>
  <script src="scripts/lib.js"></script>
  <script src="scripts/class/bill.js"></script>
  <script src="scripts/class/item.js"></script>
  <script src="scripts/class/course.js"></script>
  <script src="scripts/controllers/main.js"></script>
  <script src="scripts/controllers/bill.js"></script>
  <script src="scripts/controllers/settings.js"></script>
  <!-- endbuild -->

Answer 1

您将网站放在您主持人的子文件夹下。

示例：

http://localhost/kds

因此，当您使用html5进行ng-route工作时，它会理解您需要移动到'/'，因为没有定义'/ kds'。

你可以做的一个技巧是使用<base href="/kds">

将此内容放入<head>

<html>
<head>
    <base href="/kds">
</head>
<body>
    ...
</body>

这将使您的所有路径或templatesUrls都以此基为前缀。

Answer 2

我最终需要的是动态设置基本href。此外，base href有一些陷阱：相对路径应该有尾随和前导\;并使用JavaScript您可以将其设置为：

  <script>
    document.write("<base href='" + document.location.pathname + "' />");
  </script>

ngRoute：Grunt构建后找不到404

2 个答案: