2

I'm using pretty URLs routing with AngularJS, here is my angularJS code

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

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'static/home.html',
            controller: 'AppController'
        }).
        when('/about', {
            templateUrl: 'static/about.html',
            controller: 'AppController'
        }).
        when('/contact', {
            templateUrl: 'static/contact.html',
            controller: 'AppController'
        }).
        when('/tutorial', {
            templateUrl: 'static/tutorial.html',
            controller: 'AppController'
        }).
        otherwise({
            redirectTo: '/'
        });

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

app.controller('AppController', function ($scope) {

});

It works fine but when I navigate to the /about (or any url other than '/') and hit refresh, it show server couldn't find the resource error. I'm using ASP.NET 5. Is there any way to redirect to that page upon which user hit refresh after refresh?

scniro
  • 16,844
  • 8
  • 62
  • 106
Janshair Khan
  • 2,577
  • 4
  • 20
  • 44
  • There's no template url for '/about' , you have multiple ways of fixing it as you can see in the answers below. Perhaps you will find [ui-router](https://github.com/angular-ui/ui-router) useful. – mugabits Nov 06 '15 at 17:35

2 Answers2

1

You need to configure your server to return your main html file for any routes that match your angularjs routes. So your server should return /index.html or whatever your file is, for any requests to: /about, /tutorial, ... etc

Nicholas Hirras
  • 2,592
  • 2
  • 21
  • 28
1

Make sure you include the proper re-writes in your web.config

<system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Be sure to include the <base href="/"> (or otherwise applicable and if using >1.2.x) in your <head> as well. Eh? Why would we need that?

The following brief blog post is a decent write-up which breaks down in simple terms why we need to do this...

Deep Linking AngularJS on Windows Azure IIS

regarding ASP.NET 5, web.config is still supported but it should go into wwwroot folder. You may be missing Url Rewrite module for IIS.

scniro
  • 16,844
  • 8
  • 62
  • 106
  • Thanks for response. Actually I'm using ASP.NET 5. So web.config is replace by config.json. Can you please show me that JSON code of the web.config? – Janshair Khan Nov 06 '15 at 18:00
  • you should be find just adding a web.config file. Can you try and let me know if this works? Check out [this similar question](http://stackoverflow.com/questions/31187444/porting-a-web-config-to-aspnet5) – scniro Nov 06 '15 at 18:26
  • Sorry there is no option for web.config file in ASP.NET 5. It only supports config.json. – Janshair Khan Nov 06 '15 at 18:44
  • Did you try? Did you look at the question link I provided? Can't you just convert xml to json and paste it in if you're not going to try adding a `.config` file? – scniro Nov 06 '15 at 18:57
  • [see this](http://stackoverflow.com/a/30945604/1464112) Please let me know if this solves your issue – scniro Nov 06 '15 at 19:00
  • I can't find any conversion like that I've googled a lot. I'm sure that I'm confronting Web Server issue. But for now don't know how to do that in ASP.NET 5. The link you provided didn't sufficient. – Janshair Khan Nov 06 '15 at 19:19
  • Thanks bro you're a gentleman. I've found the solution which describes the same with the use of ASP.NET 5. http://stephenwalther.com/archive/2015/01/16/asp-net-5-and-angularjs-part-3-adding-client-routing – Janshair Khan Nov 06 '15 at 19:36
  • Thanks, actually I want to ask one question more. – Janshair Khan Nov 09 '15 at 15:01
  • It's then likely best to ask a totally new question – scniro Nov 09 '15 at 15:03