Question

我正在学习angularJS.i正在尝试从教程视频中实现代码，使用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>

应用/ MyApp.js

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

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

});

视图/ 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的控制器，我没有粘贴在这里因为beacuase它太大而不适合。

Answer 1

错字，别忘了在首都写下p

$routeProvider

Answer 2

我怀疑它是一个网址错误。只是因为如果你的app.js在App文件夹中，那么你就不需要拥有＆＃34; App＆＃34;在您的网址中，除非您有app / app / views文件夹布局。

在app.js中，您的模板应该是＆views; customers.html＆＃39;

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

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

Answer 4

因此错误是$ routeprovider上的myApp.js中的错误，它在控制台上生成的错误是＆＃34;未知提供者：$ routeprovider＆＃34;。更正版本是$ routeProvider，不要忘记首都P人。

Angular-Route无效。

4 个答案: