angularjs ng-template单​​独的文件没有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?

Answer 1

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.

Answer 2

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.