forum

Home / DeveloperSection / Forums / How to angular routing html5mode in ASP.NET?

How to angular routing html5mode in ASP.NET?

Tom Cruser514103-Nov-2014

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>
        <rulename="Imported Rule 1"stopProcessing="true">
          <matchurl="^index\.html"ignoreCase="false"/>
          <actiontype="None"/>
        </rule>
        <rulename="Imported Rule 2"stopProcessing="true">
          <matchurl="."ignoreCase="false"/>
          <conditions>
            <addinput="{REQUEST_FILENAME}"matchType="IsFile"ignoreCase="false"negate="true"/>
            <addinput="{REQUEST_FILENAME}"matchType="IsDirectory"ignoreCase="false"negate="true"/>
          </conditions>
          <actiontype="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

UncaughtSyntaxError:Unexpected token <

for every single library. What wrong? Thanks

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

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

Has to be:

<scripttype="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',


Updated on 03-Nov-2014

Can you answer this question?


Answer

1 Answers

Liked By