Angularjs 如何配置Angular routeProvider templateUrl以正确渲染

我在Angular app中配置了以下路线：

config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/Quote', {templateUrl: 'partials/tabcontrol.html', controller: 'TabController'})
          .otherwise({redirectTo: '/Quote'});
    }])

应用程序运行时，查找TemplateUrl文件似乎没有问题：

GET / 200 1.715 ms - 1138
GET /bower_components/angular-file-upload/angular-file-upload.js 200 3.964 ms - 49386
GET /app/app.js 200 4.496 ms - 5397
GET /bower_components/angular/angular-bootstrap.js 200 6.248 ms - 75250
GET /partials/tabcontrol.html 200 5.703 ms - 172
GET /favicon.ico 304 5.913 ms - -
GET /css/app.css 200 0.774 ms - 366

然而，我在页面上什么也看不到

以下是tabcontrol.html：

<div ng-controller="TabController" class="container form-group">
    <h2>HHHHH</h2>
    <div class="container">
        <div class="form-inline">
        <fieldset>
            <legend>Account information</legend>
            <label for="salesForceId">SalesForce ID</label>
            <input id="salesForceId" name="salesForceId" type="text" class="form-control" ng-model="salesForceId"/>
            <label for="accountName">Account name</label>
            <input id="accountName" name="accountName" type="text" class="form-control" ng-model="accountName"/>
        </fieldset>
        </div>
    </div>
    <br>
    <tabset>
        <tab ng-repeat="workspace in workspaces"
             heading="{{workspace.name}}"
             active=workspace.active>
            <div ng-controller="TabsChildController">
                <br/>
                <label for="siteName">Site Name</label>
                <input id="siteName" name="siteName" type="text" class="form-control" ng-model="workspace.name"/>
                <br/>
                <div ng-include src="'fileUpload/fileUpload.html'">

                </div>
                <div class="form-group">
                    <fieldset>
                        <legend><strong>OR</strong> fill out the basic information below</legend>
                    <!--<label for="siteName">Site Name</label>-->
                    <!--<input id="siteName" name="siteName" type="text" class="form-control" ng-model="workspace.name"/>-->

                        <div class="col-sm-6">
                    <label for="numberOfMainframes">Number of Mainframes</label>
                    <input id="numberOfMainframes" name="numberOfMainframes" type="text" class="form-control" ng-model="workspace.numberOfMainframes"/>
                    <br/>
                    <label for="numberOfStorageFrames">Number of Storage Frames</label>
                    <input id="numberOfStorageFrames" name="numberOfStorageFrames" type="text" class="form-control" ng-model="workspace.numberOfStorageFrames"/>
                    <br/>
                        </div>
                        <div class="col-sm-6">
                    <label for="numberOfUnixServers">Number of Unix/AIX Servers</label>
                    <input id="numberOfUnixServers" name="numberOfUnixServers" type="text" class="form-control" ng-model="workspace.numberOfUnixServers"/>
                    <br/>


                    <label for="numberOfBladeCenters">Number of Blade Centers</label>
                    <input id="numberOfBladeCenters" name="numberOfBladeCenters" type="text" class="form-control" ng-model="workspace.numberOfBladeCenters"/>
                    <br/>
                        </div>

                        <div class="col-sm-6">

                    <label for="numberOfx86Servers">Number of x86 Servers</label>
                    <input id="numberOfx86Servers" name="numberOfx86Servers" type="text" class="form-control" ng-model="workspace.numberOfx86Servers"/>


                        </div>

                    </fieldset>
                </div>
            </div>
        </tab>
        <tab select="addWorkspace()">
            <tab-heading> Add Site
                <i class="icon-plus-sign"></i>
            </tab-heading>
        </tab>
        <tab select="removeWorkspace()">
            <tab-heading> Remove Selected Site
                <i class="icon-plus-sign"></i>
            </tab-heading>
        </tab>
    </tabset>
    <br/>
    <button type="button" class="btn-primary" ng-click="collectValuesFromEachTab()">Generate a Quote</button>
    <!--<h3>Workspaces</h3>-->
    <!--<pre>{{workspaces|json}}</pre>-->
</div>

---

我会在网络控制台中检查

tabcontrol.html

文件的响应。您上面列出的内容看起来比172b要多得多。您已经指定了控制器两次，请删除模板上的ng控制器指令。我可以知道您使用的浏览器是什么吗？IE11&chrome有时在缓存控制中表现不同我已从tabcontrol.html中删除了ng controller=TabController。我已经检查了网络响应-看起来正常（304）。我在Ubuntu 14上使用Firefox和Chromium。到目前为止-没有错误，但是页面仍然是空白的。

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DC Quote</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript"  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-view></div>

<script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript"  src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
<script type="text/javascript"  src="../bower_components/angular/angular-bootstrap.js"></script>
<script type="text/javascript"  src="../bower_components/angular-file-upload/angular-file-upload.js"></script>
<script   src="../app/app.js"></script>

</body>
</html>

