AngularJS:ngRoute 不工作

标签 angularjs ngroute

我想让这个简单的路由工作,但无法弄清楚问题出在哪里。

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

有任何想法吗?

最佳答案

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

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为真
$locationProvider.html5Mode(true);

并在 html 头中的 html set base 中:
<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('');
}]);

关于AngularJS:ngRoute 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41655534/

相关文章:

javascript - 为什么我们在将函数传递给指令时需要指定括号?

angularjs - Angular ng 重复错误 "Duplicates in a repeater are not allowed."

javascript - Angular 链接的问题

javascript - 如何设置 Angular 路线参数的可接受值?

javascript - Angular Controller 未使用 OcLazyLoad 和 ngRoute 加载

javascript - 为什么在路由器解析完成之前, Angular 会解析模板?

c# - Angular 模板和 .NET 部分回发

javascript - Angular 1.5无法读取未定义的属性切片和过滤器

angularjs - 当所有值都等于零时,Nvd3 Multibarchart forceY 选项不起作用

javascript - Angular js - 检查当前 url 是否与路由匹配(使用动态 url 参数)