 Hello, my name is Matt Ravel and this is a demonstration of how to create a Spring Boot RESTful API and an Angular UI that talks to it. You'll need a few prerequisites to begin, Java 8 as well as a recent version of Node, and we're going to basically create a beer API. The beer API is going to bring back a list of beers as well as give us the ability to bring back a list of good beers. And so we'll start with start.spring.io, one of the happiest places on the internet for a developer because if you're here, chances are you're creating a new application and Greenfield development is always fun, or you're doing a demonstration like this one, which isn't so bad either. So we'll need a database to begin, H2, we'll need JPA to talk to it. We also like REST repositories, which allows you to expose your Spring data repositories over REST, and we'll need Web as well, and DevTools. DevTools allows you to recompile your classes and it will restart your Spring Boot application without you actually having to restart it. So then we'll generate a project from that. You'll see we get this demo.zip, that's in a downloads directory, and we can unzip. And then we'll also create a project folder that contains both of our projects. So in the home directory, we'll do mictr, spring boot, angular, example, and we'll copy from downloads into this directory, and we'll call it server. So we can open this up in IntelliJ, and then you'll see by default the real meat of the project is in this pom.xml, it has all the dependencies in there, and basically simplifies how you can pull in dependencies. You don't have to specify all the hibernate dependencies for JPA, you just specify starter JPA, and then it's got AOP JDBC, hibernate entity manager, and all that kind of stuff in there. And in the main Java directory, it's just got a demo application, not much else. So we'll go ahead and create a beer package, we'll create a beer entity in it. So you see here is just a normal JPA entity, getters and setters, and a two string method. And I'll create a beer repository to persist the entity. You'll see that extends from JPA repository, JPA gives us a bunch of finder methods, save, delete, get one, find all. So that gives you crud on your beer entity without having to write a whole lot of code. The next thing we'll need is a way of populating our database. So we'll do that with a command line runner. You'll see here, this pulls in our repository, uses spring 4.3's automatic dependency injection without needing auto-wired or inject. And then it has this run method that it overrides to print out all the data in there. Since we don't have any data, we need to add some. So we'll have a list of beers, not only the top beers from beeradvocate.com, you can see the list here. The reason I'm not including the fifth, Pliny the Younger, is because when we bring back images from Giffy, the keyword Younger brings back an interesting one. So I'm not going to do that in this demo. We also have a couple less than great beers, Budweiser, Coorslite, and PBR. If you think those are great, I'm sorry, but I think the top ones are better. So if we start this application, we should see that list of beers printed out. Okay, so that's working now. Now we need to actually have a list or a REST API. So we can do that with REST repository or REST resource. We compile this class. We can open this up in our browser. You can see it lists all those as REST endpoints. And it does this with HadiOS, which allows us to very easily get the HREF instead of hard coding IDs and doing all of the work in our client. But this isn't very client-friendly because they have to know about embedded, they have to know about links. So let's clean that up and make a good beers API. So we'll have a beer controller, and it basically uses that repository again, but also has the default mapping, which will change to good beers, and it lists all the repositories. Well, we want to do more of a good beers thing. So let's do this kind of mapping, take that one out. And this maps to good beers, and you can see it finds all of them, and then filters out the ones that aren't great, and then puts the ID and the name into a hash map, and then returns everything as a list. So now if we compile that, we should be able to see our API using HTTP localhost 8080, good beers. There they are. So that's working. Now we can generate a client. So we'll use Angular CLI for this. If you're not familiar with Angular CLI, you can go to cli.angular.io. And you can see here, this is how you install it, npm install dash g, Angular slash CLI, and then you can basically ng new to create a new app, CD into it, and ng serve. So it also allows you to do generation of components and testing, linting, and formatting. So we'll ng new client. You'll see there's a whole bunch of files that get generated by default. We have a number of app components, or when you generate a component, it basically has four files that it generates for it, a CSS file, an HTML file, a test, and then the component itself, which is a .ts file, ts stands for TypeScript, and then you have the app module that basically sets up everything in the application and imports the dependencies, and then we have a couple environment classes you can use, the almighty index.html, almost as cool as package.json, and then we have end-to-end tests right here, and some protractor configuration, and karma configuration for doing unit tests. So now you can see our project's been successfully created. We can CD into it, and now you can run things like ng serve, you can open that in our browser, you can see all it says is app works, and it's running in development mode. The other thing you can do is ng e2e, and this runs all the protractor tests, the end-to-end tests, and verifies that that app works basically shows up. So we'll open this up in IntelliJ, and we need to create a service to talk to our API, so we can do that with the command line generation, using ng g for generate, s for service, it's called beer. So you notice this creates it in the app directory, I typically like my services in a different directory. So I'm going to create a shared directory, and beer for the beer, and then this service will have a dependency on HTTP. So with Angular development, you simply specify that it's a dependency that's necessary in the constructor, and that's how dependency injection is done, very similar to how it's done with Spring Boot. Then app module is where we import that HTTP module, and then you'll notice IntelliJ prompts me here, do I want to compile my TypeScript to JavaScript? I say no, because what happens is IntelliJ will put .js and .map files right next to your .ts files, and it will hide them, so you really don't want that. Back to our beer service, so we'll create a get all method that returns an observable of type any, and then we'll return basically a call to our REST API to get that list of beers. So one of the things you can do with IntelliJ is there's live templates for Angular 2, if you type ng2, you'll see there's one for HTTP get. So this makes it a little bit easier here, we can just do local host 8080, good beers, and we don't need this return. And now you'll notice IntelliJ's warning is about this map. The reason for that is because there's actually an import we need from RxJS, but it doesn't actually tell us what we need, so I have a shortcut for that. Now this is something new that started happening with the new version of IntelliJ or the new version of Angular, I'm not sure, but it doesn't know what's going on here, so if you simply add an import for the response, then that solves that problem. Now we'll need a component to display this list of beers, so we can generate a component, see for component, and we'll call this beer list, so that shows up here, and in the app component, we'll display that component, so you can see in the beer list component, the selector is app beer list, there we are. And then we need some logic in this component to actually show the beer list, so we'll first of all import beer service, and then we'll use it in the ng on a net, we'll call this beer service, get all and subscribe to the results of that, we'll set it to a local variable call this beers, and then we'll also catch an error and display it in the console, and we need to set that local variable, okay so things are starting to look good now, now we also need to display the list of beers, and we'll just show the name, so let's try it out, we can do ng serve, our server should still be running back here, so now if we refresh, you'll notice there's an error, this error is no provider for beer service, so this is something that's easy to forget because you're just creating these services, and you're injecting them into your components, and you haven't specified that it's a provider, so in beer list component you can do it as a provider here, providers, and then specify beer service, just like that, or you can do it in the app module, which makes it available to all components, okay, so now we get a new error that says no access control allow origin header is present, that's because we have an enabled cross origin resource sharing in our spring boot application, so to do that we can do it right here, cores are actually cross origin, then you want to specify the origins, 4200, recompile, now if we refresh, we actually see that list of beers, but it's kind of a boring list, so let's make it more fun, let's add a GIFI service, so under shared, we'll create a new directory called GIFI, and we'll create a GIFI service, so this class is basically talks to the GIFI API, you can see here there's an API key, this is a public key that they've advertised on their API that you can use for demonstration purposes, so that's the kind of thing we're doing here, it basically talks to the API with the search term, we're going to pass in the name of the beer, and then we'll go ahead and map those results and just grab the first one, and if there is no image that matches, we'll use this good old dancing cat, kind of fun, so now in our beer list component, well first of all we need to add the GIFI service here, now our beer list component will import it, or set it as a dependency, and then we can leverage it here and basically loop through all the beers and go and grab the image associated with that beer name, and then we'll need to show that here, so we can add a line break, then we'll set the width to be 200, that's always nice to have an alt, now let's see what that looks like, and there you are, now you can see we're getting images associated with our beer names, they're animated gifts from GIFI, so it all works, this has been a demonstration of how to create a Spring Boot API using RESTful concepts, and an Angular UI that displays data from that, it also talks to GIFI, so the code for this is available on GitHub under the octa developer organization Spring Boot Angular Example, there's also the octa developer blog at developer.octa.com where we blog about lots of stuff to do with Angular as well as React, and there's just lots of good stuff here, so thanks for listening and hope you have a great day!