带有 AngularJS 路由的 ASP.NET Core答案

【问题标题】：ASP.NET Core with AngularJS routing带有 AngularJS 路由的 ASP.NET Core
【发布时间】：2016-11-23 12:49:47
【问题描述】：

我在让我的模板显示在我的 SPA 上时遇到问题。所有脚本执行都没有错误，我可以通过浏览器导航到我的 HTML 模板，但是 Angular 无法将我的路由配置连接到我的应用程序。

(function(angular) {
    'use strict';

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

    app.run(function() {
    });

    app.config(['$routeProvider',
        function ($routeProvider) {
            $routeProvider.
                when('/', {
                    templateUrl: 'app/landing/landing.html',
                    controller: 'LandingController',
                    controllerAs: 'ctrl'
                }).
                otherwise({
                    redirectTo: '/'
                });
        }
    ]);
}(window.angular));

如果我浏览到http://localhost:55907/app/landing/landing.html，则会呈现页面。 HTML 文件位于 wwwroot 文件夹中。

【问题讨论】：

你能提供你连接的控制器源吗？这段代码只做 Angular 应用程序和路由的初始化。
@GrayFox 为什么需要查看控制器源代码？我的路由提供者正在初始化期间构建我的路由。
我误会了你。所以，如果我做对了，你的页面不能在 http://localhost:55907/ url 上运行？
@GrayFox 是正确的。所有 JS 文件都已正确加载，并且 angular 似乎启动正常（意思是控制台中没有错误），但模板或路由未按预期工作。如果我从静态文件运行这个应用程序，那么一切正常。
<ng-view></ng-view> 是否出现在像 index.cshtml 这样的服务器页面中？

标签： angularjs asp.net-core-mvc asp.net-core-1.0

【解决方案1】：

您需要向appsettings.json 添加更多配置，或者只需将这些代码行添加到startup.cs 文件：

DefaultFilesOptions options = new DefaultFilesOptions();
            options.DefaultFileNames.Clear();
            options.DefaultFileNames.Add("Index.html");
            app.Use(async (context, next) =>
            {
                await next();

                if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
                {
                    context.Request.Path = "/Index.html";
                    await next();
                }
            })
            .UseCors("AllowAll")
            .UseDefaultFiles(options)
            .UseStaticFiles()
            .UseIdentity()
            .UseMvc();

【讨论】：