In this video tutorial, I add in an Ajax call using the AngularJS $http service to populate the album. It was really annoying [and impressive] that my dummy data was larger than the entire Javascript I used for the album.
You can grab the code here:
http://plnkr.co/edit/6JXEbyLhjdWefxSdn4pw?p=preview
If you have any technical questions check out the awesome mailing list here:
https://groups.google.com/forum/?fromgroups#!forum/angular
Really love the use of underscore to _.uniq(_.pluck( … )) to build unique list of categories. Don’t forget that $http supports promises: e.g.
return $http
.get()
.then( , );
The caller can also add their own response handles with another .then().
Also, the handleImagesLoaded() should be a private method in the Controller and NOT published on $scope. AngularJS allows $scope to only expose methods need to be called from the view layer. But the core methods in the controller can still be hidden/private.
Thanks Thomas! Great feedback!
Thanks for these tutorials! How would I put a new image in? Could you do this as a part 4 to the tutorial? I’m using these to build a blog, but I’m having some trouble figuring out how to get the $http.post working.
Excellent tut!. I have one question, though – I’m reading my data from a JSON file on the disk, however, when I modify the file and continue to navigate through my app, the changes aren’t reflected (even on route changes). The only way the app reads from the updated JSON file is when I reload the page. I am using $http({ method:’GET’, url:’data/cards.json’, cache:’false’, timeout:’8000′ }).success(..).error(…)
How do I get the changes to the JSON file to show up in my app without having to reload the page? If this is not possible, will this happen when I am fetching the data from, say, a PHP script that reads from a database and dynamically generates the JSON?
Thanks Kevin
Can you verify that your $http call is being made? What are the results?
Yes the call is being made. According to my network inspector, it says ‘data/cards.json’ GET 200 OK.
Hello again. I can confirm that if the JSON data comes from a dynamic script, the page does, in fact, update. I did a small test retrieving data from a PHP script and the data did change whenever the route was changed or refreshed. Apparently, the browser, not Angular, does some caching once the data source is a static file.
You should tell your YouTube audience this in case anyone is having the same issue.
Hi,
I wanted to checkout the photo album at http://jsfiddle.net/simpulton/t9gvU/ but got a 404/
Thanks for all of your terrific examples on Angularjs,
John
Hey John — sorry about that! Link is updated.
Thanks for the reply, the link now displays the code and I can test for the json data but no images display.
John
Yeah jsfiddle is great for illustrating a concept but it has some limitations. I will put the entire project in github as soon as I get a chance.
Thanks,