S Meaden S Meaden - 5 months ago 25
AngularJS Question

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

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 at the cosmetics and need not hook up to a web server. I can think of other use cases as well.

So would Angular work is I give browser a url of a local file like C:\temp\index.html and the js files are either at c:\temp or say c:\temp\js.

So actually, I tried it, here is all in one application file (I know it should be separated)

<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-controller="myNoteCtrl">

<h2>My Note</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

<script >
// was in separate file but pasted in for demo purposes
var app = angular.module("myNoteApp", []);

</script>
<script >
// was in separate file but pasted in for demo purposes
app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved:" + $scope.message);};
});
</script>
</body>
</html>


The results are, it works in Chrome and Firefox no problems, IE blocks content initially but one can allow it run.

Thanks to replies. I will probably delete this question because people have downvoted it. I actually think this is useful finding but hey the community knows best.

Answer

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;
    });
});
Comments