#Angular Directives
Directives are great for making portable/reusable modules. Once you create a directive, it can be used across many potential projects. In the starter code, we've provided an app setup with a sample directive. Let's create, test, and display two additiona directives.
####Like button
Create a like button directive with a counter. When loaded in to a page, there should be a button that says "like". When you click the button, the counter should go up by 1. For the purposes of this assignment, allow a single user to click the like button as much as they want so each click will increase the number displayed on the button by 1.
The button should have 1 optional parameter starting-value
which will set the starting value of the like button. If ommitted the values should start at 0.
Usage
<like-button starting-value="5"></like-button>
The above code should add a like button to the page which will display "Likes: 5". When clicked it would update to "Likes: 6" and so on...
Additionally, you should be able to have multiple like buttons on a single page that each keep their own separate count.
<like-button></like-button>
<like-button starting-value="1"></like-button>
<like-button starting-value="3"></like-button>
####Weather
We will create a widget that will display the current weather. Using $http
to send a call to openweathermap.org.
Usage
<weather location="Seattle,WA"></weather>
The above code should load the current weather conditions for Seattle, WA. You should be able to include different locations.
API URL
http://api.openweathermap.org/data/2.5/weather?q=Seattle,wa
Note that you'll need an API key to access this API. For this assignment, you can hardcode the key into the URL.
####Bonus
Dynamic Model
Add an ng-location parameter in the <weather>
directive that can be bound to a scope variable. Test this by creating a text box where the user can enter a location and have the weather update dynamically.
GPS
Use html5 geolocation to make the <weather>
directive load the current weather based on the users current location ONLY if location and ng-location are ommitted. the location and ng-location parameters should still work.
<!-- Displays weather for Seattle, WA -->
<weather location="Seattle,WA"></weather>
<!-- Displays weather for the value of $scope.location -->
<weather ng-location="location"></weather>
<!-- Displays weather for users current location -->
<weather></weather>