angularjs ngRoute不起作用答案

【问题标题】：angularjs ngRoute not workingangularjs ngRoute不起作用
【发布时间】：2014-12-10 07:24:45
【问题描述】：

ngRoute 不工作，但没有向控制台报告错误。

如果控制台没有错误，如何跟踪 ngRoute 程序的执行？

我看到了使用 $locationProvider.html5Mode(true) 的示例，我不明白什么时候应该使用它，但我认为它不需要让 ngRoute 工作。

index.html 有导航链接和 ngView ：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="bower_components/angular/angular.js"> </script>
  <script src="bower_components/angular-route/angular-route.js"> </script>
  <script src="main.js"> </script>
</head>

<body ng-app="Main">
<ul>
  <li> <a href="#content/first"> first partial </a> </li>
  <li> <a href="#content/second"> second partial </a> </li>
</ul>
<div ng-view></div>

</body>
</html>

main.js 定义了路由器和控制器：

var Main = angular.module('Main', ['ngRoute']);

function router($routeProvider) {

 var route = {templateUrl: 'partials/default.html'};
  $routeProvider.when('', route);

  route = {
    templateUrl: 'partials/first.html',
    controller: 'first'
  };
  $routeProvider.when('content/first', route);

  route = {
    templateUrl: 'partials/second.html',
    controller: 'second'
  };
  $routeProvider.when('content/second', route);
}

Main.config(['$routeProvider', router]);

Main.controller('first', function($scope) {
  $scope.list = [1,2,3,4,5];
});

Main.controller('second', function($scope) {
  $scope.list = [1,2,3];
});

partials 只是使用 ngRepeat：

<header> First content </header>
<p ng-repeat="iter in list">
  first
</p>

已解决：我的问题是我的整个应用程序位于 /ang/ 前缀下，并且在将该前缀添加到 url 之后，它现在正在工作。不应该有使用相对网址的方法吗？我想应该有，我会尝试修复它。

问题不在于每个人建议的不同语法，这令人震惊，许多 JS 开发人员实际上并不了解他们在任何地方使用的单行语法。

【问题讨论】：

<a href="#/content/first">这样检查
不，使用 #/content/first 没有成功。
我看不到您在 html 中调用控制器的位置...
不应该在 html 中调用控制器，因为它是使用 $routeProvider "when" 子句完成的。
你误用了$routeProvider，为什么不直接关注文档？

标签： angularjs ngroute

【解决方案1】：

请检查此代码 HTML 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
  <script src="script.js"> </script>
</head>

<body ng-app="Main">
<ul>
  <li> <a href="#/content/first"> first partial </a> </li>
  <li> <a href="#/content/second"> second partial </a> </li>
</ul>
<div ng-view></div>

</body>
</html>

js文件

var app = angular.module('Main', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
 $routeProvider.
      when('/content/first', {
        templateUrl: 'first.html', 
        controller: 'first'
      }).
      when('/content/second', {
        templateUrl: 'second.html',
        controller: 'second'
      }); 
}]); 

app.controller('first', function($scope) {
  $scope.list = [1,2,3,4,5];
});

app.controller('second', function($scope) {
  $scope.list = [1,2,3];
});

首页 HTML

<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>

这是你的工作代码click

【讨论】：

【解决方案2】：

不要重用路由对象，因为它可能会导致问题。考虑以下列形式使用它（如文档 https://docs.angularjs.org/api/ngRoute/service/$route#example 所建议的那样）：

$routeProvider
   .when('content/second', {
    templateUrl: 'partials/second.html',
    controller: 'second'
});

如果你想调试 angular 通过的路线，你可能想看看 angular 的拦截器：https://docs.angularjs.org/api/ng/service/$http#interceptors

另外，使 ngRoute 工作不需要$locationProvider.html5Mode(true)。它只是一种定义 URL 的外观和工作方式的方法。在 HTML 模式下，您可以将链接更改为不再使用 #，只需使用 www.yoursite.com/app/content/second 而不是 www.yoursite.com/app#content/second

【讨论】：

更改了代码，以便每个 when 子句使用不同的路由对象。我不同意 JS 开发人员如何编写单行代码，我认为这是不好的做法。

【解决方案3】：

您的路由配置不正确，您假设 route 函数对您单击的每个链接都执行，但事实并非如此。

所以你的route 函数应该是这样的

  function router($routeProvider) {

      $routeProvider.
      when('/content/first', {
        templateUrl: 'partials/first.html',
        controller: 'first'
      }).
      when('/content/second', {
        templateUrl: 'partials/second.html',
        controller: 'second'
      }).
      otherwise({
        templateUrl: 'partials/default.html'
      });
  }

注意url应该像<a href="#/content/first"> //注意#后面的斜线

为了匹配 route 函数中的路由应该像 when('/content/first', { 一样注意前导斜杠

这是工作的Plunker

【讨论】：

这不是我刚刚写的副本吗？
大声笑，不，你有router功能吗，检查otherwise route检查when URL
@Kutyel：我可以问你同样的问题 :)
我正在查看您的 Plunker 示例以发现我的问题，但不同的语法不应该只影响我的版本具有更好的代码可读性。
因为一行嵌套对象的JS方法使得代码块难以跟随。嵌套括号会使人感到困惑。

【解决方案4】：

在 routes.js

中定义您的路线

var route = angular.module('route', ['ngRoute']);

route.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/home.html",
            controller : 'homeCtrl'
        })
        .when("/home", {
            templateUrl: "views/home.html",
            controller : 'homeCtrl'
        })
        .when("/product", {
            templateUrl: "views/product-info.html"
        })
        .otherwise({redirectTo :'/'});
});

将路由器连接到您的主模块。

angular.module('myApp', ['route']);

在您的 index.html

中导入这两个脚本

【讨论】：