Angular

Today we'll be building an Angular application that uses everything we've learned thus far to hit an external API and render JSON data to the dom.

Find an external, open source API.

The goal of today's lab is to create a fully working Angular application that utilizes it's routing capabilities, as well as process data using multiple controllers. You can be as creative as you'd like, however I'll also supply you with some suggestions to help guide you along.

Feel free to google around for a free, open source, authentication-free (no key) api..I found a few suggestions here.

Part 1 Set Up Data.Police.Uk.

Data.Police.Uk is a free, open source API that houses loads of sorted information on their neighborhood events, arrests, offer biographies, etc..

1. Start by creating a new directory. You'll likely need an index.html or something to start, as well as an app.js file.
2. Flesh out some basic HTML format, and be sure to include both your app.js,, Angular itself (Google CDN?), and finally the Angular ngRoute module (which you can find here).
3. It's helpful to throw an h1 at the top of your page, with something like "My Application" just so you have some form of reference. Also, I always like to include the smallest navigation. For now, create just a "Home" a href link, to always return to /.
4. Additionally, you're going to want to link your Angular app to your app.js, so on the top html itself, include an ng-app tag, with the name of your application.
5. One last helpful tip, is setting the <base href>. This will help with your routes. So within your html, just above the body, set <base href="/">.
6. Finally, you'll be needing a server to spin this site locally, so make sure you have the simplehttpserver command working in your terminal. It should already be installed but if not, you can install it globally via npm here.

Part 2 Routing

In this suggested application, you'll want a few different routes. The index.html file we created above will act as our layout, and our routes will be rendered inside an ng-view div. But more on that soon...

1. In your app.js, set up your angular.module as you're used too, except instead of passing an empty array, be sure to pass in ngRoute.
2. Next create your first controller. Give it a name, and since we'll be using $http provider , don't forget to inject that. Let's assume this will be the main controller that makes a call to the API, and stores the returned data into a variable.
3. This part is up to you, but I went ahead and looked through the Data.Police.Uk api docs and found this endpoint to be interesting. Assuming the data was a success, I stored it in a variable. hint When you're storing it into a variable associated with this, be mindful of what this is referring too!.
4. Now, you'll want to set up some special routes, and define the controllers that act upon them. Using routeProvider, and locationProvider, set up your .config() so that when you hit the route '/', set the templateUrl to whatever file you want to render (in my case, I created a welcome.html file), set the controller to the controller we set up in part 2, and set controllerAs to the alias you'd like to use for the controller.
5. Before we continue, you'll want to set up the ng-view tag in your index.html. This is where your partials will render too. This is very similar to express-ejs-layouts. So in your index.html, set up something like <div ng-view> </div>, with intention that your soon to be created pages will rendered inside there.
6. If you haven't already, actually create the .html file you referenced in step 4 for the templateUrl (welcome.html), and neatly display all the data that you stored in your controller to the DOM. A possible solution would be to iterate over all the data, using ng-repeat and printing out all the values from the keys in the associated objects. Be mindful of the alias you set for your controller name!
7. In my suggested app idea, I took the category property, and turned it into a link, and also spit out the month, the location, the street, etc.. as list items. The link will then give us the ability to link to a new route, that displays the individual crime.

Part 3 Routing II

At this point, you should be able to spin up simplehttpserver, listen to port 8000, view your index.html, with (in my case..) welcome.html rendered inside my ng-view div. Nice!!

1. For the next few steps, I'll try to be less wordy and let you come up with a solution. I'd like to be able to click on the link we set up in step 6 above, and have it hit a new route that we haven't defined yet. This route will require the use of $routeParams, a service in the ngRoute module. So in other words, if we hit /show/:id, we can then store $routeParams.id inside a variable. This new route will likely render a new .html file we haven't created yet. This should all feel very familiar with routing we've done in Node & Express!
2. This route will also likely use a different controller.
3. Another neat trick is $index. When using ng-repeat, we're given a special {{$index}} tag that will give us the current index number found in the array you're iterating over. So when dynamically creating links within ng-repeat, we can assume the :id will actually be the place it's found in the array. So using ng-href, you can set an a tag link to hit /show/{{index}}.
4. Then in your new controller, you can save your data, and bracket in specifically to the [id] that you're grabbing from the $routeParams.
5. Wow-ee. Okay.

Part 4 Filters

1. On my main page, I want to be able to filter the results via an input text box. Some documentation this way...
2. You're obviously encouraged to implement more filters as see fit here.

Part 5 Moar API

1. Lets use Giphy again. When I view an individual show page (in my case, an individual crime), I want to also hit the giphy API, and have it render a giphy image based on one of the property values found in my crime object. Here's a link to that api here.

Part 6 Moar Routes + Refactor + Style

1. At this point, if you've gotten this far, experiment creating more routes that make different api calls to render different things, using different controllers.
2. Use Bootstrap, or your own fancy CSS skills to bring this baby to life.
3. Perhaps work in some better file organization.

Bonus

1. Look into Google Maps API, and go through the steps of accessing a public API key.
2. Using the Data.Police.UK API, render the exact point on the map where the crime occured, by accessing the longitute and lattitude properties found inside the object.

Be Creative. Have Fun. No Bad Days.