Javascript 尝试获得角度路由概念的手，但当尝试重新加载页面时，没有显示任何内容。_Javascript_Html_Angularjs_Ngroute

Javascript 尝试获得角度路由概念的手，但当尝试重新加载页面时，没有显示任何内容。

javascript html angularjs

Javascript 尝试获得角度路由概念的手，但当尝试重新加载页面时，没有显示任何内容。,javascript,html,angularjs,ngroute,Javascript,Html,Angularjs,Ngroute,我在编辑器括号中处理这个问题，我创建了一堆文件，文件结构可以在Index.html下的scripts标签中看到根文件夹名称为projectAngular，其下有文件夹appCntrl-->controller-->（所有控制器文件）。在文件夹视图-->customers.html和脚本==>[角度和角度路由文件]下也有此名称 Index.html位于根“projectAngular”文件夹中在尝试运行此应用程序时，我只能看到空白屏幕。我在index.html下检查脚本标记。看起来不错。也在控

我在编辑器括号中处理这个问题，我创建了一堆文件，文件结构可以在Index.html下的scripts标签中看到根文件夹名称为projectAngular，其下有文件夹appCntrl-->controller-->（所有控制器文件）。在文件夹视图-->customers.html和脚本==>[角度和角度路由文件]下也有此名称

Index.html位于根“projectAngular”文件夹中

在尝试运行此应用程序时，我只能看到空白屏幕。我在index.html下检查脚本标记。看起来不错。也在控制器下，我想我也给出了依赖项。我不确定这里到底发生了什么，或者我使用的角度版本已经过时了

请帮忙！！！！谢谢

我在Plunkr创建了exact。下面是URL

index.html

<!doctype html>
<html ng-app="demoApp">

<head>
  <title> Iterating over Data</title>

</head>

<body>
  <!-- Here on Below Line I am loading the view through ngRoute directive declared
           on "customerController" and "routes" declared on "appRoute.js" with view file
           on customer.html -->

  <div ng-view=""></div>



  <!--
    <h2>Customers</h2>
    <br/> FILTER:
    <input type="text" ng-model="customerFilter.name">{{customerFilter.name}}
    <br/>
    <table>
        <tr>
            <th ng-click="doSort('name')">Name</th>

            <th ng-click="doSort('city')">City</th>

            <th ng-click="doSort('orderTotal')">OrderTotal</th>

            <th ng-click="doSort('joined')">Joined</th>
        </tr>

        <tr ng-repeat="cust in customers | orderBy:sortBy:reverse |filter:customerFilter">
            <td>{{cust.name| uppercase}}</td>

            <td>{{cust.city | lowercase}}</td>

            <td>{{cust.orderTotal | currency}}</td>

            <td>{{cust.joined | date}}</td>
        </tr>
    </table>
    <br/>
    <span>Total Customers: {{customers.length}}</span>
-->

  <script src="scripts/angular.js"></script>
  <script src="scripts/angular-routes.js"></script>
  <script src="appCntrl/controller/appRoute.js"></script>
  <script src="appCntrl/controller/customerController.js"></script>
</body>

appRoute.js

(function() {

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

  customerApp.config(function($routeProvider) {
    $routeProvider
      .when('/', {
        controller: 'customerController',
        templateurl: 'views/customer.html'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

}());

您需要做的第一件事是确保：

angular.module('demoApp', ['ngRoute']);

只能使用一次

在控制器中，您需要使用：

    var customerApp = angular.module('demoApp');

添加空括号将实例化一个新的角度模块，您不希望在此处执行此操作

在appRoute.js文件中，确保templateUrl指向正确的文件

拆下并更换为

templateurl

需要是

templateurl

您的plunkr有许多错误：

您需要更新plunkr中的路径以指向根，因为plunkr中没有文件夹

使用外部角度文件，否则，plunkr大小太大，无法加载

这使它起作用。

我只是把它添加到注释中，因为我不确定这是否能解决这个问题，或者即使它只是胡说八道，但是，请考虑使模块的第二个参数成为CuuleMealthurr.js中的空数组。除了应用程序之外，我在所有页面上都遇到了注射问题page@BillPope我试过了，但不起作用。谢谢。也许你可以尝试一个简单的例子，比如一个js和两个静态页面。@pankajparkar就plunkr例子而言，你可能需要重新路由脚本标记。它们当前指向的目录不存在。我只是指向有角度的CDN，而不是指向文件并更正了拼写。谢谢

angular.module('demoApp', ['ngRoute']);

    var customerApp = angular.module('demoApp');