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.
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..
- Start by creating a new directory. You'll likely need an
index.html
or something to start, as well as anapp.js
file. - Flesh out some basic HTML format, and be sure to include both your
app.js,
, Angular itself (Google CDN?), and finally the AngularngRoute
module (which you can find here). - 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/
. - Additionally, you're going to want to link your Angular app to your
app.js
, so on the tophtml
itself, include anng-app
tag, with the name of your application. - 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="/">
. - 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.
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...
- In your
app.js
, set up yourangular.module
as you're used too, except instead of passing an empty array, be sure to pass inngRoute
. - 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. - 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 whatthis
is referring too!. - Now, you'll want to set up some special routes, and define the controllers that act upon them. Using
routeProvider
, andlocationProvider
, set up your.config()
so thatwhen
you hit the route '/', set thetemplateUrl
to whatever file you want to render (in my case, I created awelcome.html
file), set thecontroller
to the controller we set up in part 2, and setcontrollerAs
to the alias you'd like to use for the controller. - Before we continue, you'll want to set up the
ng-view
tag in yourindex.html
. This is where your partials will render too. This is very similar to express-ejs-layouts. So in yourindex.html
, set up something like<div ng-view> </div>
, with intention that your soon to be created pages will rendered inside there. - If you haven't already, actually create the
.html
file you referenced in step 4 for thetemplateUrl
(welcome.html
), and neatly display all thedata
that you stored in your controller to the DOM. A possible solution would be to iterate over all the data, usingng-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! - In my suggested app idea, I took the
category
property, and turned it into a link, and also spit out themonth
, thelocation
, thestreet
, etc.. as list items. The link will then give us the ability to link to a new route, that displays the individual crime.
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!!
- 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! - This route will also likely use a different controller.
- Another neat trick is
$index
. When usingng-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 withinng-repeat
, we can assume the:id
will actually be the place it's found in the array. So usingng-href
, you can set ana tag
link to hit/show/{{index}}
. - Then in your new controller, you can save your data, and bracket in specifically to the
[id]
that you're grabbing from the$routeParams
. - Wow-ee. Okay.
- On my main page, I want to be able to filter the results via an input text box. Some documentation this way...
- You're obviously encouraged to implement more filters as see fit here.
- 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.
- 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.
- Use Bootstrap, or your own fancy CSS skills to bring this baby to life.
- Perhaps work in some better file organization.
- Look into Google Maps API, and go through the steps of accessing a public API key.
- 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.