Does Angular need a web server to run? So would Angular work if I give browser a url of a local file?

Question

By this I mean I have read that Angular allows mock up data to be used so that RESTFul apis need not be wired up. I can think of a use case where a UX designer need only look a

Answer 1

As others have said, it's best to serve properly as http. However, there are other workarounds.

Some editors, like Brackets (click on the lightning bolt in the top right corner while in a file), can serve the code to your browser properly. For others there might be plugins that do it.

Update: My suggestion below worked well enough for AngularJS 1, but just FYI is insufficient for Angular 2. Also see Disable same origin policy in Chrome

Further, if you're on Chrome you can run it with flags, which means you add some stuff at behind the .exe part of the path on a short cut; options if you will. Specifically you'd want:

--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt

That makes it not throw errors when trying to access files from various origins. There was a plugin for that once, but I couldn't get it to work. Note there's security reaosns why this isn't the default, so maybe don't put it on your main short cut that you use all the time for surfing... - Use at own risk.

Answer 2

So, the way I've done this is to create a temp service and just load that instead of from a url/file.

Example:

//tempUser.js
angular.module("app").constant("tempUser", {
    firstname : "Joe",
    lastname : "Smith"
});

//userService.js
angular.module("app").factory("userService", function ($q, tempUser) {
    return {
        load : load
    };

    function load(id) {
        //TODO: finish impl
        return $q.when(tempUser);
    }
});

This way the controller can still work as if you were loading from a web service.

angular.module("app").controller("UserDetailCtrl", function (userService) {
    userService.load().then(function (user) {
        $scope.user = user;
    });
});

Answer 3

Yes you can run a local file, but if you need data off a server, the browser should block it, depending on what version and type of browser you are running.

Here is the official Angularjs Tutorial explanation under the PhoneCat Tutorial App: Running the Development Web Server

While Angular applications are purely client-side code, and it is possible to open them in a web browser directly from the file system, it is better to serve them from an HTTP web server. In particular, for security reasons, most modern browsers will not allow JavaScript to make server requests if the page is loaded directly from the file system.

Answer 4

You cannot just access an angular application by the filepath on the local machine because you will get cross origin domain errors.

The solution is to install http-server (which requires node.js to be installed). This allows you to create a http-server local to your machine and will allow you to access the Angular application as if it were hosted online for development and test purposes.

Answer 5

If you need to just display data using an expression like {{mymessage}} inside a div, you don't need a web server.

But if you need to load template html files uing ngview, you need a web server- otherwise it will complain with following error.

Request cannot load file. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

If laoding templates is needed for learning angularjs routing, I found a web server exe easy to use - HFS. So far it meets my requirements for learning AngularJS.

References

1. HFS:Introduction
2. HTTP File Server