Angular 1 Base href 和路由/视图/控制器答案

【问题标题】：Angular 1 Base href and routing/views/controllersAngular 1 Base href 和路由/视图/控制器
【发布时间】：2017-07-20 18:16:46
【问题描述】：

我希望为我的 web 应用添加一个基本的 href。目前运行时一切正常：

localhost:3000/#/登录

但我需要添加基本 href 或“charge” -> localhost:3000/charge/#/login

当前 index.html

<head>
<base href="charge/" />
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" .... 
</head>

角线文件

function routerConfig($routeProvider, $locationProvider) {
$routeProvider
  .when('/map', {
    templateUrl: 'app/views/main/main.html',
    controller: 'MainController',
    controllerAs: 'mainCtrl'
  })
  .when('/login', {
    templateUrl: 'app/views/login/login.html',
    controller: 'LoginController',
    controllerAs: 'loginCtrl'
  })
  .when('/list', {
    templateUrl: 'app/views/list/list.html',
    controller: 'ListController',
    controllerAs: 'listCtrl'
  })
  .when('/reporting', {
    templateUrl: 'app/views/reporting/reporting.html',
    controller: 'ReportingController',
    controllerAs: 'reportingCtrl'
  })
  .otherwise({
    redirectTo: '/map'
  });
// $locationProvider.html5Mode(true);
}

每当我使用 basehref 运行我的应用程序并导航到 localhost:3000/charge/#/login 时，基本上每个视图、控制器、Bower 组件和模块都找不到。我尝试编辑路由器，更改主应用程序文件夹的名称，但无法使其正常工作。我知道我错过了一些小东西，所以非常感谢任何帮助！

我的问题似乎与Base Href and Angular Routing and Views 非常相似，但老实说我无法弄清楚。

【问题讨论】：

标签： javascript angularjs angular-routing

【解决方案1】：

如果您使用的是 Chrome 并查看开发者控制台，请查看它找不到的资源的 URL：

http://localhost:8080/charge/app.js

它正在查看项目的根目录，然后是一个名为charge的文件夹，然后是资源。

HTML 元素指定用于所有相关的基本 URL 文档中包含的 URL。只能有一个元素在一个文件中。 - MDN

您能告诉我们您的目录结构在这里是什么样的吗？如果您的项目文件直接在根目录下，请尝试创建一个名为“charge”的子文件夹并将所有文件放入其中。

示例： root > charge > 项目文件

有用链接：AngularJS: Changing App Path, and the Element

【讨论】：

【解决方案2】：

尝试在所有源网址前添加“/”。这将从项目的根目录开始每个路径，而不是从基本 href 开始。

例如templateUrl: '/app/views/main/main.html'

【讨论】：