Learn
Directives
Built-in and Custom Directives

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.

Folder Icon

Take this course for free

Already have an account?