角路由不工作。答案

【问题标题】：Angular-Route is not working.角路由不工作。
【发布时间】：2016-07-03 00:00:18
【问题描述】：

我正在学习 angularJS。我正在尝试从教程视频中实现代码以使用 Route 在 html 页面上显示视图，但显然我被卡住了，尽管我做的与教程中显示的导师完全相同，但我有不知道为什么它不起作用，我已经在互联网上搜索但无效，请任何人指出我的错误。这是我的代码

Index.html

<html ng-app="App">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">

</head>
<body>
  <div ng-view></div>
     <script src="js/angular.js"></script>
     <script src="js/angularRoute.js"></script>
     <script src="App/Myapp.js"></script>
     <script src="App/CustomerController.js"></script>

</body>
</html>

App/MyApp.js

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

App.config(function($routeprovider)
          {
   $routeprovider
       .when('/',{
       controller:'CustomerController',
       templateUrl:'App/views/customers.html'
   })
   .otherwise({ redirectTo:'/'});

});

views/customers.html

  <div class="heading">
        <h1>Customers List</h1>
    </div>
    <div class="filterBox">
    Filter:<input type="text" ng-model="CustomerFilter.name"/>
    </div>
    <table>
        <th ng-click="sorter='CustomerID';reverse=!reverse">ID</th>
        <th ng-click="sorter='name';reverse=!reverse">Name</th>
        <th ng-click="sorter='city';reverse=!reverse">City</th>
        <th ng-click="sorter='total_orders';reverse=!reverse">Total          Orders</th>
         <th ng-click="sorter='date';reverse=!reverse">Date of last  Order</th>
    <tr ng-repeat="cust in customers   |filter:CustomerFilter|orderBy:sorter:reverse">
        <td>{{ cust.CustomerID }}</td>
        <td>{{ cust.name|uppercase }}</td>
        <td>{{ cust.city |lowercase}}</td>
        <td>{{ cust.total_orders|currency:'Rs' }}</td>
        <td>{{ cust.date|date:'longDate' }}</td>
        </tr>
    </table>
    <span> Total Customers:{{customers.length}}</span>

我有一个名为 CustomerController 的控制器，我没有在这里粘贴它，因为它太大而无法容纳。

【问题讨论】：

标签： javascript angularjs view routes ngroute

【解决方案1】：

错别字，别忘了把p写成大写

$routeProvider

【讨论】：

【解决方案2】：

我怀疑这是一个 URL 错误。只是因为如果您的 app.js 在 App 文件夹中，那么您的 URL 中不需要“App”，除非您有 app/app/views 文件夹布局。

在 app.js 中，你的 templateurl 应该只是 'views/customers.html'

您还可以检查您的 index.html。您的应用程序中有控制器吗？还是在脚本文件夹或类似文件夹中？

【讨论】：

我已经编辑了我的 url 多次但无效，我的控制器在 MyApp.js 所在的同一个文件中
是的，我的项目设置不同，导致我走错了路。顺便说一句，假设您的拼写错误是在“$routeprovider”上，那么这应该会在您的浏览器控制台中产生一条错误消息（例如“未知提供者：$routeprovider”），这会加快您的错误查找速度。发布您自己问题的答案，而不是不回答。

【解决方案3】：

1：好的，问题是你的 customer.html 页面中没有控制器，你需要告诉你关于控制器的部分视图。你可以简单地将你的整个页面包裹在 div 标签和控制器之间，如下所示。

<div controller="CustomerController>
// ur data of customer.html page goes here
</div>

2：最好像这样声明你的配置，当你缩小它时，你的应用程序不会有任何问题。

App.config(['$routeProvider', function($routeProvider)
{
     // routerProvider goes here
}]);

【讨论】：

如果我们必须在视图中引用控制器，那么为什么我们首先在路由中引用控制器？
请告诉我您在控制台中遇到的具体错误是什么？？
请告诉我你的控制器在哪里？我的意思是给我看代码
没关系，我终于找到了问题，这只是一个错字，我的错。