AngularJS:ngRoute不工作

问题描述 投票:3回答:3

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

这是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,事件被触发,但视图未加载。

有任何想法吗?

angularjs ngroute
3个回答
18
投票

这是正确的,因为您正在使用角度1.6并且已更改默认的哈希前缀:

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

如果您确实不想使用hash-prefix,则可以通过向应用程序添加配置块来恢复以前的行为:

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

所以你有一些选择:

1.将HTML5mode设置为true

Source

并在html中设置基本的html标题:

$locationProvider.html5Mode(true);

最后将<base href="/"> 改为

<a ng-href="#voip">

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

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

<a ng-href="#!voip">

2
投票

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

例如,而不是href =“#home”.....写href =“#!home”。经过4个小时的头部划伤,它对我有用。


0
投票

5我弄清楚为什么它没有提前工作

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

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);
© www.soinside.com 2019 - 2024. All rights reserved.