时间戳

首页 > 解决方案 > 角度路由和.net：ng-view 不显示

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

问题描述

我正在尝试学习如何将角度路由与 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>

我的动画视图：

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

标签： angularjsasp.net-mvcmodel-view-controllerroutingangular-routing

解决方案

所以我想通了，有几件事不对：

  • 我的 .when 案例有 templateURL 而不是 templateUrl
  • 我需要将 $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，以防将来有人需要它作为参考

推荐阅读