【发布时间】：2017-06-12 16:36:09
【问题描述】：
我正在尝试使用 ngRoute 将我的网站路由到登录页面，但它在构建后没有加载任何 html，我启动了我的 grunt 服务器。当我尝试加载页面时，我的控制台中也没有出现任何错误。我可以看到所有文件都被正确复制到'dist 文件夹中，但是当我启动服务器时，它会将我带到http://localhost:9000，然后只显示一个空的 index.html 页面。我究竟做错了什么？
编辑：我已经从我的配置中删除了 $scope，但仍然没有看到我的登录页面。当我将 $scope 变量直接放在 index.html 文件的正文中时，我可以在控制器中显示它们，如果这有助于缩小问题范围。
插件链接：https://plnkr.co/edit/wagbCGdSx5lRO93u5jCF?p=info
这是我的 myWebsite.js
/*global angular*/
(function (angular) {
'use strict';
angular.module('myWebsite', ['myWebController', 'ngRoute']);
}(angular));
和控制器
(function (angular) {
'use strict';
angular.module('myWebController', [])
.controller('myWebController', ['$scope', function ($scope) {
}]);
} (angular));
还有我的路由器
/*global angular:true */
(function (angular) {
'use strict';
angular.module('pageRouter', ['ngRoute'])
.config(['$scope', '$routeProvider', '$locationProvider', function ($scope, $routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'markup/landing-page.html',
controller: 'myWebController'
})
.when('', {
templateUrl: 'markup/landing-page.html',
controller: 'myWebController'
})
.otherwise({
templateUrl: 'markup/landing-page.html',
controller: 'myWebController'
});
$locationProvider.html5Mode({enabled: true});
}]);
} (angular));
这里是 index.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<base href="/"/>
</head>
<body>
<div ng-app="myWebsite" ng-controller="myWebController">
<div ng-view></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
<script src="js/myWebsite.js"> </script>
</body>
</html>
最后是我的 gruntfile。我有“构建”任务将我所有的 js 文件连接成一个并将其放在 dist/js/ 中。标记被复制到 dist/markup/ 并且 index.html 文件被复制到 dist/。然后我在我的 grunt 服务器上提供 dist 文件夹。
module.exports = function (grunt) {
var distPath = 'dist/';
grunt.initConfig({
jshint: {
files: [ 'src/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
},
clean: {
dist: ['dist']
},
connect: {
server: {
options: {
keepalive: true,
port: 9000,
base: 'dist',
open: true
}
}
},
concat: {
js: {
src: ['src/main/**/*.js'],
dest: distPath + '/js/myWebsite.js'
}
},
copy: {
html: {
cwd: 'src',
expand: true,
src: '*.html',
dest: distPath +
},
markup: {
cwd: 'src/main/markup',
expand: true,
src: '*.html',
dest: distPath + '/markup'
},
images: {
cwd: 'src/main/images',
expand: true,
src: '*.png',
dest: distPath + '/images'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['jshint', 'connect:server']);
grunt.registerTask('devServer', ['build', 'connect:server']);
grunt.registerTask('build', ['clean:dist','jshint', 'concat:js', 'copyDist']);
grunt.registerTask('copyDist', ['copy:html', 'copy:markup', 'copy:images']);
};
【问题讨论】：
-
试试
.otherwise({redirectTo: 'markup/landing-page.html'});。 -
我添加了这个，但我仍然看到一个空白页。
-
您的
ng-view是空白的，预计会看到一个空白页面。将您的ng-view重定向到您的目标网页。在处理ng-view的第一个控制器中使用$location.path("/index");，然后在路由提供程序中设置登录页面和新控制器。如果这对您有用，我会将其作为实际答案发布。 -
很抱歉，我无法理解您的意思。我唯一的控制器是 myWebController。所以你是说将 ng-route 添加到依赖项中，注入 $location，然后在控制器中执行 $location.path("/index")？我刚刚尝试过，它在我的浏览器中将我的路径更改为“localhost:9000/#!/index”，但仍然显示空白页。
标签： html angularjs server gruntjs ngroute