ASP .NET 5中的简单Angular SPA - 启动时获取空白页面

我正在尝试在ASP .NET 5中设置一个非常简单的Angular单页面应用程序.我已经开始了一个空项目 - 目前唯一的角度依赖是ngRoute.

问题:

当我运行项目时,我的浏览器中出现一个空白页 - 开发人员控制台中没有错误.

编辑

我[]从angular.module('app', []).controller建议中删除了但现在抛出了一个错误:

未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块应用程序:错误:[$ injector:unpr]未知提供程序:a

我正在使用npm,bower和grunt - 但我不认为他们与这个问题有任何关系.

这是项目结构的样子:

这是index.html:

这是app.js:

(function () {
    'use strict';

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

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'Views/home.html',
                controller: 'home'
            })
            .otherwise({
                redirectTo: '/'
            });
    });
})();

这是home.js:

(function () {
    'use strict';
    angular.module('app').controller('home', function controller($scope) {
        $scope.title = 'Home';
    });
})();

这是home.html:

    {{ title }}

为什么我得到一个空白页而不是屏幕上显示的"Home"文本？

wwwroot下的app.js包含Scripts文件夹的所有内容 - 首先写入app.js内容.这是gruntfile.js:

module.exports = function (grunt) {
    // Load grunt plugins from npm.
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    // Configure plugins.
    grunt.initConfig({
        // Combine and minify all of the javascript files from the Scripts folder into the wwwroot 
        // folder, making sure the app.js is placed at the beginning.
        uglify: {
            my_target: {
                files: { "wwwroot/app.js": ["Scripts/App/app.js", "Scripts/**/*.js"] }
            }
        },

        // Re-run the uglify task when any of the files in the Scripts folder change.
        watch: {
            scripts: {
                files: ["Scripts/**/*.js"],
                tasks: ["uglify"]
            }
        }
    });

    // Define tasks.
    grunt.registerTask("default", ["uglify", "watch"]);
};

我可以看到angular.js,angular-route.js和app.js已经在浏览器中正确加载.这是"uglified"app.js的内容:

!function(){"use strict";var a=angular.module("app",["ngRoute"]);a.config(function(a){a.when("/",{templateUrl:"Views/home.html",controller:"home"}).otherwise({redirectTo:"/"})})}(),function(){"use strict";angular.module("app",[]).controller("home",function(a){a.title="Home"})}();

rzelek.. 5

在应用程序初始化时,Claies是正确的,但还有另一件事.

你的问题比你想象的要复杂得多.您正在使用uglifyjs,它会更改控制器参数中的变量名称.您需要使用ngannotate的gruntfile.js或者切换到更长的控制器定义.

这是一个简短的解释: uglify想要让你的JS文件更轻,并从中改变它:

myApp.controller('GreetingController', function($scope, service) {
  $scope.greeting = 'Hola!';
  service.fnc();
});

对此:

myApp.controller('GreetingController', function(a,b) {
  a.greeting = 'Hola!';
  b.fnc();
});

这会导致角度问题,因为它不知道是什么a.

如果要在不更改控制器的情况下解决问题,可以使用ngannotate任务.另一种方法是改变控制器的定义:

myApp.controller('GreetingController', ['$scope', 'service', function($scope, service) {
  $scope.greeting = 'Hola!';
  service.fnc();
}]);

Uglify将把它转变为:

myApp.controller('GreetingController', ['$scope', 'service', function(a, b) {
  a.greeting = 'Hola!';
  b.fnc();
}]);

注意:请记住,使用ngannotate可能是更好的方法,因为您不会遇到与第三方服务等相同的问题.

在应用程序初始化时,Claies是正确的,但还有另一件事.

你的问题比你想象的要复杂得多.您正在使用uglifyjs,它会更改控制器参数中的变量名称.您需要使用ngannotate的gruntfile.js或者切换到更长的控制器定义.

这是一个简短的解释: uglify想要让你的JS文件更轻,并从中改变它:

myApp.controller('GreetingController', function($scope, service) {
  $scope.greeting = 'Hola!';
  service.fnc();
});

对此:

myApp.controller('GreetingController', function(a,b) {
  a.greeting = 'Hola!';
  b.fnc();
});

这会导致角度问题,因为它不知道是什么a.

如果要在不更改控制器的情况下解决问题,可以使用ngannotate任务.另一种方法是改变控制器的定义:

myApp.controller('GreetingController', ['$scope', 'service', function($scope, service) {
  $scope.greeting = 'Hola!';
  service.fnc();
}]);

Uglify将把它转变为:

myApp.controller('GreetingController', ['$scope', 'service', function(a, b) {
  a.greeting = 'Hola!';
  b.fnc();
}]);

注意:请记住,使用ngannotate可能是更好的方法,因为您不会遇到与第三方服务等相同的问题.