'use strict';
var app = angular.module('myApp', [
  'ngRoute',
  'ui.bootstrap',
  'angularFileUpload'
]).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/Quote', {templateUrl: 'partials/tabcontrol.html', controller: 'TabController'})
          .otherwise({redirectTo: '/Quote'});
    }])
    .controller("TabController", ['$scope','$http', function ($scope, $http) {
      console.log("This is TabController");
      var setAllInactive = function() {
        angular.forEach($scope.workspaces, function(workspace) {
          workspace.active = false;
        });
      };

      var Site = {
        numberOfMainframes: undefined,
        numberOfStorageFrames:  undefined,
        numberOfUnixServers:  undefined,
        numberOfBladeCenters: undefined,
        numberOfX86Servers: undefined
      };

      var addNewWorkspace = function() {
        var id = $scope.workspaces.length + 1;
        $scope.workspaces.push({
          id: id,
          name: "Site " + id,
          active: true
        });
      };

      $scope.workspaces =
          [
            { id: 1, name: "Site 1" ,active:true  },
            { id: 2, name: "Site 2" ,active:false  }
          ];

      $scope.addWorkspace = function () {
        setAllInactive();
        addNewWorkspace();
      };

      $scope.removeWorkspace = function() {
        angular.forEach($scope.workspaces, function(workspace) {
          if(workspace.active){
            var index = $scope.workspaces.indexOf(workspace);
            console.log('Active Workspace id: ' + index);
            $scope.workspaces.splice(index,1);
          }
        })
      };

      $scope.collectValuesFromEachTab = function(){

        $scope.quote = new Object();
        $scope.quote.SalesForceId = $scope.salesForceId;
        $scope.quote.AccountName = $scope.accountName;
        $scope.quote.siteCollection = [];

        angular.forEach($scope.workspaces, function(workspace) {
          //console.log("Site: " + workspace.name);
          //console.log("Number of Mainframes: " + workspace.numberOfMainframes);
          //console.log("Number of Starage Frames" + workspace.numberOfStorageFrames);
          //console.log("Number of Unix/AIX Servers: " + workspace.numberOfUnixServers);
          //console.log("Number of Blade Centers: " + workspace.numberOfBladeCenters);
          //console.log("Number of x86 Servers: " + workspace.numberOfx86Servers);

          var site = new Object();
          site.SiteName = workspace.name;
          site.NumberOfMainframes = workspace.numberOfMainframes;
          site.NumberOfStorageFrames = workspace.numberOfStorageFrames;
          site.NumberOfUnixServers = workspace.numberOfUnixServers;
          site.NumberOfBladeCenters = workspace.numberOfBladeCenters;
          site.NumberOfX86Servers = workspace.numberOfx86Servers;

          $scope.quote.siteCollection.push(site);
        });
        var res = $http.post('http://10.211.55.26:8081/api/dcquote/testquote', $scope.quote);
        res.success(function(data, status, headers, config) {
          $scope.message = data;
        });
        res.error(function(data, status, headers, config) {
          alert( "failure message: " + JSON.stringify({data: data}));
        });
      }

    }])
    .controller("TabsChildController", ['$scope',function($scope){

    }])
    .controller('FileUploadController', ['$scope', 'FileUploader', function($scope, FileUploader) {
      var uploader = $scope.uploader = new FileUploader({
        url: 'http://10.211.55.26:8081/api/test/files'
      });

      // FILTERS

      uploader.filters.push({
        name: 'customFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
          return this.queue.length < 10;
        }
      });

      // CALLBACKS

      uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
        console.info('onWhenAddingFileFailed', item, filter, options);
      };
      uploader.onAfterAddingFile = function(fileItem) {
        console.info('onAfterAddingFile', fileItem);
      };
      uploader.onAfterAddingAll = function(addedFileItems) {
        console.info('onAfterAddingAll', addedFileItems);
      };
      uploader.onBeforeUploadItem = function(item) {
        console.info('onBeforeUploadItem', item);
      };
      uploader.onProgressItem = function(fileItem, progress) {
        console.info('onProgressItem', fileItem, progress);
      };
      uploader.onProgressAll = function(progress) {
        console.info('onProgressAll', progress);
      };
      uploader.onSuccessItem = function(fileItem, response, status, headers) {
        console.info('onSuccessItem', fileItem, response, status, headers);
      };
      uploader.onErrorItem = function(fileItem, response, status, headers) {
        console.info('onErrorItem', fileItem, response, status, headers);
      };
      uploader.onCancelItem = function(fileItem, response, status, headers) {
        console.info('onCancelItem', fileItem, response, status, headers);
      };
      uploader.onCompleteItem = function(fileItem, response, status, headers) {
        console.info('onCompleteItem', fileItem, response, status, headers);
      };
      uploader.onCompleteAll = function() {
        console.info('onCompleteAll');
      };

      console.info('uploader', uploader);
    }]);

app.get("/bower_components/angular/angular-bootstrap.js", function (req, res) {
  res.sendfile("bower_components/angular/angular-bootstrap.js");
});

app.get("/bower_components/angular-file-upload/angular-file-upload.js", function (req, res) {
  res.sendfile("bower_components/angular-file-upload/angular-file-upload.js");
});

app.get("/app/app.js", function (req, res) {
  res.sendfile("app/app.js");
});

app.get('/', function(req, res) {
  res.sendfile('views/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});