Question

我试图学习如何将角度路由与MVC路由相结合，但无论我尝试什么，视图都不会被加载到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：

＆＃13;

<!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>

＆＃13;

我的动画视图：

＆＃13;

@{
    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>

＆＃13;

路由正在进行中：

＆＃13;

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"}];
	
});

＆＃13;

这里是应该加载的部分视图，其中ng-view是：

＆＃13;

@{
    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">

＆＃13;

以下是点击其中任何一个链接的内容： Screenshot

编辑：添加了动画内容的plunker Plunker

Answer 1

所以我想通了，有几件事是错的：

我的.when案例
我需要将$ location的哈希前缀设置为“！” （尽管我已经读过它是我正在使用的角度版本的默认值）
a元素的href属性必须是“＃！/ page”而不是html中的“＃！page”

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，以防将来有人将其作为参考

角度路由和.net：ng-view不显示

1 个答案: