Question

我正在尝试使用ngRoute将我的网站路由到目标网页，并且在构建之后它没有加载任何html，我启动了我的grunt服务器。当我尝试加载页面时，我的控制台中没有任何错误。我可以看到所有文件都被正确复制到'dist文件夹中，但是当我启动服务器时，它会将我带到http://localhost:9000，然后只显示一个空的index.html页面。我究竟做错了什么？

编辑：我已从配置中删除了$ scope，但仍然没有看到我的目标网页。我可以在我的控制器中显示$ scope变量，当我将它们直接放在index.html文件的主体中时，如果这有助于缩小问题范围。

plunker链接：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。我有'build'任务将我所有的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']);

};

Answer 1

You are trying to inject *$scope* in the config function, which is causing the error. 

Below is the snippet after removing $scope.

    angular.module('trial',[]).config((['$scope', '$routeProvider', '$locationProvider', function ($scope, $routeProvider, $locationProvider) {
    ....
    }));

https://plnkr.co/edit/lgc15G2gadoa5WVYzLH0?p=preview

When you see a blank page, you can open developer tool of the browser and see the console to debug. Make sure you have selected *Show all messages* on the Chrome developer console, which will show you errors

我也让您的代码版本正常工作。我修复的一些问题描述如下：

更改要动态提取的基本网址。

<script>
  document.write('<base href="' + document.location + '" />');
</script>

您没有导入另外两个脚本文件。我在index.html

<script src="myWebController.js"></script>
<script src="pageRouter.js"></script>

将 pageRouter 模块添加为主 myWebsite 模块的依赖项。

angular.module('myWebsite', ['myWebController', 'pageRouter']);

工作示例链接：https://plnkr.co/edit/TzkzpJZlfL2XBWV8mUQ9?p=preview

ngRoute不显示我的观点

1 个答案: