What kind of loading JSON to AngularJS is better?

Question

I am new in Angular. I have web application with search engine in AngularJS. I prepare JSON in backend (PHP) and then I use it in my Angular apps.

I'm curious what kind of loading JSON to AngularJS is better and why?

Now I create JSON in Controller and then I display it in my view in <script> tag:

<script>
var json = [json_variable]
</script>

JS files I attach to my project at the end of DOM document, so everything is fine.

In AngularJS I load this variable via fromJson method

$scope.hotels = angular.fromJson(json);

This method is wrong? If so, why? Then I use this JSON to display items in ng-repeat.

Should I create separate controler in backend with own URL and prepare JSON there? Then, load JSON via AJAX and http request in AngularJS?

you can get your static .json file also with a get request .. pointing to it .. — federico scamuzzi, Dec 29 '16 at 10:53
I'd to know which method is better and why? I dont have static .json file. I generate it in PHP — K. Maliszewski, Dec 29 '16 at 11:00
ah so ... use $http.get .. or better (for me) use angular-resource (ngResource) https://docs.angularjs.org/api/ngResource/service/$resource — federico scamuzzi, Dec 29 '16 at 11:02
First isn't Angular way. It takes data from outside Angular world. so your model couldn't recognized. — ian park, Dec 29 '16 at 11:05

score 1 · Answer 1 · answered Dec 29 '16 at 11:13

First strategy makes global variable 'json'.

It remaines memory until window closed or deleted explicitly. It's bad thing. Don't make global variables. It has main portion of spagetti code. there is no context over there. If you change some 'ng-model value', view doesn't changed. virw doesn't know about that.

You should load data in angular context.

$http.get('path/to/json')
  .then(function (res) {
      // do something is here
      // parse json or change model
   });

If your server follow REST API, angular-resource is also good way.

I save json from "var json" as $scope.hotels, so model know about all changes. Then i don't use var json, but $scope.hotels. Argument about memory is important, so it's any reason to use $http, thanks for the info — K. Maliszewski, Dec 29 '16 at 11:25

score 1 · Accepted Answer · edited May 23 '17 at 11:46

So the most correct way if any would probably be to make a http request in the controller, but what you are trying has its advantages, the comments have been kind of one one-sided so let me give another perspective.

Http request
If you get the data with http request there will be some time between the window is loaded and data request is complete. This will make the view to grow and you need to handle loading. In the matter of time there is a bit of overhead with a extra http request for data, but it's not noticeable. The worst part about this approach in my experience is SEO. Google should reportedly be able to handle javascript (Source) but I have some sites where this is not the case.
The best argument for this approach is that is the angular way and it's super easy at almost no cost, it can even be done asynchronous and gives the user a feeling of a fast loading page!

JSON served in view
Let me first start with some advantages. First, when the view is loaded the data is ready, which can be achieved in a more angular way as well but for the matter of the point, this is a gain. Another positive thing is the optimization with tour database. In some situation you have a connection open to your database, which can be used for getting the JSON data when you allready at it. If the initial load of data is heavy like above 2-3 seconds, I have had trouble with google crawler not "waiting" for the data. A great/bad thing is that your page will load slower, it will not grow, the data will seem instant to the user. This point is a matter of style your site is aiming for. Another usecase which is why I've used it occasionally is to get your CMS content nodes into your angular. Ex to make a extremely fast language change (very slim use-case). The problems: It's not the angular way (when I say this, I mean, there is not much help on the web and your code will seem confusing to outsiders) and it's much harder. So you should not do as you suggest with:

<script>
   var json = [json_variable]
</script>

Don't save it as a global variable and you get some timing issues. You can't be sure if the script is loaded before the controller and if the controller is depending on the value you have timing issues. Extra you make yourself depended on jQuery to load the script, you can get around this problem but it's alot of internet searching and extra code. You could use ngInit to solve this like:

<div ng-init="controllersInitFunction(json)">
  ...
</div>

Angular would understand the object and you can control the timing.

I just wanted to say it's not all clear as the others might have stated. I my self use the angular way, because it's just way easier and introducing a new developer doesn't make him too confused, but it's not the only way.

Sry for the wall of text.

What kind of loading JSON to AngularJS is better?

2 Answers2