AngularJS ngRoute 不工作

标签 angularjs ngroute

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 定义路由器和 Controller :

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 开发人员实际上并不理解他们在各处使用的一行语法。

最佳答案

请检查此代码 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

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

相关文章:

javascript - 使用 Angular 的原生 ngRoute(Angular-route.js v1.3.15) 嵌套 View ?

angularjs - 根据条件重定向到特定路线

javascript - Angularjs:错误:[ng:areq]参数 'myAppCtrl'不是函数,在将路由与ngRoute和$routeProvider一起使用时未定义

javascript - 使用 new Date() 比较和过滤当前日期中 MM/DD/YYYY 格式的数据,同时从用户输入值中减去 new Date()

javascript - HTML 按钮刷新页面而不是将数据发送到数据库

c# - 如何让 WebAPI 在不使用 C# 属性的情况下接受复杂对象作为 DELETE HTTP 动词的参数?

javascript - Angular Url Provider 和 mmenu 不能一起工作

javascript - 使用 IntelliJ IDEA for JavaScript 的最佳插件和项目?

angularjs - 将 $event 传递给 ng-click 但事件未定义

javascript - ngRoute 不工作