Book Image

AngularJS Web Application Development Blueprints

By : Vinci J Rufus
Book Image

AngularJS Web Application Development Blueprints

By: Vinci J Rufus

Overview of this book

If you are a web application developer interested in using AngularJS for a real-life project, then this book is for you. As a prerequisite, knowledge of JavaScript and HTML is expected, and a working knowledge of AngularJS is preferred.
Table of Contents (12 chapters)
11
Index

Displaying data from the JSON response


Now is the time to mark up the views to display the parsed data from our JSON output.

Let's open app/partials/movie-list.html and add the markup as follows:

<div class="pin-layout">
  <div ng-repeat="movie in movies">
    <div class="thumbnail">
       <h3 class="caption">{{movie.title}}</h3>
      <img width="180" ng-src="{{movie.posters.detailed}}" alt="{{movie.title}}">
        <p>{{movie.synopsis}}</p>
    </div>
  </div>
</div> 

This piece of code should be self-explanatory by now.

We have a wrapper div with a class named pin-layout; within it, we call another div with ng-repeat that will loop through each record of the movie model.

Within this, we will be displaying the movie title, poster image, and the critics' comments.

In case you would like to display additional data, you can do so by simply displaying the appropriate property name within the {{ }} brackets.

Tip

Refer to the Testing...