Learn

We know that AngularJS comes with a few built-in directives like ng-repeat and ng-click.

We’ve seen that AngularJS makes it possible to create your own custom directives, such as <app-info>.

We can use Angular’s built-in directives together with custom directives to create more readable apps.

For reference, here’s how to use ng-repeat:

<div ng-repeat="product in products">
  <img ng-src="{{ product.cover }}">
  <p class="title">{{ product.name }}</p>
</div>

Instructions

1.

In the controller, create a new property $scope.apps. Set it equal to an array of objects: 

[ 
  { 
    icon: 'img/move.jpg', 
    title: 'MOVE', 
    developer: 'MOVE, Inc.', 
    price: 0.99 
  }, 
  { 
    icon: 'img/shutterbugg.jpg', 
    title: 'Shutterbugg', 
    developer: 'Chico Dusty', 
    price: 2.99 
  } 
]
2.

Add two more objects to the array describing your favorite apps. Make sure to define the four properties for each app.

3.

In the view, use ng-repeat to loop through $scope.apps and display each element. To do this, add ng-repeat to a <div class="card">, and then use the custom directive <app-info> to display each element.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?