angularjs ng-template separate file no webserver

Question

So I'm trying to create an app that needs no webserver with AngularJS

I'm using <script type="text/ng-template" id="loginView.html" src="views/login.html"></script> tags to use separate templates and keep things clean.

I wire the thing up in:

app.config(function($routeProvider, $locationProvider){
    $locationProvider.hashPrefix("!");
    $locationProvider.html5Mode(false);

    $routeProvider
        .when("/", {
            templateUrl: "loginView.html",
            controller: "LoginCtrl"
        })
        .when("/main", {
            template: "main",
            controller:"MainCtrl.html"
        })
        .otherwise({
            redirectTo: "/"
        });
});

My files are not loading. If I put context inside the script tag I can see it. I have an ng-view to contains the views. But I can't seem to get content from separate files. No errors are given. Is this possible without a webserver?

That looks equivalent to just templateUrl:"views/login.html", I think you only use the script tag to contain html for an inline template, so no "src". http://docs.angularjs.org/api/ng.directive:script — Dylan, Jan 13 '14 at 23:03

Dalibor Mesarić · Answer 1 · 2014-01-13T22:25:31.090

2

Try using <div ng-view /> instead of your script. You can fetch the template just from your file system, you don't need to be on a web server.

edited Jan 13 '14 at 22:25

answered Jan 13 '14 at 22:17

Dalibor Mesarić

45
1
5

I don't really think that's the answer. Do you have a jsfiddle or so to prove it ;) – user1613512 Jan 14 '14 at 08:10

score 0 · Answer 2 · answered Jan 13 '14 at 22:26

0

Where are you putting those script tags? In the HTML? I don't even know that a script tag like that will do what you expect it to, angular or otherwise, but it isn't necessary. The call you make to $routeProvider.when is sufficient to load the HTML templates. You WILL have to reverse the parameters for your /main route though, as you seem to have the template/templateUrl and controller reversed. Use templateUrl there though. template is for raw HTML.

answered Jan 13 '14 at 22:26

citizenslave

1,408
13
25

This won't work without a webserver. Did you try it yourself? Caus I did and it gave errors because of the file:/// scheme. – user1613512 Jan 14 '14 at 08:13
OK, I'm still fairly new to Angular, so I was not familiar with [this](http://docs.angularjs.org/api/ng.directive:script) syntax. It still looks like the code for your `/main` route is wrong. If you're importing it using the same Angular script directive, you want to use `templateUrl` still and make sure you're setting the right value to the right key. Dylan is also correct based on the information from the angular link. You have to put the raw template HTML inside the script tag, not try to load it using a `src` attribute. It is an Angular directive, not HTML. Angular may not check src. – citizenslave Jan 14 '14 at 16:15
[This link](http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file) may also help you get around your file system limitation. It is a browser "feature" to disallow XHRs to `file://`. Running Chrome with `--disable-web-security` will let you do the XHRs to `file://` and then you can use `templateUrl` normally instead of routing through a `script` directive. – citizenslave Jan 14 '14 at 16:26
thanks, that made things clear. I'm a bit anxious on the security and it's not that user friendly to start chrome that way and force users to use chrome. Although that would a world where every developer is happy one. Guess there is no way around than to place the views inside the script directives – user1613512 Jan 14 '14 at 20:04
There are several very lightweight web servers you could run and access through localhost also. There are also other ways to get an html snippet into your code. I ran across a few options on [this thread](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file). – citizenslave Jan 14 '14 at 20:46
[This one](http://stackoverflow.com/a/16108864/3191645) in particular works almost exactly how you want using a similar syntax. The only change you'd need, I think, would be to set `template` to `document.getElementById('rootElementId').innerHTML` instead of setting the `templateUrl`. Might even be able to get the best of both worlds by nesting your `object` tag inside of the Angular `script` directive. – citizenslave Jan 14 '14 at 20:53

angularjs ng-template separate file no webserver

2 Answers2