Currently, I am in the process of setting up a basic Angular single-page-application within ASP .NET 5. The project starts with a clean slate, with only the ngRoute Angular dependency included.
The issue at hand:
Upon running the project, I am faced with a blank page displayed in the browser, and there are no errors appearing in the developer console.
UPDATE
Following the advice to remove the [] brackets from
angular.module('app', []).controllerUncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: a
Despite using npm, bower, and grunt, it seems unlikely that they are related to this problem.
This is how the project structure appears:
https://i.sstatic.net/ahenx.jpg
Provided below is the index.html code snippet:
<!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>
Next, we have the app.js file:
(function () {
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Views/home.html',
controller: 'home'
})
.otherwise({
redirectTo: '/'
});
});
})();
Subsequently, the home.js file:
(function () {
'use strict';
angular.module('app').controller('home', function controller($scope) {
$scope.title = 'Home';
});
})();
And here's the content of home.html:
<div ng-controller="home">
{{ title }}
</div>
Why does the page remain blank instead of displaying the text "Home" as intended?
The app.js within wwwroot includes all the Scripts folder contents, with app.js specified at the beginning. Here's the 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"]);
};
Confirmation reveals that angular.js, angular-route.js, and app.js load successfully in the browser. Below is the consolidated "uglified" version of app.js content:
!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"})}();