wdi-hk-11/lab-angular-directives

Angular Directives

Introduction

Pair programming lab! We're going to build something just like what we built together in the last lesson, but this time with a couple extra cherries on top.

Your mission is to build a tiny little Angular application together that tracks happiness – so you can keep a log of how you feel each day. Scientifically proven to average out your happiness over time.

Be creative with how you store the data, and if you have time, check out some of the bonus ideas.

Exercise

• Use ng-repeat to iterate over data
• Use ng-if & ng-hide/ng-show to hide & show elements
• Use ng-form to build forms

Bonus ideas

• Store a happiness rating along with the time that it was saved
• Write a function to calculate your average happiness rating
• Style it like a beast
• Find some clever uses for Angular directives we haven't used in class yet – there's a whole slew of documentation out there!

Deliverable

While yours certainly doesn't have to look like this, here's one example of a finished product. We're listing out happiness ratings on the top, and the user can click one of the three options below to update the list! This example uses some clever styling with radio buttons & labels to make it look fancy.

Additional Resources

• Angular Directives Docs
• Awesome Angular Directives cheatsheet