Configure Angularjs routing for Web API URL

Question

I have developed angularjs application and Asp.net Web Api. Both are hosted in port 80 of IIS server. The problem is I can not access web api URL because angularjs routing redirect API call to root of the application.

Angularjs Routing

.when('/home', {
    templateUrl: baseUrl + 'home.html',
       controller: 'homeCtrl'
    })
    .otherwise({
       redirectTo: '/' //Because of this web api call redirect to root of the web app 
    });

Can I configure the angular routing method for running Web Api requst as expected?

EDITED

I am using some rewite rules on my wb.conf

<rule name="RemoveTrailingSlash" stopProcessing="true">
                            <match url="(.*)/$" />
                            <conditions>
                              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                            </conditions>
                            <action type="Redirect" redirectType="Permanent" url="{R:1}" />
                          </rule>   

                          <rule name="HotelRedirectRulesLenon1" patternSyntax="ECMAScript" stopProcessing="true">
                            <match url=".*" />
                            <conditions logicalGrouping="MatchAny">
                              <add input="{HTTP_HOST}" pattern="^example.(com|net|com.au)$" />           
                            </conditions>
                            <action type="Redirect" url="http://www.example.org" />
                          </rule>
                          <rule name="HotelRedirectRulesLenon2" patternSyntax="ECMAScript" stopProcessing="true">
                            <match url=".*" />
                            <conditions logicalGrouping="MatchAny">            
                              <add input="{HTTP_HOST}" pattern="^www.example.(com.au)$" />
                            </conditions>
                            <action type="Redirect" url="http://www.example.org/{R:0}" />
                          </rule>       
                        <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>
                        <rule name="Prerender" stopProcessing="true">
                            <match url="^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent))(.*)" ignoreCase="false" />
                            <conditions logicalGrouping="MatchAny">
                                <add input="{HTTP_USER_AGENT}" pattern="baiduspider|facebookexternalhit|twitterbot" />
                                <add input="{QUERY_STRING}" pattern="_escaped_fragment_" ignoreCase="false" />
                            </conditions>
                            <action type="Rewrite" url="http://example/{R:2}" />
                        </rule>

Please post the configuration of your routing in your asp.net application. — Brocco
– Brocco, Commented May 11, 2015 at 13:37
@tpie I am trying to access my web api URL. Suppose my web app url is www.mywebapp.com. My web api url is www.mywebapp.com/webApi/getData — Janith Widarshana
– Janith Widarshana, Commented May 12, 2015 at 2:41

Janith Widarshana · Accepted Answer · 2015-07-17 11:37:59Z

1

Just by adding following new rewrite rule solve my problem.

<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="^/(webApi)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>

answered Jul 17, 2015 at 11:37

Janith Widarshana

3,53310 gold badges56 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Configure Angularjs routing for Web API URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related