Question

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开发人员实际上并不了解他们在任何地方使用的单行语法。

Answer 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

Answer 2

不要重复使用路由对象，因为它可能会导致问题。考虑在表单中使用它（如文档https://docs.angularjs.org/api/ngRoute/service/$route#example所示）：

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

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

此外，不需要$locationProvider.html5Mode(true)来使ngRoute工作。它只是一种定义URL应该如何工作的方式。在HTML模式下，您可以将链接更改为不再使用＃，只需www.yoursite.com/app/content/second代替www.yoursite.com/app#content/second

Answer 3

您的路由配置不正确，您假设{@ 1}}函数是针对您点击的每个链接执行的，但不是。

所以您的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' }); } //注意＃

之后的斜杠

匹配<a href="#/content/first">函数中的路由应该像route一样注意前导斜杠

这是工作Plunker

Answer 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

中的两个脚本

angularjs ngRoute不工作

4 个答案: