Routing doesn't work in client-side-only apps

[Randgalt]

I'm writing a client-side-only app - i.e. the app runs completely on the client and is not hosted through a server. Angular routing assumes an http connection and tries to load views via http. This generates exceptions. You can see this by opening angular-seed/app/index.html in a browser. In Chrome, I get:

MLHttpRequest cannot load file:///path/angular-seed/app/partials/partial1.html. Cross origin requests are only supported for HTTP. index.html:1
Error: A network error occurred.
    at file:///path/angular-seed/app/lib/angular/angular.js:8113:11
    at sendReq (file:///path/angular-seed/app/lib/angular/angular.js:7915:9)
    at $http.serverRequest (file:///path/angular-seed/app/lib/angular/angular.js:7655:16)
    at wrappedCallback (file:///path/angular-seed/app/lib/angular/angular.js:11046:81)
    at wrappedCallback (file:///path/angular-seed/app/lib/angular/angular.js:11046:81)
    at file:///path/angular-seed/app/lib/angular/angular.js:11132:26
    at Scope.$eval (file:///path/angular-seed/app/lib/angular/angular.js:12075:28)
    at Scope.$digest (file:///path/angular-seed/app/lib/angular/angular.js:11903:31)
    at Scope.$apply (file:///path/angular-seed/app/lib/angular/angular.js:12179:24)
    at file:///path/angular-seed/app/lib/angular/angular.js:1341:15 angular.js:9509
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. angular.js:2666
XMLHttpRequest cannot load file:///path/angular-seed/app/partials/partial2.html. Cross origin requests are only supported for HTTP. angular.js:8113
Error: A network error occurred.
    at file:///path/angular-seed/app/lib/angular/angular.js:8113:11
    at sendReq (file:///path/angular-seed/app/lib/angular/angular.js:7915:9)
    at $http.serverRequest (file:///path/angular-seed/app/lib/angular/angular.js:7655:16)
    at wrappedCallback (file:///path/angular-seed/app/lib/angular/angular.js:11046:81)
    at wrappedCallback (file:///path/angular-seed/app/lib/angular/angular.js:11046:81)
    at file:///path/angular-seed/app/lib/angular/angular.js:11132:26
    at Scope.$eval (file:///path/angular-seed/app/lib/angular/angular.js:12075:28)
    at Scope.$digest (file:///path/angular-seed/app/lib/angular/angular.js:11903:31)
    at Scope.$apply (file:///path/angular-seed/app/lib/angular/angular.js:12179:24)
    at HTMLHtmlElement.<anonymous> (file:///path/angular-seed/app/lib/angular/angular.js:9298:22) angular.js:9509

[caitp]

This isn't something angular can really help you with (I mean yeah, we could probably do something with the new File API to get around this, but it's not likely to happen). You can use things like Phonegap or similar for the most common use case (which is mobile apps), but on modern desktop browsers, unless you start them with flags, you're going to have to deal with CORS. (If you're only debugging an app locally without a server, but intend to use a server in production, you could simply use Chrome with the --disable-web-security flag to get around this)

[SekibOmazic]

Start your chrome with --allow-file-access-from-files flag or put your template in index.html like this:

<script type="text/ng-template" id="partial1.html"> content of partial1 </script>

The script element must be somewhere after the ng-app.

[SekibOmazic]

Sorry. Next try:

Start your chrome with --allow-file-access-from-files flag or put your template in index.html like this:
<script type="text/ng-template" id="p1.html">
This is the content of the template
</script>

The script element must be somewhere after the ng-app.

[Randgalt]

Thanks @SekibOmazic - that worked.