Tutorial 5: AngularJS Complex Models

So far we have been working with really simple model and module (check tutorial 3) in which we made a simple MODULE (module is different from model – check last tutorial 4) which had a controller and inside that controller we had model holding some data. In this tutorial we will be switching to more realistic application using AngularJS complex models i.e Guitar Store Application in AngularJS. For this we will be looking into angularjs complex models. Complex Models is Complex way of organizing your code which means you split up work to some another JSON file but for now we will be working on simple JSON data. In the next tutorial we shall be looking at Services then we shall be working with other JSON file. This tutorial is connected with next tutorial. Enough talking lets do it. We shall be getting data (JSON) from a controllers.js file and displaying that using loop and will also take a look at adding style to it. Before starting work on Complex models in AngularJS you need to have some NEW files in your project and Organize these files like this:

(if you are following along previous tutorials) otherwise you download complete files setup CLICK HERE.

  1. Open index.html and add following code (if you’ve downloaded complete code you already have following, don’t repeat):
    Code Explanation

    • ng-app=”GuitarApp” is name of our App Module i.e Module to be loaded when html starts reading content of AngularJS.
    • style.css is link to style sheet and controllers.js is link to JS file.
    • ng-controller=”GuitarFunction” is name of controller inside our module.
    • ng-repeat=”item in guitarVariable” item is reference to our variable is in controllers.js holding data and ng-repeat directive is like a loop that iterates in guitarVariable till model data is totally read starting from first item to last item in data.json.
    • ng-src means do not load images until angularJS loading is done otherwise it may throw error if you use simple src.
    • {{item.image}}, {{item.name}}, {{item.description}} are accessing model data using item reference to guitarVariable
  2. Open Controllers.js file you made in previous tutorial or you can download fresh file here or you can create new controllers.js file and add the following code to it:
    Code Explanation

    • GuitarApp is name of module which MUST be same in index.html > ng-app=”GuitarApp”
    • GuitarFunction is controller name i.e function/li>
    • guitarVariable is model holding JSON data which is the same in data.json file (we will get data from it in next tutorial)

Download Complete Code So far, we showed JSON data from controllers.js to index.html and used a style sheet for better styling. pretty simple. This is how it should look like when you run it in browser (Try running it in Firefox).
Next we shall see how we can get data from a JSON file. keep this file and folder hierarchy setting it will be used for next tutorials.

Hope you like it. Please share my work.

Previous-Chapter-Buttonnext-AngularJS MVC