Angular .NET 5 中的简单 Angular SPA - 启动时出现空白页

Question

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

问题：

When I run the project, I get a blank page in my browser - with no errors in the developer console.

编辑

我按照建议从 angular.module('app', []).controller 中删除了 []，但现在出现错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: a

我正在使用 npm、bower 和 grunt - 但我认为它们与问题无关。

项目结构如下所示：

这是 index.html:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- angular -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-route.js"></script>
    <!-- app -->
    <script src="app.js"></script>
</head>
<body ng-cloak>
    <div ng-view>
    </div>
</body>
</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:

<div ng-controller="home">
    {{ title }}
</div>

为什么我得到的是空白页面而不是屏幕上呈现的文本 "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"})}();

Answer 1

您的 home.js 有一个细微的错误。您正在重新声明您的 app 模块，它正在删除所有路由配置。

angular.module('app', []).controller... 是模块的 setter 语法。相反，您应该使用 angular.module('app').controller getter 语法，以避免重新声明模块。

Answer 2

Claies 在应用程序初始化方面是正确的，但还有另一件事。

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

这是简要说明： uglify 想使您的 JS 文件更轻便，并将其更改为：

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

为此：

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

这会给 angular 带来问题，因为它不知道 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 可能是更好的方法，因为您不会遇到与第 3 方服务等相同的问题。

Angular .NET 5 中的简单 Angular SPA - 启动时出现空白页

Simple Angular SPA in ASP .NET 5 - getting blank page on startup

javascript

angularjs

single-page-application

angularjs-ng-route

asp.net-core