ASP .NET 5中的简单Angular SPA - 启动时获取空白页面
Pet*_*eGO 1 javascript angularjs single-page-application angularjs-ng-route asp.net-core
我正在尝试在ASP .NET 5中设置一个非常简单的Angular单页面应用程序.我已经开始了一个空项目 - 目前唯一的角度依赖是ngRoute.
问题:
当我运行项目时,我的浏览器中出现一个空白页 - 开发人员控制台中没有错误.
编辑
我[]从angular.module('app', []).controller建议中删除了但现在抛出了一个错误:
未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块应用程序:错误:[$ injector:unpr]未知提供程序: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"})}();
在应用程序初始化时,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可能是更好的方法,因为您不会遇到与第三方服务等相同的问题.
| 归档时间： |
|
| 查看次数： |
853 次 |
| 最近记录： |