试图掌握 angular 路由概念，但是当尝试重新加载页面时，没有显示任何内容。

Question

我在编辑器 Bracket 中处理这个，我创建了一堆文件，文件结构可以在 Index.html 下的脚本标签下看到根文件夹名称是 projectAngular，其下有文件夹 appCntrl -->controller--->（所有控制器文件）。还在文件夹 views-->customers.html 和 script==>[[=51= 下] 和 angular 路由文件]

Index.html 位于根 "projectAngular" 文件夹

在尝试运行这个应用程序时我只能看到空白屏幕。我在 index.html 下检查我的脚本标签。看起来不错。同样在控制器下，我想我也提供了依赖性。我不确定这里到底发生了什么，或者我使用的 angular 版本已经过时了。

请帮助!!!!谢谢

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

http://plnkr.co/edit/WVAglImSEKQkQA1BaAUZ?p=catalogue

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>

customer.html

<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/>

客户总数：{{customers.length}}

customerController.js 文件

(function() {

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

  // It helps angular to realize what params are being passed to controller if minification has replaced the variables 
  customerController.$inject = ['$scope'];

  function customerController($scope) {
    $scope.sortBy = 'name';
    $scope.reverse = false;

    $scope.customers = [{
      name: 'kevin',
      city: 'San Farnando',
      orderTotal: '10.78',
      joined: '1990-12-10'
    }, {
      name: 'ketty',
      city: 'Seattle',
      orderTotal: '12.99',
      joined: '2003-4-7'
    }, {
      name: 'John',
      city: 'Texas',
      orderTotal: '6.787',
      joined: '2015-9-9'
    }, {
      name: 'Jackson',
      city: 'ohio',
      orderTotal: '12.00',
      joined: '2003-12-1'
    }];
    $scope.doSort = function(propName) {
      $scope.sortBy = propName;
      $scope.reverse = !$scope.reverse;
    };

  }
  customerApp.controller('customerController', customerController);
}());

appRoute.js

(function() {

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

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

}());

Answer 1

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

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

仅使用一次。

在你的控制器中，你需要使用：

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

添加空括号会实例化一个您不想在此处执行的新 angular 模块。

在您的 appRoute.js 文件中，确保 templateUrl 指向正确的文件。
删除并替换为 .

Answer 2

templateurl 需要 templateUrl.

你的plunkr有很多错误：

您需要更新 plunkr 中的路径以指向根目录，plunkr 中没有文件夹。
使用外部 angular 文件，否则您的 plunkr 文件太大而无法加载。

Updates to your plunkr 成功了。

试图掌握 angular 路由概念，但是当尝试重新加载页面时，没有显示任何内容。

trying to get hands on angular Routing concepts BUT when try to reload the page NOTHING HAS BEEN SHOWN up.

html

javascript

angularjs

ngroute

客户总数：{{customers.length}}