0

我有一个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& app/views/settings.html。

现在，grunt serve在我可以使用ngHref. 问题是当我这样做grunt build并nginx指向构建目录（路径是/kds）时，我看到一个GET http://localhost/views/settings.html 404 (Not Found)

路径应该是相对的，因此它应该是 aGET 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 -->
4

2 回答 2

0

您将网站放置在您主机的子文件夹下。

例子：

http://localhost/kds

因此，当您使 ng-route 与 html5 一起工作时，它会明白您需要移至“/”，因为没有定义“/kds”。

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

把这个放在你的<head>

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

这将使您的所有路由或模板Urls 都以此为前缀。

于 2014-06-02T16:04:23.407 回答
0

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

  <script>
    document.write("<base href='" + document.location.pathname + "' />");
  </script>
于 2014-06-03T13:10:00.523 回答