【问题标题】:ngRoute fails to load view defined by $routeProviderngRoute 无法加载 $routeProvider 定义的视图
【发布时间】:2014-09-09 01:43:46
【问题描述】:

我刚刚开始尝试将 ngRoute 集成到我正在构建的应用程序中,但无法让 ngRoute 正常工作。

我创建了一个简单的应用来描述我的尝试。

index.html:

<!DOCTYPE html>
<html ng-app="tester">

  <head>
    <meta charset="utf-8" />
    <title>ngRoute Test</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular-route.js"></script>
    <script src="app.js"></script>
  </head>

  <p>Here is a link to switch views:</p>
  <a href="/tests">Test</a>
  <div ng-view></div>

</html>

app.js

var app = angular.module('tester', ['ngRoute']).config(function($routeProvider) {
  $routeProvider
      .when('/tests', {
          templateUrl: 'tests.html',
          controller: 'TestCtrl'
      });
});


app.controller('TestCtrl', ['$scope', function($scope){
    $scope.title = "This is a Test Page";
}]);

tests.html

<p>{{ title }}</p>

这是一个显示我尝试的 plunkr:http://plnkr.co/edit/ntgV5xFTl46tBugEnCVe?p=preview。对此问题的任何帮助将不胜感激!

【问题讨论】:

标签: javascript angularjs ngroute angularjs-ng-route


【解决方案1】:

由于您没有启用 Html5 模式,因此您需要像这样创建指向视图的链接:

  <a href="#/tests">Test</a>

检查这个插件:http://plnkr.co/edit/Pn4rzbFSxcjyfeojJyF1?p=preview

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-26
    • 2015-06-27
    相关资源
    最近更新 更多