AngularJS：ngRoute 不工作

Question

我正试图让这个简单的路由正常工作，但无法弄清楚问题是什么。

这是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'
      });
    }]);

如果我如下指定 'otherwise'，则加载模板。我想也许我在我的 href 属性中使用了错误的语法，但我到处看了看，看起来应该是这样。

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

另一件事是，如果我听 $routeChangeSuccess，事件被触发，但视图没有加载。

有什么想法吗？

Answer 1

这是正确的，因为您使用的是 angular 1.6，并且默认设置已更改 hash-prefix:

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c.

If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to you application:

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

所以你有一些选择：

1.设置 HTML5mode true

$locationProvider.html5Mode(true);

并在 html 中设置基数 html header:

<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('');
}]);

Answer 2

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

例如，将 href="#home" 写成 href="#!home"。经过 4 小时的挠头，它对我有用。

Answer 3

5 我弄清楚了为什么它不能更早地工作

我错过了在 index.html

中包含以下内容

 <div ng-view></div>

AngularJS：ngRoute 不工作

AngularJS: ngRoute Not Working

angularjs

ngroute