Directives
Learn how to use directives to make standalone UI components.
Start
- 1Here’s an AngularJS app for a mobile app store: * In the controller MainController.js, there are three objects $scope.move, $scope.shutterbugg, and $scope.gameboard that each contain info about…
- 2What did we just do? We wrote code to teach the browser a new HTML element , and used it in the view to display each app’s details. First in js/directives/appInfo.js, we made a new _directive…
- 3Why is creating your own directives useful? 1. Readability. Directives let you write expressive HTML. Looking at index.html you can understand the app’s behavior just by reading the HTML. …
- 4We 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 . We can use An…
- 5Directives are a core feature of AngularJS. So far we’ve used custom directives to simply display static content, but they can do more than this. It’s possible to bake interactivity into directives…
- 6We used app.directive to create a new directive named ‘installApp’. * The directive contains the three options restrict, scope, and templateUrl that we saw before in the ‘appInfo’ directive. * It a…
- 7The template uses Angular’s built-in ng-click directive. When the button is clicked, ng-click will tell AngularJS to run the download() function in the directive. The download() function uses the …
- 8Well done! An “Install” button now shows up under each app. When you click the button, it changes to an “Uninstall” button. When you click it again, it changes back to an “Install” button. What ca…
What you'll create
Portfolio projects that showcase your new skills
Bolt Network 2
In this project, you'll add custom directives to your movie review board.
Gameboard
In this project, you'll create a custom directive that displays the score of a game.
Feedster
It's time to build fluency in AngularJS fundamentals. In this next Pro Project, we're going to practice directives in AngularJS so you can hone your skills and feel confident taking them to the real world. Why? Directives tell AngularJS's HTML compiler to attach a specified behavior to that DOM element, or even to transform the DOM element and its children. What's next? A newsfeed, directives, more Angular. You got this!
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory