Let's build a mobile application with Ionic Framework #4

Afrer getting json data with http service, now we'r gone display it !

Before anything, we need to know what's a $scope variable ? 

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.( AngularJS Doc)

basically each scope is a reference to a model in a controller  , except for the case of rootScope 

because it is present in all controllers .

NB : to use scope / rootScope we must inject it into the controller

 $http.get("data.json")

    .then(function(response) {

        $scope.books = response.data;

        console.log(response.data)

    });

We are storing in $scope.books variable to be able to be able to use it in the view

NB : the responce object is inside data attribut that's what we storing   response.data instead responce

After declaring our scope variable now we can use it to display book list ,but How ? 

AngularJS has amazing thing ng-repeat it to iterate a json object ou an array without doing for 

statments

We are listing books variable to book (foreach books as book) then to display specifc variable we just write it between {{ }} , it could more easier then this  ? i guess not..

<div ng-repeat="book in books">

  

  <div class="item item-avatar">

  

    <h2>{{ book.Book.title }}</h2>

    <p>{{  book.Artist.name }}</p>

  </div>

  <a class="item item-icon-left assertive" href="#">

    <i class="icon ion-music-note"></i>

    Play

  </a>

</div>

</div>