Hi, I have an Angular.JS application that runs perfectly inside of IISExpress on my development machine. When i move the application to the IIS server it has to reside in a folder so it is accessed via http://servername/foldername
At this point all routing works UNTIL I hit refresh on a page. At that point all JS and CSS files are lost because of the pathing. If I am at http://servername/foldername/parties/123993 and I hit refresh, the console says it was trying to find the files at http://servername/foldername/parties/css or http://servername/foldername/parties/js and obviously that is incorrect. Here is my index.html page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"; ng-app="JBenchApp"> <head> <title>Judicial Workbench</title> <link href="../css/bootstrap.css" rel="stylesheet" /> <link href="../css/styles.css" rel="stylesheet" /> <link rel="stylesheet" href="../css/jquery-ui.css"> <script src="../js/jquery-2.1.4.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <script src="../js/angular.min.js"></script> <script src="../js/angular-route.min.js"></script> <script src="../js/app.js"></script> <script src="../js/controllers.js"></script> <script src="../js/angular-bootstrap-select.js"></script> <script src="../js/directives.js"></script> <script src="../js/bootstrap.js"></script> <!-- <script src="js/bootstrap-datepicker.js"></script> <link href="css/bootstrap-datepicker.css" rel="stylesheet" /> --> <base href="/jwb/" /> </head> <body ng-controller="JBenchCtrl"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid black-back"> <div class="navbar-header"> <a class="navbar-brand" href="#">Judicial Workbench</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="calendar">Calendar</a></li> </ul> <div class="pull-right" ng-show="!loggedin"> <input type="text" name="userName" placeholder="Username" class="login-area" /> <input type="password" name="userPassword" placeholder="Password" class="login-area" /> <button class="btn btn-primary" type="submit" ng-click="isLoggedIn();"> Login </button> </div> <div class="pull-right white" ng-show="loggedin"> <span>Welcome, Judge Mahony!</span> <ul class="nav navbar-nav navbar-right white"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search search"></span></a> <ul class="dropdown-menu" role="menu"> <li> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default btn-block submitBtn">Submit</button> </form> </li> </ul> </li> </ul> <a href="#"><span class="glyphicon glyphicon-cog white settings"></span></a> </div> </div> </nav> <div class="container-fluid"> <div ng-view class="view-frame"> <!-- Location for partial views to be displayed--> </div> </div> </body> </html> As you will see, the <base href="/jwb/" /> is set that way because "jwb" is the foldername on the server. Here is my routing for the application: 'use strict'; var JBenchApp = angular.module('JBenchApp', [ 'ngRoute' ]); JBenchApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider. when('/dashboard', { templateUrl: 'partials/dashboard.html', controller: 'JBenchCtrl' }). when('/calendar', { templateUrl: 'partials/calendar.html', controller: 'JBenchCtrl' }). when('/', { templateUrl: 'partials/calendar.html', controller: 'JBenchCtrl' }). when('/documents/:number', { templateUrl: 'partials/documents.html', controller: 'CaseDetailCtrl' }). when('/parties/:number', { templateUrl: 'partials/parties.html', controller: 'CaseDetailCtrl' }). otherwise({ redirectTo: '/calendar' }); $locationProvider.html5Mode(true); }]); Next, here is my web.config information: <?xml version="1.0" encoding="utf-8"?> <!-- For more information on how to configure your ASP.NET application, please visit http://go.microsoft.com/fwlink/?LinkId=169433 --> <configuration> <appSettings> <add key="webpages:Version" value="3.0.0.0"/> <add key="webpages:Enabled" value="false"/> <add key="PreserveLoginUrl" value="true"/> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings> <system.web> <compilation debug="true" targetFramework="4.5"/> <httpRuntime targetFramework="4.5"/> <pages> <namespaces> <!--<add namespace="System.Web.Helpers"/> <add namespace="System.Web.Mvc"/> <add namespace="System.Web.Mvc.Ajax"/> <add namespace="System.Web.Mvc.Html"/>--> <add namespace="System.Web.Routing"/> <add namespace="System.Web.WebPages"/> </namespaces> </pages> </system.web> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <handlers> <remove name="ExtensionlessUrlHandler-Integrated-4.0"/> <remove name="OPTIONSVerbHandler"/> <remove name="TRACEVerbHandler"/> <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/> </handlers> <rewrite> <rules> <rule name="Main Rule" stopProcessing="true"> <match url=".*"/> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/> </conditions> <action type="Rewrite" url="index.html"/> </rule> </rules> </rewrite> </system.webServer> <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="Newtonsoft.Json" culture="neutral" publicKeyToken="30ad4fe6b2a6aeed"/> <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0"/> </dependentAssembly> <dependentAssembly> <assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35"/> <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="1.1.0.0"/> </dependentAssembly> <dependentAssembly> <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35"/> <bindingRedirect oldVersion="0.0.0.0-1.5.2.14234" newVersion="1.5.2.14234"/> </dependentAssembly> </assemblyBinding> </runtime> </configuration> I have tried changing the path to the CSS and JS so that they look like this: <link href="./css/bootstrap.css" rel="stylesheet" /> or even this <link href="/css/bootstrap.css" rel="stylesheet" /> or even this <link href="css/bootstrap.css" rel="stylesheet" /> But none of that works right. How do I make this work? What am I missing here? Thanks! Mike -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
