站点托管到 IIS 后，AngularJS 路由不起作用 [英] AngularJS routing not working after site hosted into IIS

问题描述

我们正在使用 ASP.NET MVC 框架中的 AngularJS 创建 SPA 技术，当它从 VS2013 运行时，页面之间的 AngularJS 路由工作正常，但在将应用程序托管到 IIS7.5 路由后不起作用，

路由脚本:

 var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource']);//定义主模块应用程序根.config(['$routeProvider', function ($routeProvider) {//设置路由以从服务器加载部分模板.TemplateUrl 是服务器视图(Razor .cshtml 视图)的位置$routeProvider.when('/home', { templateUrl: '/home/main', controller: 'HomeController' }) .otherwise({ redirectTo: '/home' });}]).controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {$scope.$on('$routeChangeSuccess', function (e, current, previous) {$scope.activeViewPath = $location.path();});}]);

Index.html:

 
<i class="fa fa-dashboard"></i><span>仪表板主页</span></a>
<div class="col-lg-9 main-chart" ng-view="">

项目结构:

解决方案

在 IIS 上运行时是否出现任何 JS 错误?

你在使用捆绑包吗?如果是这样，请检查问题是否由于缩小/捆绑创建添加而发生BundleTable.EnableOptimizations = true;在 RegisterBundles 方法中，然后在 VS 中重试.

否则我建议您在本地 IIS 上运行(右键单击项目，Web"选项卡，服务器"部分)并查看它是否正常工作.

根据您的路由，您应该 <base href="@Url.Content("~/")"/> 在模板头部并使用 $locationProvider.html5Mode(true); 关于路由配置.

如果以上都没有用，请在您的请求中添加更多详细信息.

祝你有美好的一天，

阿尔贝托

We are creating SPA technique using AngularJS in ASP.NET MVC framework,AngularJS routing between pages are working fine when it's run from VS2013,but after hosting the application in to IIS7.5 routing not working,

Routing Script:

   var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource']);     //Define the main module

    appRoot
        .config(['$routeProvider', function ($routeProvider) {
            //Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
            $routeProvider
                .when('/home', { templateUrl: '/home/main', controller: 'HomeController' }) .otherwise({ redirectTo: '/home' });
        }])
        .controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
            $scope.$on('$routeChangeSuccess', function (e, current, previous) {
                $scope.activeViewPath = $location.path();
            });
        }]);

Index.html:

 <li class="mt" data-ng-class="{active : activeViewPath==='/home'}">
                    <a href='#/home'>
                        <i class="fa fa-dashboard"></i>
                        <span>Dashboard Home</span>
                    </a>
                </li>


  <div class="col-lg-9 main-chart" ng-view="">
                </div>

Project Structure:

解决方案

do you get any JS error when you run it on IIS?

are you using bundles? If so check if the problem happens because of minification/bundle creation adding BundleTable.EnableOptimizations = true; in RegisterBundles method and trying again in VS.

Otherwise I suggest you to run on local IIS (right click on project, tab "Web",section "Servers") and see if it works correctly.

Depending of your routing you should <base href="@Url.Content("~/")" /> in template head and get rid of "#" from url using $locationProvider.html5Mode(true); on route configuration.

If none of the above are useful please add more details to your request.

Have a nice day,

Alberto

这篇关于站点托管到 IIS 后，AngularJS 路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！