asp .net навигация между разными страницами с помощью angularJS в localhost

Я пытаюсь узнать больше об AngularJS, и я столкнулся с проблемой маршрутизации.

Я занимаюсь разработкой проекта ASP .NET в Visaul Studio. Я запускаю проект на локальном хосте в Google Chrome.

Вот как каталог моего проекта:

Вот мой Index.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>Test AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

    <!--base href="@Url.Content("~/")" /--><!--Found it in a post. Didnt help-->
</head>

<body ng-app="myApp">

    <p><a href="#/">Main</a></p>
    <a href="#Groups">Groups</a>

    <div ng-view></div>

    <script>
        var app = angular.module("myApp", ["ngRoute"]);        
        app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
            //$locationProvider.html5Mode(false);            
            $routeProvider
            .when("#", {
                templateUrl: "Index.cshtml"
            })
            .when("/Groups", {
                templateUrl: '/Views/AngularViews/Groups.cshtml',
                controller: 'GroupsController'
            })
        }]);

    </script>

</body>
</html>

Вот мой Groups.cshtml

<section id="Groups_Controller" class="" ng-controller="GroupsController">
<h2>_Groups</h2>
<div>
    This is the Groups page!!!
    {{5+5}}
</div>
</section>

<script>
   function GroupsController($scope, $http, $modal, $timeout, $location) {
   };
</script>

Так выглядит страница, когда я запускаю приложение.

Когда я нажимаю на странице групп. Я получаю эту ошибку на консоли:

Источник

1 ответ

Вы пытаетесь лечить серверную часть .cshtml страница как сторона клиента .html частичный, который не будет работать. Сервер активно отвергает .cshtml страница, потому что .cshtml страницы предназначены исключительно для рендеринга сервером, обычно Razor.

Вы должны изменить файл на .html для того, чтобы это было предоставлено Angular вместо этого.

Однако у вас также есть другая проблема: вы не можете объявить свой контроллер Angular внутри партиала; Маршрутизатор будет пытаться найти контроллер до загрузки части, и контроллер не будет существовать.

Кроме того, вы не должны использовать controller: на вашем маршруте и ng-controller внутри вашего партиала и то и другое одновременно, поскольку каждый из них будет пытаться создать экземпляр вашего контроллера, что приведет к проблемам с привязками данных.

Источник
Другие вопросы по тегам