HOW TO ANGULAR ROUTING HTML5MODE IN ASP.NET?

Tom Cruser

Total Post:28

Points:196
Posted by  Tom Cruser
 3640  View(s)
Ratings:
Rate this:

I have an angularjs app which based on ASP.NET project, it uses html5mode and works perfectly fine unless I want pass route parameter(s).

Angular routing:

$locationProvider.html5Mode(true);

 

    $routeProvider.when('/accounts', {

        templateUrl: 'templates/accounts.html',

        controller: 'accountsCtrl',

        title: 'Accounts',

        resolve: {

            accounts: function (accountData) {

                return accountData.getAll();

            }

        }

    });

 

    $routeProvider.when('/account/:accId', {

        templateUrl: 'templates/editAccount.html',

        controller: 'editAccountCtrl',

        title: 'Account',

        resolve: {

            account: function ($route, accountData) {

                return accountData.get($route.current.pathParams.accId);

            }

        }

    });

web.config:

<system.webServer>

    <rewrite>

      <rules>

        <rule name="Imported Rule 1" stopProcessing="true">

          <match url="^index\.html" ignoreCase="false" />

          <action type="None" />

        </rule>

        <rule name="Imported Rule 2" stopProcessing="true">

          <match url="." ignoreCase="false" />

          <conditions>

            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />

            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />

          </conditions>

          <action type="Rewrite" url="/index.html" />

 

        </rule>

      </rules>

    </rewrite>

  </system.webServer>

Rout localhost:3849/accounts - works, but localhost:3849/account/1 breaks the system, it looks like it fail to load *.js libraries or any other resources.

console shows

Uncaught SyntaxError: Unexpected token <

for every single library. What wrong? Thanks

UPDATE The problem was how scripts referenced in the index.html. Original was:

<script type="text/javascript" src="Scripts/angular.min.js"></script>

Has to be:

<script type="text/javascript" src="/Scripts/angular.min.js"></script>

so when I asked server to go to localhost:3849/account/1 it started to look all files at localhost:3849/account, didn't find them and returned index.html. The same problem in routing, instead of

templateUrl: 'templates/editAccount.html',

must be:

templateUrl: '/templates/editAccount.html',

  1. Sanjay Sharma

    Post:45

    Points:315
    Re: How to angular routing html5mode in ASP.NET?

    Try this instead (you may need to tweak the path to index.html):

    <?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=301880
      -->
    <configuration>
    
      <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" />
            </conditions>
            <action type="Rewrite" url="../index.html" />
          </rule>
        </rules>
      </rewrite>
    
    </system.webServer>
    
    
    </configuration>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!