AngularJS - ui-router - MVC 5 - html5mode

 pomngjkldjg_849_788 发布于 2022-12-15 12:44

我正在尝试使用AngularJSMVC 5创建一个迷你SPA .除此之外,我想为AngularJS 使用ui-router插件而不是ng-route并且想要启用html5mode.

我的问题是,每当我点击一个锚元素时,它刷新页面并向ASP.NET MVC控制器发送请求并将所选视图放在正确的位置,我希望它不重新加载.

如果我将AngularJS路由机制更改为ng-route,那么它可以按照我的意愿工作,不刷新页面,并路由到所选视图.

在MVC 5 RouteConfig.cs文件中,

        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "SpaUI",
            url: "{SpaUI}/{*catchall}",
            defaults: new { controller = "SpaUI", action = "Index", id = UrlParameter.Optional }
        );

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "SpaUI", action = "Index", id = UrlParameter.Optional }
        );

在AngularJS的app.js文件中,

app.config(['$stateProvider', '$provide', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $provide, $locationProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/Dashboard');

    $stateProvider
    .state("dashboard", {
        url: "/Dashboard",
        templateUrl: "AngularViews/dashboard.html"
    })

    .state("test", {
        url: "/Test",
        templateUrl: "AngularViews/test.html"
    });

    $locationProvider.html5Mode(true);
 }]);

_Layout.cshtml文件中用于锚点;

 

在视图占位符的相同_Layout.cshtml文件中

 

如何在不重新加载页面的情况下将所有这些内容组合在一起?任何想法都赞赏:)

撰写答案
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有