我在Angular应用程序中配置了以下路线：
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/Quote', {templateUrl: 'partials/tabcontrol.html', controller: 'TabController'})
.otherwise({redirectTo: '/Quote'});
}])
当应用运行时，看起来找到templteUrl文件没有问题：
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>
这是index.html：
<!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);
}]);
更有趣的是，当我选择直接调试index.html时，一切都会显示出来。 但是，当应用程序由Node提供服务时（该项目是同一项目的一部分），页面为空（但没有任何错误）
以下是节点路线：
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)
});