Custom & External Angular Directives

Objectives
Make your own custom Angular directives
Add external Angular directives to your project

Challenges

Base Challenges

  1. Make a new Angular app, and add the currentWeather directive</a> from the Angular Directives reading.

  2. Pull out the template into a different file and use the templateUrl option.

  3. Improve the template and show more information from inside the weather JSON.

  4. Add the angular-validation-match</a> directive to validate that a password field matches a password confirmation field. Hint: Add the source file to your app, then link to it using a <script> tag in your index.html. You'll also need to add 'validation.match' as a dependency in your Angular app.

  5. Add the ngMap</a> directive to display a map in your app centered on SF. Hint: This blog post has some very helpful examples.

Evening Challenges

  1. Create a directive called five-day-forecast that fetches and displays the five day forecast from the openweathermap api.

  2. Add the angular-moment directive to show a date and time in your app that ticks down by the second.

  3. Find and implement an edit-in-place directive.

  4. Come up with an idea for a custom directive and implement it. For a bonus, use an external API like the weather example above.