Угловая маршрутизация и .net: ng-view не отображается - PullRequest
Новая
       29

Угловая маршрутизация и .net: ng-view не отображается

0 голосов
/ 01 июня 2018

Я пытаюсь научиться сочетать угловую маршрутизацию с маршрутизацией MVC, но, что бы я ни пытался, ng-view не будет загружен в DOM;вместо этого при проверке в браузере я вижу, что ng-view автоматически закомментирован, хотя маршрутизация работает.Кто-нибудь знает, почему это не загружает представления?

Мой контроллер: 

public class HomeController : Controller
{

    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Gallery()
    {

        return View();
    }

    public IActionResult Animation()
    {

        return View();
    }

    public IActionResult Error()
    {
        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
    }

    public PartialViewResult Fade()
    {

        return PartialView();
    }


    public PartialViewResult Slide()
    {

        return PartialView();
    }

}

}

Мой _Layout.cshtml: 

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Cat</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />

        <!--angular-->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
        <!--
        <script src="~/Angular/navBar.js"></script>
        <script src="~/Angular/index.js"></script>
        <script src="~/Angular/gallery.js"></script>
        <script src="~/Angular/animations.js"></script>
        <script src="~/Angular/app.js"></script>
          -->
        <script src="~/Angular/angularBundle.js"></script>



    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

    </environment>
</head>
<body>
    <div id="nav-bar" ng-controller="navController" ng-cloak >
            <nav-bar ng-cloak></nav-bar>     
    </div>
            <div class="container body-content">
                @RenderBody()
                <hr />
                <footer>
                    <p>&copy; 2018 - Cat</p>
                </footer>
            </div>
    
</body>
</html>

My Animations View: 

@{
    ViewData["Title"] = "Animation";
}

<div ng-controller="animationsController">
    <table class="table">
        <tr>
            <th><a href="#!fade">Fade</a></th>
            <th><a href="#!slide">Slide</a></th>
        </tr>
    </table>
 
    <ng-view></ng-view>

</div>

Где выполняется маршрутизация:

var animations = angular.module('animations', ['ngRoute']);

animations.config(function routing($routeProvider) {
    $routeProvider
        .when('/fade', {
            templateURL: '/Home/Fade',
            controller: 'animationsController',
            controllerAs: 'fade'
        })
        .when('/slide', {
            templateURL: '/Home/Slide',
            controller: 'animationsController',
            controllerAs: 'slide'
        })
        //.otherwise({
        //    redirectTo: '/fade'
       // });
});

animations.controller('animationsController', function animationsController($scope, $rootScope){
	$rootScope.title = {value: 'Animation'};
	
	$scope.fakeJSON = [{id : 0, src : "/images/cat1.jpg" }, {id : 1, src: "/images/cat2.jpg"}, {id : 2, src: "/images/cat3.jpeg"}];
	
});

Вот частичное представление, которое должно быть загружено, где ng-view: 

@{
    ViewData["Title"] = "Animation: Slide";
}

<h1>Cats Sliding Everywhere!</h1>

<img ng-repeat="image in fakeJSON" alt="cute cat" src={{image.src}} alt="asd" class="col-md-offset-5 img-responsive slide-repeat">

И вот что я получаю, нажимая любую из этих ссылок: Снимок экрана

Редактировать: Добавлен поршень с анимацией Plunker

1 Ответ

0 голосов
/ 05 июня 2018

Итак, я понял, что есть пара неправильных вещей:

  • У меня был templateURL вместо templateUrl для моего .wen case
  • Мне нужно было установить префикс хеша:$ местоположение к "!"(хотя я читал, что это была версия по умолчанию для угловой версии, которую я использовал)
  • Атрибуты href для элементов a должны были быть "#! / page", а не "#! page" в html

animations.config(function routing($routeProvider,  $locationProvider) {
    $routeProvider
        .when('/fade', {
            templateUrl: 'Fade.html',
            controller: 'animationsController',
            controllerAs: 'fade'
        })
        .when('/slide', {
            templateUrl: 'Slide.html',
            controller: 'animationsController',
            controllerAs: 'slide'
        })
        .otherwise({
           redirectTo: '/fade'
       });
       
       $locationProvider.hashPrefix('!');
});

Я обновил Plunker , на случай, если кому-то понадобится в качестве справки в будущем

...