Блог

Главная - Вопросы по программированию - AngularJS .Net Core маршрутизация $инжектор: модуль r

AngularJS .Net Core маршрутизация $инжектор: модуль r

#javascript #asp.net #.net #angularjs

#javascript #asp.net #.net #angularjs

Вопрос:

Я пытаюсь кое-что изучить.Net Core и AngularJS итак, я делаю учебные пособия, и я остановился на этом:
http://stephenwalther.com/archive/2015/01/16/asp-net-5-and-angularjs-part-3-adding-client-routing Когда я делаю то же самое в новейшей версии .Net Core с конфигурацией по умолчанию, я получаю ошибку AngularJS: ошибка модуля $injector:modulerr

Я создал отдельный проект для тестирования только маршрутизации. Есть некоторый код:

 (function () {
'use strict';

angular.module('routeApp', ['ngRoute']).config(config);

function config($routeProvider, $locationProvider) {

    $routeProvider
        .when('/', {
            templateUrl: '/Views/home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: '/Views/about.html',
            controller: 'AboutController'
        })
        .otherwise({
            redirectTo: '/'
        });

    $locationProvider.html5Mode(true);
};
})();

контроллер:

 (function () {
'use strict';

angular
    .module('routeApp')
    .controller('HomeController', HomeController)
    .controller('AboutController', AboutController)
    .controller('ErrorController', ErrorController);

HomeController.$inject = ['$scope']; 

function HomeController($scope) {
    $scope.message = "Welcome homepage";
}

AboutController.$inject = ['$scope'];

function AboutController($scope) {
    $scope.message = "This is about page";
}

ErrorController.$inject = ['$scope'];

function ErrorController($scope) {
    $scope.message = "Error 404!";
}

})();

index.html

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS Routing App</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>

    <script src="app.js"></script>

</head>
<body ng-app="routeApp">

    <a href="/">Home</a>
    <a href="/about">About</a>
    <div>
        <ng-view></ng-view>
    </div>

</body>
</html>

Что я делаю не так? Требуется ли какая-либо специальная конфигурация сервера?

PS. Я использую Visual Studio 2015 с обновлением 3.

PS2. Трассировка стека браузера:

 Uncaught Error: [$injector:modulerr] Failed to instantiate module routeApp due to:
Error: [$injector:unpr] Unknown provider: a
http://errors.angularjs.org/1.5.6/$injector/unpr?p0=a
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:68:12
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4501:19
    at getService (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4654:39)
    at injectionArgs (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4678:58)
    at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4700:18)
    at runInvokeQueue (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4601:35)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4610:11
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:322:20)
    at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4591:5)
    at createInjector (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4513:19)
http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=routeAppamp;p1=Error%3….googleapis.com/ajax/libs/angularjs/1.5.6/angular.js:4513:19)

PS3. Уменьшенный app.js

 !function(){"use strict";function a(a,b){a.when("/",{templateUrl:"/Views/home.html",controller:"HomeController"}).when("/about",{templateUrl:"/Views/about.html",controller:"AboutController"}).otherwise({redirectTo:"/"}),b.html5Mode(!0)}angular.module("routeApp",["ngRoute"]).config(a)}(),function(){"use strict";function a(a){a.message="Welcome homepage"}function b(a){a.message="This is about page"}function c(a){a.message="Error 404!"}angular.module("routeApp").controller("HomeController",a).controller("AboutController",b).controller("ErrorController",c),a.$inject=["$scope"],b.$inject=["$scope"],c.$inject=["$scope"]}();

Ответ №1:

Убедитесь, что вы запускаете это приложение на сервере.