Directives

Learn how to use directives to make standalone UI components.

Start[missing "en.views.course_landing_page.learn-angularjs.course_illustration" translation]
Directives
Lesson 1 of 1
  1. 1

    Here's an AngularJS app for a mobile app store: In the controller *MainController.js, there are three objects [...] , [...] , and [...] that each contain info about an app, like its title ...

  2. 2

    What 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 _dir...

  3. 3

    Why 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. ...

  4. 4

    We know that AngularJS comes with a few built-in directives like [...] and [...] . We've seen that AngularJS makes it possible to create your own custom directives, such as [...] . We can use...

  5. 5

    Directives 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...

  6. 6

    We used [...] to create a new directive named [...] . The directive contains the three options [...] , [...] , and [...] that we saw before in the [...] directive. It also contains a f...

  7. 7

    The template uses Angular's built-in [...] directive. When the button is clicked, [...] will tell AngularJS to run the [...] function in the directive. The [...] function uses the [...] ...

  8. 8

    Well 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

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Directives

Start[missing "en.views.course_landing_page.learn-angularjs.course_illustration" translation]