AngularJS：ngRoute 不工作答案

【问题标题】：AngularJS: ngRoute Not WorkingAngularJS：ngRoute 不工作
【发布时间】：2017-05-30 01:27:11
【问题描述】：

我想让这个简单的路由正常工作，但不知道是什么问题。

这是 HTML：

<html lang="en" ng-app="app">
     .
     .
     .  
     <a href="#voip">
       <div class="col-lg-3 service">
        <img src="assets/img/voip.svg"/>
        <h4 ng-bind-html="content.home.voip_header"></h4>
        <p ng-bind-html="content.home.voip_txt"></p>
      </div>
    </a>

    <section id="view">
      <div ng-view></div>
    </section>

这是路由：

var app = angular.module('app',[
  'ngRoute',
  'ngSanitize'
]);
    app.config(['$routeProvider',function($routeProvider){
      $routeProvider
      .when('/voip',{
        templateUrl:'assets/templates/voip.html'
      });
    }]);

如果我如下指定“否则”，则会加载模板。我想也许我在我的 href 属性中使用了错误的语法，但我到处看了看，似乎应该是这样。

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

另一件事是，如果我收听$routeChangeSuccess，则触发事件，但未加载视图。

有什么想法吗？

【问题讨论】：

您使用的是哪个版本的 Angular？
您是从服务器而不是浏览器中的file/open 加载此页面吗？
Angular 版本是 1.6.1。是的，页面是从服务器加载的，目前这是一个没有配置更改的本地 apache，仅用于提供文件。
我只想声明您显示的代码在提供的问题上下文中没有错误。

标签： angularjs ngroute

【解决方案1】：

这是正确的，因为您使用的是 angular 1.6，并且默认哈希前缀发生了更改：

由于 aa077e8，用于 $location hash-bang 的默认哈希前缀 URL 已从空字符串 ('') 更改为 bang ('!')。如果你的应用程序不使用 HTML5 模式或在浏览器上运行不支持 HTML5 模式，并且你没有指定你自己的 hash-prefix 那么客户端 URL 现在将包含一个 !字首。为了例如，URL 将变为而不是 mydomain.com/#/a/b/c mydomain.com/#!/a/b/c.

如果你真的不想有哈希前缀，那么你可以恢复通过向您的应用程序添加配置块来实现之前的行为：

appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); }]); Source

所以你有一些选择：

1.设置 HTML5mode 为真

$locationProvider.html5Mode(true);

并在 html 中设置基在 html 标头中：

<base href="/">

最后把<a ng-href="#voip">改成

<a ng-href="voip">

2。使用1.6方式
更改
<a ng-href="#voip">
致
<a ng-href="#!voip">

3.从 1.5 返回旧行为 - 手动设置哈希前缀

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

【讨论】：

那么the example in the docs for $route 坏了吗？它似乎使用选项 1，但从不设置基本标签。仅仅通过查看这些文档，人们将如何找出这些选项中的任何一个？当文档中的示例没有正确完成时，这令人沮丧......我选择了选项 2，它似乎对我有用。谢谢！

【解决方案2】：

在 html5 + ajs 1.6 中尝试使用感叹号。

例如，而不是 href="#home"..... 写 href="#!home"。经过 4 个小时的挠头，它对我有用。

【讨论】：

【解决方案3】：

5 我发现它为什么不早点工作

我错过了在 index.html 中包含以下内容

 <div ng-view></div>

【讨论】：