Angular-路线不工作。

Question

我正在学习 angularJS.i 正在尝试实现教程视频中的代码以使用路由在 html 页面上显示视图，但显然我被卡住了，尽管我和导师做的完全一样在教程中显示，但我不知道为什么它不起作用，我在互联网上搜索但无济于事，请任何人指出我的 mistake.here 是我的代码

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 的控制器，我没有将其粘贴到此处，因为它太大而不适合。

Answer 1

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

在 app.js 中，您的模板网址应为 'views/customers.html'

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

Answer 2

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
}]);

Answer 3

错别字，别忘了大写p

$routeProvider

Angular-路线不工作。

Angular-Route is not working.

javascript

routes

view

angularjs

ngroute