Question

我是AngularJS的新手，试图用AngularJS学习MVC，有点像迷你SPA。出于某种原因，AngularJS路由不适合我。我尝试了很多组合，但没有合作。我可能有什么错误的线索？我收到的错误是＆＃39;无法找到资源＆＃39; 404单击按钮时，MVC没有实现查看方法的链接。似乎在angularJs客户端路由之前正在处理MVC路由：

布局：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <link href="~/Content/bootstrap-superhero.css" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-resource.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/registration-module.js"></script>
    @RenderSection("head", false)
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name xxx", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content" ng-app="registrationModule">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p></footer>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>


</body>
</html>

＆＃13;

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Registration", action = "Index", id = UrlParameter.Optional }
            );

            //routes.MapRoute(
            //  name: "Application",
            //  url: "{*url}",
            //  defaults: new { controller = "Registration", action = "Index" });
        }
    }

＆＃13;

角度注册：

＆＃13;

var registrationModule = angular.module("registrationModule", ['ngRoute','ngResource'])
    .config(function ($routeProvider, $locationProvider) {
        //$routeProvider.when('/Registration/Courses', { templateUrl: '/Templates/courses.html', controller: 'CoursesController' });
        $routeProvider.when('/Registration/Courses', { templateUrl: '/Templates/test.html' });
        $routeProvider.when('/Registration/Instructors', { templateUrl: '/Templates/instructors.html', controller: 'InstructorsController' });
        $routeProvider.otherwise({ redirectTo: '/' });
        $locationProvider.html5Mode(true);
    });

＆＃13;

查看

＆＃13;

@model Ang2.Models.Registration.Registration

@{
    ViewBag.Title = "Index";
}

<div class="container">
    <div class="row">
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <ul class="nav navbar-brand">
                    <li><span class="navbar-brand"></span></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/Registration/Courses">Browse Catalog</a></li>
                    <li><a href="/Registration/Instructors">Browse Instructors</a></li>
                </ul>
            </div> 
        </div>
    </div>
    <div ng-view></div>

</div>

＆＃13;

存在物理文件：

Answer 1

It seems you are using HTML5 routing mode html5Mode(true), but have not specified the base url, so that angular knows where to start the routing. You could try either disable the HTML5 mode (set it to false), or specify the base using <base> tag.

Note that server-side (C# code) is completely unrelated and not used for client-side routing. Also note that you should not expect your controllers to be called, because angular routing is a client-side only, it does not call the server by itself. Means, "view" will NOT be processed by c#, you will just get plain html.

All in all, it looks you don't need angular routing at all, since you seem to be doing routing server side.

AngularJs路由问题404

1 个答案: