角度模块路由不起作用答案

【问题标题】：Angular Module Routing not working角度模块路由不起作用
【发布时间】：2018-06-07 09:48:27
【问题描述】：

这是我的代码： app.js

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

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "views/groceryList.html"
      controller: "GroceryListItemsController"
    })
});

app.controller("HomeController", ["$scope", function($scope) {
  $scope.appTitle = "Grocery List";
}]);

app.controller("GroceryListItemsController", ["$scope", function($scope) {
  $scope.groceryItems = [{
      completed: true,
      itemName: 'milk',
      date: '2017-10-01'
    },
    {
      completed: true,
      itemName: 'cookies',
      date: '2017-10-02'
    },
    {
      completed: true,
      itemName: 'ice cream',
      date: '2017-10-03'
    },
    {
      completed: true,
      itemName: 'potatoes',
      date: '2017-10-04'
    },
    {
      completed: true,
      itemName: 'cereal',
      date: '2017-10-05'
    },
    {
      completed: true,
      itemName: 'bread',
      date: '2017-10-06'
    },
    {
      completed: true,
      itemName: 'eggs',
      date: '2017-10-07'
    },
    {
      completed: true,
      itemName: 'tortillas',
      date: '2017-10-08'
    }
  ]
}]);

而 index.html 是

<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>

  <link href="css/bootstrap.min.css" rel="stylesheet">

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


</head>

<body ng-controller="HomeController">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <span class="glyphicon glyphicon-apple" style="color: #5bdb46">
    				</span> {{appTitle}}
        </a>
      </div>
    </div>
  </nav>

  <div class="container" ng-view>

  </div>

  <script src="lib/jquery-3.2.1.min.js"></script>
  <script src="lib/angular-route.min.js"></script>
  <script src="lib/bootstrap.min.js"></script>
  <script src="lib/angular.min.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

groceryList.html 是

<div class="col-xs-12">
  <a href="#/addItem" style="margin-bottom: 10px" class="btn btn-primary btn-lg btn-block">
    <span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
  <ul class="list-group">
    <li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
      <span style="font-weight: bold">{{item.itemName | uppercase}}</span>
    </li>
  </ul>
</div>

在 chrome 中运行 index.html 时，输出为 {{appTitle}}。我认为ngRoute 在这里没有被识别。请帮忙。

所有的 lib 文件也都正确就位。

购物清单应该是可见的。它在没有路由机制的情况下工作

谢谢

【问题讨论】：

标签： angularjs module routing

【解决方案1】：

更改您的订单 angular.min.js 应该在 lib/angular-route.min.js

之前加载

<script src="lib/angular.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>

【讨论】：

我还能做什么？
你也缺少 ng-view
不，视图是正确的，但没有显示项目

【解决方案2】：

问题肯定出在脚本的顺序上。所以这就是我所做的。

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

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "../views/groceryList.html",
      controller: "GroceryListItemsController"
    })
});

app.controller("HomeController", ["$scope", function($scope) {
  $scope.appTitle = "Grocery List";
}]);

app.controller("GroceryListItemsController", ["$scope", function($scope) {
  $scope.groceryItems = [{
      completed: true,
      itemName: 'milk',
      date: '2017-10-01'
    },
    {
      completed: true,
      itemName: 'cookies',
      date: '2017-10-02'
    },
    {
      completed: true,
      itemName: 'ice cream',
      date: '2017-10-03'
    },
    {
      completed: true,
      itemName: 'potatoes',
      date: '2017-10-04'
    },
    {
      completed: true,
      itemName: 'cereal',
      date: '2017-10-05'
    },
    {
      completed: true,
      itemName: 'bread',
      date: '2017-10-06'
    },
    {
      completed: true,
      itemName: 'eggs',
      date: '2017-10-07'
    },
    {
      completed: true,
      itemName: 'tortillas',
      date: '2017-10-08'
    }
  ]
}]);

<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


</head>

<body ng-controller="HomeController">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <span class="glyphicon glyphicon-apple" style="color: #5bdb46">
    	  </span> {{appTitle}}
        </a>
      </div>
    </div>
  </nav>

  <div class="container" ng-view>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
  <script src="./js/app.js"></script>
</body>

</html>

groceryList.html

<div class="col-xs-12">
  <a href="#/addItem" style="margin-bottom: 10px" class="btn btn-primary btn-lg btn-block">
    <span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
  <ul class="list-group">
    <li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
      <span style="font-weight: bold">{{item.itemName | uppercase}}</span>
    </li>
  </ul>
</div>

由于我没有大部分代码，我只是根据您提供的代码创建了这个最小的项目，并使用 this Web Server 提供服务

它在我的最后工作：

我确实使用了相对路径而不是绝对路径。

希望这会有所帮助。

【讨论】：

它有部分帮助。
在下面添加项目

保存

取消
点击添加杂货商品后，页面未重定向
但是在您提出的问题中，您并没有真正提供这方面的意见，是吗？我们不确定当这个/addItem 路由要加载时哪个控制器会被激活。
是的，所有代码都在这里stackoverflow.com/questions/47988207/…。谢谢！

在下面添加项目