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:

Complex Model AngularJS (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). AngularJS Complex Models 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


  1. how to read php service and include result in this step:


    nameSpace.controller(“GuitarFunction”, function GuitarFunction($scope)
    // how to read php service in this step

  2. Download from OneDrive doesn’t seem to be working.

    (edited a few minutes later): Ah, scratch that. I had to save it first. Some sort of 7-Zip issue. Wish I could delete this comment.

  3. hey hafiz, it’s a great tutorial! keep it up your good work, sir. god bless!

  4. Hi Hfarazm,
    this is very good blog. but how we can consume wcf rest service in angular js

  5. when i am using url to fetch the data it is showing error:

    No ‘Access-Control-Allow-Origin

  6. First of all the tutorials are awesome.
    I have an issue with Jade while working with the image example above.
    Below is the code. (Also the image path and the image names are given correctly as input.)

    div(ng-controller = “itemsInfo”)
    li(ng-repeat = “item in items”)
    img(ng-src = “images/{{item.image}}.png”)
    h2 {{item.name}}
    h3 {{item.description}}

    Error is “img is self closing and should not have content.”
    Please let me know if you have any idea about this one.

      1. I have gone through the SO question before while I was trying to solve this issue. Anyways thanks for the response.
        Keep up the good work.

Leave a Comment