Spring Boot Full Stack with Angular | Full Course [2021] [NEW]

what's going on guys assalamualaikum welcome to amigos code in this course you will learn about spring boot and angular full stack web development for this course junior will be your instructor so we decided to collaborate and i feel like the way junior teaches is kind of similar to the way i teach so that's why i decided to have him on the channel in this course you will learn full stack web development by building the back end with spring boot and then the front end with angular and connect everything together junior has a youtube channel called get raise go ahead and subscribe to his channel show some love because he deserves it if you're new to my channel go ahead and subscribe give me a thumbs up also if you're not part of the amigos code community go ahead and join both junior and i and the entire community will be there to answer the questions that you might have throughout this course this is all from me and now i'm gonna let junior take over catch you later welcome to the first videos in this series where i'm going to show you how to build a spring boot api or spring boot backing application along with an angular application that's going to be communicating with that back-end and at the end of this course you're going to build this application that you're looking at on your screen and this is a simple employee manager application where you can manage employees at the top you have the name of the application so employee manager and then you have this add employee which is a button so if i click on add employee i have this nice form where i can enter a new employee information and then save my changes so i entered this new guy here and then now i'm gonna click on save changes now you can see if i remove the last image url here and the input in the form you can see now i can click this button anymore the button is disabled that's because we have validation on this form i'm going to go ahead and put that address in here and then i'm going to click save as you can see now we have john auchens in here and of course to the far right we can search so if i go in there and i'm type rick as you can see everyone that has rick and their name is there and if i put a k here not only rick robinson is on this list so another thing you can do here is you can edit the employee's information so let's say scarlett got married she changed her last name and we want to update her last name so i can click on this edit icon here which is a button and then i can go here let's say the last name is now i don't know smith and we can just save now you can see the last name is smith and of course we can delete an employee so let's say we want to remove someone from the list uh we can just click on this x right here once we click on this it's going to give us this validation message and this is like a safe way to make sure you're deleting the user if you are making a mistake you can just click no or you can just close this window otherwise you can proceed and then you click yes as you can see now ocean is gone and this is a very simple application i just made it up just so i can use it as an example for we're gonna be building this could be anything it could be users it could be students and of course we can add way much more functionalities to it but that's just a simple example and that example is good enough for you to have a very good understanding you know of how you can create an api with spring boot and then use any for an application uh for that matter to actually communicate with the backend so grab your coffee or tea or whatever else you're drinking we have a lot to cover and i'll see you in the next lecture before you kick off this course i just want to tell you that you're going to gain the most out of this course make sure to practice because junior he has tons of experience building back-end applications as well as front-end applications and he's actually a full-stack developer it has lots to teach you and the way that you're going to gain the most out of this course is to practice as junior teachers that's the best way really so we want to add value by giving you really awesome content but you also have to do your part which is to practice if you have any questions as i said go ahead and join the private facebook group as well as discord where junior and i and the entire community over 12 000 people will be there to answer your questions the community is so engaging lots of people asking questions helping other people so i would love to have you there this is all for now let's kick off this course i wanted to go over some of the pre-requisite you need to have so that you can follow along so this is going to be a spring boot backing application and the whole spring environment is primarily based on java so you it's very important that you understand java in java spring or spring in spring boot so right off the bat you need to understand those two technologies because we're going to use the programming language java with spring and spring boot to build the entire backend so you need to have some good understanding of those technologies and then we have front-end technologies like html css and javascript so since we're going to be building a front-end application you need to be familiar with things like html css and javascript now you don't need to know javascript like an expert but you need to have some basic concepts of javascript and how it works and then we have angular with typescript now angular uses typescript and typescript is really just a superset of javascript it helps write better javascript code and angular which is a javascript framework it uses typescript so we're going to be writing the majority of our code for angular in typescript so it makes sense that you understand what typescript is and how it use and then we have http http i'm just expecting you to understand the basic concepts of http like requests and response you know headers so that you're not super confused when the front end is communicating with the back end because that communication is going to be done over http which is like the whole thing with api because you can call them over the internet and then we have the command line interface now the reason this is on here it's because i'm going to use an http client and that should be client is called http pi it's really nice when you need an http client to call back you know make a call to the backend i'm also going to be using postman but i want to show you how you can you know achieve the same goals that you can achieve in postman with http pi which is like curl which is like a common line program that you can use to make http requests and then understanding of databases now you don't need to be an expert at you know sql or anything like that i just need you to understand the basic concepts of what a database is and it's it's used to store data and things like that because we're going to have a very simple configuration in our application so that we can connect to the mysql database so um that's pretty much it like you don't really have to be an expert in any of those technologies at all i just want to make sure that you're aware of what to expect so make sure you have some basic understandings of those technologies i want to show you where you can go to get some of those things that you need to to know and some of the environment setup that you need to do so right here i am at java.com and that's where you go to download java so if you don't have the java development kit or the jjk you can just come here and then click on this button here to download it and then go through the steps now there are many many resources online that you can use to you know they will teach you how to download and install java so i'm not going to be doing that in in this lecture but you should definitely you know google it or and find some resource on on on the internet and they'll show you how to do this uh properly like set it up and and everything so that's java and then node.js now we don't necessarily need node.js our backend is not going to be built on with node it's going to be built with a spring boot but the reason we need node.js here it's because we're going to use the npm packet manager to install the um angular cli which we're going to be using to build our angular application so you just click on this green button here or get whatever version you want doesn't really matter and then once you have the node.js package installed then you will have access to npm which is notepad manager which is like a comment that you can use to download and install stuff and that's exactly what we're going to be doing so that we can install the angular cli here so as you can see we just say npm which is packet manager you're going to get from installing node.js and then you can just install the angular cli globally on your computer now you don't need to run those other three commands because we're not going to be building the front end first we're going to be building the back in first so you just need to run that one command the first one and then you should be good to go now for my ide for the for java i'm gonna be using intellij and as you can see here here's intellij you can get the community version if you don't wanna pay for it i have a paid version but you don't necessarily have to have a paid version you can just just get the free version or you can use any other id java id or whatever text editor you want it doesn't really matter i'm just showing you guys what i'm going to be using so i'm going to be using intellij and you can just click on download here to download it and that's what i'm going to be using to for the backend and then i'm going to be using visual studio code from the front end as you can see here video studio code is like a very nice text editor it's super powerful and very popular these days so i'm going to be using it to build the actual um front end and then as our um http clients i'm going to be using postman postman also very popular but you can use insomnia or any other you know client library that you want but i'm going to be using postman with http pi though because i want to show you how you can actually make requests using http pi or if you want you can just use curl you don't necessarily have to install hdb pi just for this but i'm just going to show you how it's it's such a nice very nice command that you can use which is pi to make http request that's pretty much everything you need to have configured on your computer and if you're already a developer or whatever configuration you already have and you like it you don't need to do any of these things like you don't need to download any things i just talked about here you can just stick to what you like in the next lecture we're just going to dive into coding so i'll see you guys what you're looking at right now on your screen is the spring initializer website in this website you can use it to just bootstrap any spring boot application so if you go to start.spring.io you will land on that website and all we have to do is to just you know specify the information that we want for our project and then we can just click on generate at the bottom so here you can see this is a maven project so i'm going to keep this selected you can do a gradle project if you want it's just a different build tool but at the end of the day it's going to do the same thing i'm going to be using java as a programming language springboot 2.31 is fine with me uh so i'm going to keep all of this uh default here so in the group id i'm going to take that get arrays so this is usually like the domain of the organization reversed so you can see like usually it's com but my domain is text so it would be like com dot and then the actual domain so i'm gonna do tech not get arrays and that's what usually have here as your um group id and then artifact id i'm just gonna give the name so employee manager which is going to be the same for the name of the application and in here i'm just going to say employee manager uh app and i want this to be well yeah that looks right so the package you can change that as well but i'm just going to keep whatever is generated for me and our package is going to be a jar which means whenever we package the application to be deployed it's going to be a java archive file which is what the jar is and then we're going to do java 8 version so you can do java 11 um or java 14 it doesn't really matter just don't do anything below 8. now let's look at some of the dependency that we can get so here this is going to be a web application so i need the web dependency so i'm going to click on add dependencies and i'm just going to type web and you have spring web come up another dependency that i need is the dependency for the jpa repository and i'm going to talk about this a little bit more and that's just java persistence api so we need to have a way to map like class so we're going to be mapping this employee class to a database so let's do jpa and that's going to bring us spring data jpa and we need a way to connect to the database and we need the mysql connector which is going to be another dependency so i'm going to do my sql and that's going to bring us the driver that we need to connect to a mysql database you can add more dependencies as you want you can click on explore right here just to see what the pom file is going to look like so you can see all the information is entered in here and here is our version um we have the jpa here web and then my scale connector here just so we can connect a little bit so you see what you're gonna get whenever you um you know download the file and you can see all the plugins and stuff this is just coming in by default so i'm gonna close that and then at this point you're ready to generate the application so i'm just gonna click on this button and then generate the application and as you can see here it's being downloaded as a file and it's already downloaded so i'm gonna go ahead and unzip this and then i'm gonna open it in the ide right now i'm in my windows explorer as you can see in my download inside the employee manager which i unzipped earlier and now i have all the files that were generated for me so i'm just going to double click on this pawn.xml file and that's going to open the application with intellij as you can see here so here's the application i'm going to close this real quick and let's expand this to see what we have can see the um all of our package name and here's the main application class so i'm going to double click on that as you can see it's a simple spring boot application that we have here so the first thing i want to do is to create our model class so i'm going to go over to the main package i'm going to right click on it and i'm going to create a new package so i'm going to go down here package and let's just call this model or we can call it domain as well usually it's domain or model this is where you keep all your model classes so here i'm going to go ahead and create a new class and i'm going to call it employee so this is going to represent the employee uh in the application that we're going to be managing so the first thing i want to do is i want to give him an id so i'm going to drive it and that's going to be of type long and i'm just going to do id um and then i want to give him a name so it's the private uh that's going to be a string that's going to be neat then i want to give him an email so i'm going to do another string uh email and i want to give them a job title so that's going to be private another string and let's just call this job title so that's going to be like whatever they are like database developer or ux developer or java developer or python developer or javascript developer and then let's get their phone number and again this is just me making this up so this is something that's going to come from the requirements of the application that you're building um that's not something you're gonna you know just be taking off with your head so and let's give them an image that's gonna be image url so this image can also be like an actual file like like a java file like this um but we're not going to be doing that because that's not the best way to save images even though at the end of the day the image is going to be stored on the server right but usually in applications like this you want to point to the location of the actual uh picture and this is what this is going to be doing so this is going to hold the location where we can read this file and then show it to the to the user and let's give him some random code like let's say every employee has like some random code so let's do uh string employee code and i just made that up um you know you can think of any any kind of scenario that you want so this is everything that an employee is going to have and again this is really up to you or up to whatever application you're building that i just made this up so another thing i want to do is to implement serializable and i'm going to tell you why uh i'm doing this so serializable from java that i so the serializable it helps you know transform this java class into different types of stream because this class is going to be saved in a database and then it's going to be sent to the front as json so it's always best to make this make classes that are going to be in different types of stream implemented serializable because it helps with this whole process now what i want to do is to map this class to a database right so i want this class to be a table in some database and i can give it any name i want by default it's going to be employee but the point is i want this class to be in a database so that i can update and delete and do whatever operation that i need to do and this is why we brought in the gpa repository uh because it's gonna allow us to do this so let's go over on top and i'm gonna do add entity and this is gonna make sure that this class is mapped to any database that we have configured on the class path and i need also to give this a primary key which is going to be the primary key in the database and that's why i'm using this id here and to do this you just have to do that id and make sure you're bringing everything from java javax persistence and also we need to tell it how to generate this information so i'm just going to do add generated value and here we just need to pass in the strategy so i'm going to do we could also leave it like this it would still work but if you want to be specific we can just do strategy equals generation type and we can make this auto or identity so i'm just going to do identity in this case um you can look those up because it's a few of them but you can look them up what they mean actually like what is happening when you celebrate but any one of them and in this case will do the trick for us because we're not really concerned about you know performance and database and all that stuff we just need to have this saved in a database right now so we don't need to carry much we could just do auto or whatever it would still work and then another thing i want to specify here actually you can specify a lot of annotation on this id to configure it but there's one that i want to show you so if i do add column i can specify some column information right so let's say i don't want this to be um to be updated like once it's set it says forever so i can do a nullable and i can set this to false and i can also do updatable and set this to false okay so that way once this is set it can never be updated uh in our database and we can do the same for the employee code assuming that the employee code is like some some secret thing in our company and only one can only one employee can have one at a time and it shouldn't be updated like we we treat it as an id but i'm just making it up here um just for the sake of of an actual scenario so now that we have this class um there's another library called lombok we could just use lombok to generate getters and setters and uh constructors but i'm just gonna do it by hand because i didn't want to bring alarm back into this so i'm going to generate constructors default constructor and then getters and setters for this class so i went ahead and generated getters and setters as you can see we have all of the information here we have our default constructor constructor with parameters and we have all of our getters and setters and then at the bottom i have this just string method in case that i want to print this out so that i can see a nice printout and not the location of the object so that's what we have to do for the actual employee in the next lecture we're going to wire up the database connectivity and then we're going to start the application and see if we can map this actual class in the database as a table so i have my sql installed on my computer so if i do my sql and as you can see here at the comment line here i'm going to open this real quick and bring it over so you can see uh if i put in my password and now i see i'm connected to the mysql server as you can see here so i can do like show databases and you guys don't need to know this i'm just showing you that i have mysql on my computer which is what i'm going to be connecting to uh using this application so make sure you have some sort of a database in your on your computer that's already installed that you can use so i'm going to close out of this and let's go into the properties application.properties file and here i'm gonna put a quick comment so i'm gonna do my sql configuration and in here i want to specify the location of the database the username and the password at a minimal so i'm gonna do spring dot data source and i want the url and this is gonna be jdbc calling mysql and column double forward slash and then the actual location so in my case since it's on my computer so i'm going to look a host and the port is 3306 and i just have to specify the name of the database so i'm going to do creator database so i'm going to call it employee manager okay so this is the name of the database here which i haven't created yet but that's going to be the actual database where the table is going to be created for this class right here so we're going to have a table in that database that's going to be called employee with all of those rows in it so let's go back to the application so we need to specify the username and the password so i'm going to copy this and go here and i want to do the username and in my case it's root now you would usually use root as the actual username you would actually have a specific user with specific information that you set up for different applications but this is on my local and i'm just showing you an example so i can use root here to access my database and then the password and that's going to be let me in again you can see this i can type it out like this like in this application that properties file because it's on my local like this is going gonna reside on my local computer now if i were to deploy this application um anytime in this application oops i have a typo here i gotta fix it configuration um so if you were to deploy this application you would probably not have to string like this all open because that's a security vulnerability so you would probably have like some secure way of accessing some remote server and then get those username and password to be used in this application or maybe you would like encrypt them in a file and then decrypt them when you need to use them etc so point is you would never have this uh like this open um because that's not very secure okay and then i want to specify some other stuff let's just bring the jpa i want to do show sql and i'm going to set this to true so that we can see the sql queries being shown in the console whenever jpa is executing queries and stuff and it's just a nice thing to see uh whenever you're working with spring boot so that you can see oh okay so my you know jp is actually updating this data etc something else we have to specify is the data description language and i'm going to tell you what this is in a second so let's do spring.jpa.hibernate and we want to sell the ddl and this stands for data description and it's just gonna tell the application how to and some way manage the database so if you set it to create then every time you run the application it's gonna drop all the tables and then create them again but if you set it to update it's only going to do that once so it's going to create the database and everything if they weren't already created and then it's going to just update the data which is what we want we don't want to recreate everything every time otherwise we will be losing all of our data and then the last thing we have to do at least at a minimal we have to specify the dialect so let's do [Music] spring.jpa.properties.hibernate.dialec and we need to set this to the actual dialect that we're using i'm using mysql i think five so we have to set it to the mysql5 dialect so let's do org dot hibernate dot dialect and here we have to just say my sql dialect sql5 just like that so this is at a minimal uh the configuration we need to put in for our data source and at this point now we can run the application and see what happens so uh i don't know what's going to happen yet so let's go ahead and give it a try so i'm going to go into the main application class which is this class right here and then i'm just going to go ahead and click on this green arrow here and then click on run and we're going to let this come up okay it's coming up let's see what we have okay so it started and we got an error and it says database employee manager is unknown so the app runs fine but we don't have that actual employee manager database created so we can actually create that real quick so i'm gonna go ahead and copy this name and go here and type mysql and i'm gonna start the command line interface for mysql put in my password and here i'm just gonna say create database and i'm just gonna pass in the name of database and then click enter and now if you want it again i'm just gonna click on this rerun here and let it come up okay so everything runs fine you can see it creates the table and he inserted all the rows in it and you can check here it says the application is running on port 8080. so i'll see you guys in the next one so in the last lecture we created our application we actually set up a database connectivity which we did here so now what i want to do is i want to have a way to save an employee right so let's say you know i'm using the application as a front end user and i need to save an employee right so we need to have a mechanism to do that which is why we brought in the gpa repository so we're going to be actually using it so that we can do those operations on our database so we can actually do all of this with java like we can write our own repository so we can save employee and everything but this is such something that is so repetitive that it was created and then optimized for us so we're just going to make use of those libraries that we brought in instead of having to do this um ourselves so i'm gonna go here under the main package and i'm gonna create a new package and i'm gonna call it repo short for repository and then here i'm going to create an interface and let's go here and i'm just going to do java class and you have to select class and then here you can select interface so here i'm just going to call it employee repo and i'm going to click enter so now we have this interface employee repo here what we can do here is we can extend the jpa repository so we can do jpa repository and then here we have to pass in some information so for the gpa repository we have to tell it what class uh this repository is for so that's going to be employee coming from our domain as you can see here our model and then you have to pas you have to pass in the type of the primary key so let's do long so if you remember if we go back into the employee class this is the primary key that we created and it needs to know the type which is along here which is what i'm specifying here so once we have this we have access to all of those so i'm going to go back real quick i did it too fast so if i hold ctrl at least in intellij and then click on this it's going to take me to this class that i'm extending and you can see we have access to all those methods here or functions so we can save delete batch and find all which is going to give us a list of all the employees that we have in our database and everything so we're gonna make use of all of those and we didn't even have to write them so that's the whole point of having jp repository or spring data in your application into some sort so that's the advantage of using the gpu repository so now we can just inject this anytime we want to save an employee and then we can call one of this method here as you can see we have a save all we can pass in an iterable so we didn't have to write all of those ourselves let's go ahead and see if we can use this now in our class in the same base package i'm going to create another package and i'm going to call it service and this is going to represent the service class that we're going to use in our controller and this is all going to make sense in a minute so here i'm going to create a new class i'm going to call it employee service right because that's what it so now what i want to do in this service is to bring in that repository i've just created so this is the private final and let's call this the employee repo and that's going to be of type employee so now we have that repository here and we're going to inject it in this class so that we can use it in this class so i'm just going to over over it and it's going to give me this option here and i just pass it in this class as a constructor so whenever this service is constructed it will have this employee repo inside of it so that we can do whatever we want to do and of course we need to annotate this with that service from spring framework and the last thing we want to do is to add auto wire on this here so that we can bring in this dependency so at this point we can use this repository to do all of our code operations so let's go down here and i'm going to create another method i'm going to call it let's say i need a method to add employee right so let's do employee add employee this method is going to take an employee so let's do employee and then here what i want to do is to create this employee in the actual database but before i do that i want to generate the actual employee code because i'm not going to ask the users to give me this employee code so let me make some more room here all right so here what i want to do is to create this actual code so i'm going to call on the employee and i'm going to say set employee code which is a string and then here i can just pass in some random uid here and i can just say random id and i can just convert this to a string okay so now this employee will have this random uuid and then at this point i can just save this actual employee so here i can just say return employee repository and i can just call the save method on that as you can see here there's a save method i can just pass in this employee here okay so that way we can save that employee so you can see how we're using this repository here to do those operations for us and if you really drill into the actual uh repository and jp repository you will see that it's doing all the jdbc query creating queries and all this stuff for us so we don't have to do it manually we can do it manually there's instances where you actually have to do it manually because your data is so complex but in our case we're not dealing with any complex data so we can you know greatly make use of gpu repository so we're going to continue adding the other functions or methods that we need for our credit operation and then after that we'll be able to create our controller and then start seeing this in action let's go down a few line and let's do public and i need another method so that i can return a list of all of the employees so this is going to return a list of employee and i'm going to call this um find all employees and it's not going to take any parameters because it's just returning the list or all the users that we have in the database and then here i can just return the repository and i call find all on that repository and let's scroll down a little bit more and here let's say i need another one to update the employee so i'm going to public employee and update employee and this is going to take the employee and what i want to do is to just save that employee let's save and i can just pass in that employee now i need another function i need two other function there's one to delete an employee so let's do this one real quick so public delete employee and this is going to return a void to avoid and what i want to pass into this is to pass in the actual id of the input so we're going to do long id and then in here we can just call the delete so i'm just going to do employee delay and i'm passing the id in here so you can see i'm getting an error because the employee repo doesn't have a delay by default so i'm going to create a new method so i'm going to call it delete employee by id and i'm going to go ahead and create this method so create method and as you can see here's this method and because we named this delayed employee by id when we pass in the actual id spring is able to understand this language and then create the query for us to delete an employee by id and this is what you would call a query method because of the naming convention so as you can see there is delayed employee which is the class name by id which is a field and what spring is going to do is to create a query to delete employee where id equals this idea we're passing in here so this is a whole different discussion and i don't want to get into right now but that's exactly what this is doing so now we shouldn't have any problem if we go back to our service spring understands that what we're trying to do here is to delete this employee by passing in this id here and i'm gonna do another example just so you guys can understand so let's do an example where i wanna find an employee by the id so i'm gonna do public and let's make sure this returns an employee and let's call it find employee by id and here we can pass in the actual id just like that and then what i want to do is call the employee repository so this is going to return the employee that they find so i'm going to do a return employee repo and then i do find employee by id okay and then i pass in the actual id as you can see this method doesn't exist but spring is able to understand it so now i'm going to create it in here and because we have find it's going to do a select employee so it's going to say okay so an employee from that table by id where id equals this id we're passing in here so this is called query method in spring so now if we go back you can see that we don't have this error anymore but now there's another thing i want to do instead of having this return on employee i'm going to make it return an optional because there is a situation where i might not have that employee so they let's say they pass in some random id and there's not an employee but an id so let's make sure this leads are international and let's go back to the actual service and now you can see we have an error because this is returning an optional so what we can do to fix this problem is uh we can make use of java 8 and then do something else in case we can't find an actual employee so here what i'm gonna do i'm gonna do that or else throw okay so uh here i'm gonna pass in an exception supply so i'm saying hey try to find an employee so all others so if we find an employee by this id this is going to return the code will not execute whatever comes after this however if we don't find an employee by that id then we can throw whatever exception here so what i'm going to do here is to pass in the actual exception so i'm going to do equal and in here i can pass in some new exceptions so let's say no user not found exception and then we can pass in some random message in here so we can say something like uh user uh by id and then we pass in the id and we can say uh was not found okay i'm gonna put all of this on a new line just so you can see it and of course we don't have this exception yet and i'm gonna show you how we can create this exception so that we can throw it every time we try to find an employee and we don't have an employee buy that id in our database so in the last lecture we created our service and we added all the methods that we need to use in our application so add a new employee find all the employees update an employee and then find an employee by id and then delete an employee so we're pretty much done with the service it's a very simple service not really complicated but we do have to fix this exception right here which is where we try to find an employee by an id and if we can't find this employee in the application or in the database we're just going to throw this user not found exception obviously i just made this up on the fly as i was typing this exception doesn't exist yet so let's go ahead and create that exception so that we can get rid of this error so here i'm just going to hover over it and go to more actions and then create class using a font exception and i'm going to put it in a different package you can see it's going to put it in this the same package where of that class that we're on so here i'm going to just put it in a different package called exception so now we have this new package created and the class is in here so since this is an exception i can just extend the runtime exception so i'm going to run time exception and here i can just call the super class so i know i'm going to get a message so i'm going to message and inside here i can just call the constructor for that message from the super class so i can just do super and then pass in my message here so what this is gonna do is gonna call the constructor on that class and then pass in this message there's a constructor where you can pass in a message so as you can see we're passing in this message here this whole string here which is the message that we're passing so that message is gonna get passed down um to this exception right here and we're getting an error here and that's because we didn't specify that this is going to return an optional of employee so we're going to do employee and i should fix the problem go back now as you can see it's gone so that's everything we have to do for our employee service and at this point we're ready to use the service and then start making transactions in our database so i'll see you guys in the next one i wanted to step back and then take a look at the design of this little application that we're building so right now we've already worked on the service and the data layer so now we're ready to have a controller that can access the service and then respond to requests coming in from any client that can be like the browser it can be postman or any http client it can be curl or anything like that so those requests are gonna come in and they're gonna come through the controller you shouldn't really put any real logic in the controller you just have to accept requests and send responses back to the caller so the controller it's supposed to just be very small very simple and it's just taking those requests and then pass them down over to the service and then in the service along with other like utility classes you would have that you can call inside of that service you would do all of your logic and then access the data from the service as well at this point we're done with the service we have our data layer connected and now we're just gonna go ahead and work on the controller so the controller is gonna be receiving all of the requests coming in and sending all the response and this is the part of the back end or the server that is going to be exposed to the world so let's go ahead and start working on the controller so i'm back in the application and i'm gonna go over to the project structure or folder and in the main package which is right here so i'm gonna right click and go to new and i wanna create a new java class and this is gonna be called employee resource okay this is gonna represent our controller so let's collapse this so the first thing i want to do is i want to annotate this as a rest controller because that's what it's going to be it's going to be a rest controller because this is a rest service so we're going to do rest controller and another thing i want to do i want to give this whole class a default or a base url so to do this i'm going to go ahead and say request mapping and here i'm going to pass in a string and to access this employee resource i want all of the url to have the employee at their base okay so and you're gonna see how this is gonna make sense in a second now the first thing i wanna do is i wanna bring in the service because i need to use the service in this class so let's do private final and let's call the employee service and of course we need to inject that service into the constructor so that we can auto wire the service inside of that class i'm going to click here and go to more actions and then i'm going to say at the constructor and it's just going to do the work for me as you can see here so the first method that i want to have in this class is one method that can return all of the employees that we have in the application so for this i need to give this a mapping so let's do at get mapping because that's going to be a get request to retrieve all of this information in the backend and then what i want to do here is define the actual body of the or the actual method so let's do public and i want this method to return an http response and there's a very handy class that we can use in spring it's called response entity and that's the one that i'm gonna use right now so the response entity is a generic so we have to pass in what type of data that's gonna be in the body okay so to do this let's open and close and here what we want to return is a list remember this is also a generic so we have to specify a list of what so here we have to say employee okay so this is going to return an http response and in the body of that http response there's going to be a list or an array of employee and then at this point we can name this method to get um all employee and it's not going to take anything and let's open and close the value of the method and here all we have to do is call the service and then have the service return all of the list of all the employees that you can find in the actual database so let's do a list of employee and let's call it employees and what we want to do is to just call the service so we can do employee service that find employees so here this is going to return the list of all the employees now you got to remember this method right here it's returning a list of employee on the battery so we have to specify that so what i'm going to do now is to just say return and then here we're going to return a new response entity and then inside of it we're going to put all of our employees so we're going to say employees which is going to be in the body and then we have to pass in the http status code which is going to be a success so we can do http status okay because everything went well that way the user will know that they get a 200 response and everything went through perfectly so this is something that we're going to repeat so we're going to repeat this same format and then we're just going to call a different method on that service so that we can return whatever we need to return so i'm going to copy this method i'm going to scroll down a little bit and then i'm going to paste it and i want another one to find a user so let's say i want this mapping to go to slash employee which is at the class level because we just define it right here so every request will come through this and then we can specify a more specific path here so after employee we can say find and then we can pass in the id as a path parameter so here we're gonna pass in the id so this is gonna return only an employee if you remember we have one method that can return an employee by getting the id so we can call this get employee [Music] by id and then here we can take that id so the way we're going to take that id is to use an annotation call path variable and then here we can say hey we're taking this id coming from this path right here so this id right here and this id here should match and then we're going to say hey this is going to be a long and call it id okay so now we have access to this id that was passed in the url itself and then here we're going to return employees i'm going to remove this list and call this variable employee and then here we can call find employee by id so we can define employee by id and then we pass the id in here it's complaining you can't find employees so we just have to return that one employee and the request body and then send an http response status code of okay to the user and also we have to specify what we want this path to be as you can see here we're expecting this to go through employee slash fine and then the id of the employee so that we can fire this method but then here only employee is expecting to reach this endpoint right here so we can be more specific we can just say hey for this one we can specify an actual path and for this i'm going to say all so whenever they go to the base url slash employee slash all then it's going to return the list of all of these employees and we need three more methods so there's going to be another one to add an employee update on employee and delete an employee so let's do those real quick so what i want to do is to um create a method to add an employee so let's do that and that's going to be a post request because we're making a change in the um actual back end so post mapping and i'm gonna map this to employee which is at the class level slash add okay or something like that and then here we're gonna define the value of the method so i'm gonna do public and of course it's gonna return a response entity of an employee so i can just copy this line here and paste it here and i'm going to call this method at employee and then here we're expecting the whole employee object which is going to be in json format that we're going to be expecting it coming from the user so to get that information the same way that we're getting this id here we can also use another annotation so that we can get whatever is coming in the body of the request as an employee okay so we can say add request body and in here we can just convert whatever we get as an employee because we know that's what it's going to be so that way we will have access to the employee coming in from the body of the request so here all we have to do is to just create an employee i'm going to do employee and here i want to call the service again and i'm going to say add employee and then here i just pass in the employee that i got from the actual request and i'm getting an error because this employee that i'm defining right here is the same as this employee so i'm just gonna call this new employee or something like that so new employee which is the employee that they're adding and then i can just pass it in the body of the response so here i'm gonna return a new response entity so just copy this and then i pass in this new employee right here okay so now instead of returning an okay http response i'm going to return to created because that's what just happened they just create a new piece of information in the application so created means we created something on the server which is what adding a new user is actually doing i'm gonna scroll down a little bit so now we need another one to update the employee which is gonna be very similar to this the only difference is the employee that they're gonna send us that employee is gonna have an id because that employee already exists in our database so i'm just gonna copy this method and then paste it here instead of a post mapping i'm gonna do a put mapping because they're doing an update so i'm gonna do put mapping and in here instead of add i'm gonna do update and again we're expecting the employee to comment and the only difference is gonna be that this employee that they're trying to update has an id already in the database so that way the database will be like oh this is an existing employee let me just update instead of doing a post or adding this new employee in our database in here i'm going to also rename this variable so i'm going to call it update employee and then we turned out of the employee and then here i'm going to return okay because everything goes well in the backend so we'll return ok to the front end and then here i just call update employee and then lastly we need one last method that can delete an employee if you remember we have a method that's gonna delete an employee so i'm just gonna go ahead and copy this and go down a little bit more and this is going to be delayed mapping so i'm going to delete this and do delay and then this is going to go to the delay path and of course we're expecting the id because we need to delete by id so here and curly braces are passing the id and this is how you pass path variable in the actual url that you can get by just calling this path variable like this so i'm just going to copy this on top here come down here and then paste it and this is going to be called delete employee so delay employee and then we get the id and then here we can just call delay and pass in the id here and this method doesn't return anything so instead of passing in an employee in the actual response entity i'm just going to put a question mark and then this doesn't return anything so i'm going to remove this part and in here we can just return ok to the user just to let them know that everything goes well so as you can see now it's pretty much a mirroring of whatever we have in the service so if you if we go back in the service real quick you can see we have add find all which is going to return the list update find by id and then delete which is exactly what we're doing in the controller now we can run this application and then we can call those endpoints by sending requests to those endpoints and then we should see something coming back to us in our client that can be either the browser or a postman or insomnia or whatever http client that you're using so i'll see you guys in the next one like i mentioned previously we're gonna need to use postman to test our api because if we use the browser we won't be able to send post requests and put requests or delete requests because the browser can only send get requests and through a form the browser can send post requests but we won't be able to do that so i'm going to be using this http client called postman and you just have to go to postman.com and you will lend to the postmate website where you can go ahead and download it on your computer by just clicking on this download at the top right corner so postman is an http client you can use it to send any type of request and by any type i mean with any one of the http verb so you can send post requests get requests delete requests put requests or patch requests and we're going to be using it to test the api there's another one called insomnia so if you go to insomnia.rest it'll take you to this page and this one is also very popular i've used it before myself and they do the same thing so it's really whatever you prefer but either one of them will work fine so i'm going to be using postman and i already have postman installed on my computer so i'm going to go ahead and open postman so that we can use it i have postman open and this is a brand new window of postman so i haven't made any requests or anything like that it's clean and all i have to do is to click on this plus sign right here and then open a new tab and then in that tab i can pass in the url to the api that i want to call and then i can select what type of request that i want to make as you can see here we have a list of pretty much all passable requests that we can make on the internet so i need to pass in the url so that's gonna be http column double forward slash localhost and remember our application is running on port 8080 well it's not running yet but when it runs it runs on port 8080. we have to go to the base url which is employee and let's say we want to go to the first endpoint here so if we open the app back up you can see there is a get mapping here that goes from employee to all and this was going to return an array or a list of all the users that we have in the application so then that means that once we pass in the employee we have to pass all and this request is supposed to be a get request it's gonna go into the application and hit this endpoint right here and this is gonna run and then return the response to us so let's go ahead and run the application and then we can send that request and see what happens i'm gonna go to the top right corner and then click on this green arrow and the application is starting and the application started so if i scroll to the right a little bit here in the console expand that a little bit you can see that the app is running on port 88d and this is the port number that we pass in our url so let's go back to postman as you can see we're going to send that get request to slash employee slash all and let's see what happens so send and here we got nothing back we just have an empty array and the reason for this is because we don't have any employees in the application yet and we got a 200 status code response back so that means that everything went well it just didn't find any users on the backend which is the database so what we have to do now is to just add some new users and then see what we get back when we send that request again so i'm going to open a new tab and let's just copy the base url here so i'm going to copy all of this and then paste it here now you have to remember this is going to be a post request because we're trying to add a new piece of information on the server and we can also double check the url here so if you scroll down a little bit here you can see this is expecting a post request to the slash ad and it's expecting unemployee information so here we're gonna do add to send that employee in the request body we have to click on body here and then go to raw and we're going to send json data so in the text drop down just click it and then select json once when this request is sent it's going to send whatever is on the body as a json type of object or json data so i have prepared some data so i have this text.txt i have a bunch of employees that i'm going to send to the server to be sent to the database so if you remember if we go back a little bit to the employee class you can see that we're supposed to send all of this information right here so the name the email the job title the phone and the url for the image but we're not going to provide the employee code because this is going to provide for us on the fly and the id is going to be generated by jpa so we don't need to pass in the id and we don't need to pass in the employee codes we're just going to pass the name the email the job title phone and image url and this is exactly what i have in my data so i have email image url job title name and then phone number so i'm gonna copy the first employee and then go back to postman and in that body now i'm gonna paste this information here so i'm gonna scroll this up so we can see the response when the response comes back so again we're sending a post request and it's going to go to the slash add so that we can add a new employee and by default this is accepting json data so we select body so that we can put some json information or json data inside of the body of the request and then we put the information that we need to put in in json format and i'm gonna go ahead and send this request now and let's see what happens let me see if i can scroll so here you can see that now we have an id for that user and we have an employee code which is just a uuid so you can see that this user was entered in the database because we have this 201 here which is created because we created this new piece of information on the back end and everything went well so now if we go back to the first tab where we can send the get request to get all of the employees let's see if we're going to get that employee back because we should so let's send that request and there you go you see we have an array and in that array we have one element and this is the user that we just add and we can verify this information in our database as well so let me open the mysql comment line let's do my sql and i want the command line client in here i can put in my password so let me in and i can do show databases and i can say use employee manager oops and now we're using the employee manager database and then here i can do show tables you can see we have the employee table in here and then i can say select star or everything from employee which is the table name and you can see here we have this new employee in the database you can see here this is the coming line client that comes by default with mysql so we don't necessarily have to use this i just like to use it because i like to use the command line but you can use workbench as well and i have workbench installed so i'll be showing you this data inside of workbench so we can see that data was added we can see the employee code the image and everything else that we're supposed to see so this is all working in the next video we're going to continue by testing all the other endpoints so i'll see you guys in the next one i wanted to show you how you can use http pi to do exactly the same things that we just did using postman sending all kinds of requests to the backend so you can go to http.org and then install http pi and i believe you can install it with different tools and i had to go through pip because i have a windows computer so i had to install python and then install pip and install it it should be pretty easy for you if you have a mac or linux based computer so make sure you have http pi again this is totally optional you don't have to do this i just think it's really cool to use some comment line to send http requests and http is one of the best ones so i'm gonna open my terminal here i'm going to make this a little bigger and to use http pi after you have installed it you just have to do http and then put in the url for the request so here i'm just going to do http calling double forward slash localhost and our part is 8080 and we want to go to employee slash all okay so this is going to return the list of all the employees for us now in the beginning right after http you can pass in the method which is going to be a get request but by default it assumes that you're making a get request so we don't have we can omit this we don't have to put it in so now if we send that request you can see we have a very nice response in json format another thing i want to show you is let me scroll up a little bit since this is on our local we don't actually have to pass in everything before the actual port number so we can remove all of this and it's going to assume that we're gonna make that connection to localhost and port 8080. so if we send that again you can see we get the same response so i'm gonna clear this and the same way we can also find one employee so i can remove this and defined and let's pass four and just gonna return the employee with id4 you can see now we have nd maxwell so let's say we want to add an employee or do do an update how would we do that well so let's go ahead and get started so let's do http right and let's do post now we have to specify this because by default it's gonna send a get request and here we're gonna pass in the port because it's gonna assume since there's no url that we're making this request on our on local machine so i'm going to pass adhd and this is going to go to employee slash add now how do we pass the data we can pass the data in many ways but one of the best ways that i like to do this and you can go through the documentation here you can go through the documentation it will show you how to do this you can go here you can find it but one of the best ways is to actually have the data in the file and then point to that file so before we send that request i'm gonna go ahead and generate that information so i'm gonna undo touch and i'm gonna create a file called data.json and remember that information should be in json format i'm gonna create this and then i'm gonna do nano and open data.json so in here let's go back to the app i'm going to grab employee number three which is dave rogers which we deleted earlier i'm gonna copy that and i'm gonna go back and put that information in so i'm gonna paste it okay so now we have the same data in json format and i'm gonna exit this and save the changes now what i can do is do http i'm going to clear this first and do http now and that's going to be a post request and it's going to go to localhost 8080 slash add and then i just have to do this and by data dot json so that way http pi is going to look inside of that file and then grab the information so let's send this and see what happens and you can see we added this employee with id5 and dave rogers here so let's say we want to update uh christine here so let me go ahead and clear this and i'm going to open the file again so data.json and i'm going to delete all of this and paste the information for christine and close this now let's say i want to change the last name so i'm going to go up and change that last name i'm going to change this to jones okay and click ctrl x save exit so let's clear this and do http and then do a put request and then that's going to go to 8080 slash employee slash update and then i can do the same thing i can pass in the data.json so now it's going to update that information so let's put enter as you can see here now the last name is jones so we can do http 8080 and see if we can get all the employee so employee slash all and you can see here the last name jumped so you might be thinking oh i don't need to use this command line interface um you know i can just use postman or whatever like i mentioned earlier with the new cloud architectures that we're having right now and cloud is just a big thing it's like a buzzword in the tech world a lot of times when you need to access your computer in the cloud you're going to be logged in using a command line interface and you will need to access information on the internet make requests and things like that so knowing how to make requests using a command line interface is very important there is a very famous client that we can use called curl curl is like one of the most popular and it's been around for a while but i just found out about http pi and i wanted to show you guys so that's how you can and you can do a lot more with http pi um if you go to the documentation you can do pretty much everything you can do in postman in http so you guys can check it out and let me know what you think and i'll see you guys in the next one at this point we're ready to build the front end application and for this i'm going to be using a framework that's very popular it's called angular and i'm going to be using a tool called angular cli so that i can create this application and manage it and run it and deploy so if you don't have the angular cli you can just run npm install and then you you do it at angular cli and if you don't have npm of course this is the node package manager so you can just go and install node.js at nodejs.org and just install whatever version you want any version here will work so once you have access to the packet manager you can just install the angular cli and then we can run you know ng new and then give a name for the application and then we can cd into that folder which is the folder of the application that will be created by the angular cli and then you can do ng serve to just run the application on a local server so i already have a npm install and i already have the angular cli installed so i only have to run the second command and then go from there so i'm just gonna do open my terminal i've already navigated in the folder which is in my downloads folder where i want to create this application so i'm just gonna do ng new and then give a name to the application so i'm going to call it employee manager app and run this it's going to ask me if i want to do if i want to have routing in the application now if you remember this is a one-page application so i'm not going to have any routing so i'm going to say no and it's asking me what style sheet i want to use is it going to be scss or sas or less or css so i'm going to stick with css because i'm going to be using bootstrap so i'm going to be using css bootstrap and i'm just going to run this now while this is creating the application and building everything let's take a quick look at the design of the application so that we can see where we are so back in our design and this is the same design that i showed you earlier when we were working on the back end the only difference is this time we're focusing on the front end which is why i put more details on the front and which is the client so we've already done everything on the server at least for this small application that we're building uh we've built a server we built a controller and we built our access to the database and we have all the endpoints ready so at this point we just need to build the front end and the front end is going to have a few different components there's going to be a ui which is going to be what the user is going to see on the screen and then this ui is going to be connecting to a component and that component will have access to a service and then that service will be what will have access to the backend so the service will be able to make http requests to the backend depending on what the user wants from the ui through the component through the service and then over the internet we're going to access our backend so this is the the little design that i have for this application and the first thing we're going to be doing once we have the front end application or angular application ready is to build the service in that application so that we can communicate with our backend so we're gonna pretty much have a mirror of what we have in the in the back end so we have like an endpoint to update on an employee so we're gonna have that as well and the service we have an endpoint to add an employee we're also gonna have that in the actual client service and once we have the service ready we'll be able to use it to update our ui and this is going to be done through the component because the component is like a middleware here so hopefully this is making sense because it's a very very simple application we're not really doing anything really complicated obviously this application is very simple it's like one of the simplest applications you can build at least for this design that i'm trying to do like having a back-end in the front end but again applications like this can get really really complex you can have proxies in between and all kinds of stuff but we're not going to be doing that we're just going to keep it very simple i just want to show you how you can actually go about designing a backing application in front of an application using spring and then friend application using angular and the backend application is framework or library agnostic which means you can use pretty much anything that can communicate with a backend you can use vanilla javascript to make like simple fetch requests or you can use react.js or you can use react native like you can use anything that you can use to make any http request to communicate with any server uh the backend will work with it as well so we didn't necessarily have to use angular it just happened to be the framework that i'm i'm just choosing you but you could use angularjs or react.js or react native or whatever frontend you want or just plain old um vanilla javascript just making a simple request to the back and as long as you know what the endpoints are so the process has finished so i'm just going to go ahead and cd into that folder so i'm going to do employee manager app and here i can just run ng-serve just to start the application on those local server and we're just going to give this some time to come up the application has started and we can access it and localhost 4200 this is just the default port of course you can override that by just passing a simple uh argument so let's go and access this so we're gonna do google host and port 4200 and you can see we have this page which is just the default page that you get when you create an angular application so here it is this is the front application right now it's there's really nothing going on here this is just a simple a sample page that they give us with some documentation information so in the next video we're just gonna go ahead and start creating the service so that we can communicate with the back-end what i want to do now before we continue adding more function is to create the employee interface so that we can specify the type of data that this requests are going to be returning so i'm going to go back here and enter the app folder i'm going to create a new file and i'm just going to call it employee.ts and then inside here i'm just going to do export interface employee open and close curly braces and here i'm just going to define all of the attributes that employee is going to have so they're going to have an id and that's going to be a number you're going to have a name and that's going to be a string and they're also going to have an email hopefully i can remember everything that i said in the backend and i remember job title and this is also a string and they have a phone which is a string image url which is also a string and then they have an employee code i think this is everything that we set in the back and then we can come back and change this if we forgot something and this is also a string so this represent the type of data that's going to be returning whenever we make those calls to the backend because we're just technically mirroring what an employee looks like from the backend so i'm just going to copy this and close it and collapse this so now we can say hey this is going to return an observable of employee array we can just pass in it like this and make sure we import employee from our class and then down below we can pass in the same type as well it's explicitly clear what type of data that this is returning which is an employee array for from a javascript perspective or from a java perspective that's just going to be a list or any type of collection so i'm just going to go ahead and copy this and go down here and paste it and this is going to be add employee and for this it's gonna take the actual employee that we're adding so i'm gonna do employee and that's gonna be of type employee which is our type that we just created and this is gonna return just one employee so i'm going to remove those brackets and here we just have to pass in the employee so the url the base url which is this part of the euro is going to be the same but this time it's going to go into employee that ad and then we have to pass in the payload which is just the employee that we receive which can be a second argument and then here we just have to change this method from get to post which is what it's complaining and this is how we're gonna make the post request to this url and then pass in the payload in the battery so that we can add that employee into the application in the backend and i'm gonna duplicate this one more time i'm gonna go down here i'm gonna scroll up a little bit and this one is going to be to update an employee so i'm gonna change this to update and it's going to take an employee it's going to return an employee and it's going to go to update instead of add so we're going to change this to update and of course in the body of the request we're passing the employee to be updated so all of this is good and also we have to change this from a post to a put because we're updating the data and i'm going to duplicate this one more time i'm going to go down here and for this one it's going to be the function to delete an employee so i'm going to remove this update and then put delay and to do an employee we need to pass in the actual employee id so i'm going to do employee id and the type for this is going to be a number and whenever we delete an employee we don't send any response back in the response body we just send back the whole http response with the status so in this case we can just say this is going to return void and then we can change this to delete and then of course we're now passing in this we're just adding this id as part of the url itself so here we can just go to the delete route and then forward slash um that employee id and we can just pass this by just passing in the dollar sign open and close curly braces and then pass in the employee id here as part of the url so this is pretty much everything and as you can see this is just a a clear mirroring of whatever we have in the backend so we can get all the employees by passing in a get request to that specific url which is employee slash all and then update you know add and delete so we can now use all those function in our component so that we can update our ui appropriately depending on what action the user is taking and the ui there's something i want to show you and this is the cli page on angular that i owed at cli and this is the page on angular or the angular website that is dedicated to the cli and if you go on this page you can see everything that you can actually do with the cli and you just saw that we just did this rent these three commands and what i want to do now is to generate the service that i need so if you scroll down a little bit you'll see this table and on this table you can see all the different commands that you can use and you can click on them to see more details about them so i'm going to click on the generate because i'm trying to generate a new service or anything else and if you scroll down a little bit you can see we have everything here that we can actually generate so we can use this um generate here with any of those arguments here so what i want to do is to create a service so i'm going to go down here and click on service you can see it gives me the actual command so i can do ng generate service and then pass in the name of the service with some options so i'm just going to copy this and then go back to my terminal and i'm going to stop the server for a second and i'm going to clear this and here i'm just going to pass in this command and then i'm going to give this a name so i'm going to call it employee so what the angular cell is going to do is do employee dot service it's going to add the service to this so before i run this there's something else i want to show you so if you scroll down here you can see if we want to skip tests we can set this skip test um i guess options to to be true or false so i don't want to have any tests so i'm going to copy this because i don't want to generate the test file and then i'm going to delete all this so that way it won't create the spec file or the test file so i'm going to go ahead and run this as you can see now this cli went ahead and created this file which is employee.service.ts and it didn't create a spec file which i don't need so at this point i can use the code and then a dot and this is going to open visual studio code so now i have visual studio good open and i'm just going to navigate to the service i'm going to go into the source and app and then here's the employee service.ts file so in this file what we need to do we need to create some function that can actually reach to the backend to do some work for us so we'll have a function to add an employee update on employee delete an employee and etc so to do this we need to have some way to make http requests and the way to do this in angular is to use something called the http client and this is a built-in http client that we can use to make http requests and we can just inject it in the surface so that we can use it so that's exactly what we're gonna be doing so i'm gonna go on here and i'm just gonna do private and i'm gonna call it http and it's gonna be of type http client and make sure this is imported this is supposed to come from angularcommand.http so once we have access to this http client we can actually start making http requests to the backend so i'm gonna create a first function i'm gonna do public and i'm gonna call it get employees so that i can get a list of all the employees of course this function is not gonna take any parameters and it's gonna return an observable so i'm going to do observable and i'm just going to give it a type because the observer was generic so i'm going to say any for now but then later we're going to create a specific interface that can represent our employees on the backend so for now i'm just going to pass in any so it's going to return observable of anything and then i can just call the http client to make the request so i'm going to return this that http client or the http that i have and then i need to make a get request here as you can see we have access to many different types of http request method and for this i need to send the get request because that's what the backend is expecting so i'm going to select get and then here i have to pass in just the url so here i'm going to go up top and then define a url for that so i'm going to do private and i'm just going to call it api server url i'm going to set it equal to some empty string for now we're going to put that url later so now i can just pass in the actual url to the server uh what this request is supposed to be made and again the get method is also a generic as you can see so for now i'm just going to pass in any and then pass in the actual url so this is going to be the url that we define up top so i'm gonna pass in a backtick and then i'm gonna do a dial sign open and close curly braces and this is a simple um javascript notation that you can use to put variable and then string at the same time so i'm gonna do this that api url so this is going to be our url and then i can pass in some more data so i can do forward slash employee and this is supposed to be to go to all so what we're doing in this function is to tell the http client where to make the request and the type request to make so here we call in the http client and then we say hey this is going to be a get request and the return type is going to be anything for now we're going to change that in a minute and the whole point of using typescript is to have type so we have to specify what type of data we're expecting to get back and since this is a get request we don't need to pass in anything in the body and we don't have any headers so we just pass in the url here so we're going to be repeating this process until we can have a function to add employee albeit employee delayed employee we have this service now we can go ahead and use it in our component so let's go to the component.ts which is this file the first thing i want to do is to define a variable that's going to hold all of our employees whenever we get them back so i'm going to do public and this is public because it's going to be used in the html file and by default it's public so you don't necessarily have to say public i'm just coming from a strongly typed language so i like to put all my access modifier but you don't necessarily have to do this so i'm going to call this employees because it's going to hold all of the employees coming from the back end and i'm gonna give it a type of employee array and i do this by passing in those brackets here and i need to import employee and that's coming from our class now i can go down below and create another function that i can use to call our service so to do this we're going to need to inject this service in this class as well the same way that we did inject the http client as you can see here inside of this class i'm just going to go ahead and copy this and go back here and in the constructor i'm going to put a new line i'm going to call in the employee service so i'm going to call it employee service and that's going to be of type employee service and of course we need to import that from our service so make sure you import employee service from wherever your services so now we have access to the service because we just injected it into this app component so what we can do we can create another function so i'm going to do public i'm going to call it get employees and it's not going to accept any parameters and it's going to return void and what i want to do inside of this function is to call our service so i can do this employee service that get employees and since this is unobservable so it's gonna make a request over the internet or over the network and this is gonna take some time that's why it's returning unobservable so we need to subscribe to that observable so after we call the function we have to call subscribe so that we can be notified whenever some data comes back from the server either that could be the actual employees that we requested or some some kind of an error and here i'm just going to specify our response i'm going to say if we get a response back which is going to be of type employee array because that's what it's going to be then we're going to execute some piece of code here and what we want to do is to set this variable that would define on tab to be equal to the body of the request because by default using an observable it's just going to give you whatever response is coming back inside of that body of the response so we can set this equal to response which is going to be the list over here of all of our employees otherwise which in this case of an error we also have to handle that so in case we get an error which is going to be of type http air and we have to import that so in case it's an http error response what we want to do is execute a different piece of code in that case i can just send an alert or just console.login to the console and i can just console that error message so i can just access the error object and then there's a message that i can access here so we can just see it as an alert so now we can see that this component will have all the employees in it whenever we call this function so we can use this variable inside of the template because as you can see it is the template for this specific component which means it's communicating directly with this component so we can access this variable inside of this html file so we need to be able to call this function whenever this component is loaded or whenever it's initialized and one way we can do this is to just implement an interface called uninit so i'm going to do implement it's called on init and then once we implement on a net which is coming from angular core then we need to override a function called ng on init so i'm gonna go right below the constructor and i'm gonna do ng on in it and it doesn't take any parameters and all i have to do now is to call our function inside of this ngo in it because it's gonna run whenever this component is initialized so i can do this get employees and that's just the name of our function down below so now whenever this component is initialized it's going to call this function and this function in turn is going to call our function that we just defined down here and then it's going to set our employees whenever we get the response back from the server and if we get on an error then we're just going to send an alert show that error to the user so now i can go into the component where we have all of our html and we don't need all this stuff this is just the default that came with angular and all i want to do now is to just define some div so i'm going to do div and inside of this div i can just use ng4 so that i can loop on all of the actual employees that i'm getting from the backend so i can just do ng4 and then set this equal to let employee which is going to be a local variable of employees which is the variable coming from the actual component so then it's going to loop over every single one of those employees and save each one of them in a variable called employee so inside that div then i can go ahead and create another div and then let's say i want to display the name of the employee so i can do string interpolation and i can access the local variable employee and then i can do that name as you can see i have intelligence because i defined the type as an interface in the application so i can access the name of the employee so we can do just that for now um just so we can see the name of the employee and to close this and remove this dave here and remove this extra so that's that's very simple i just want to show you guys uh what we get back from the actual server there's one last thing to do is to just go back you can see the employee service we have to specify the actual uh url which is localhost 8080. so the way i want to do this is to go into the environment folder and inside of the environment folder we have two files here there's one environment configuration file for production and one for uh development so we're gonna put this in our development because right now we're at localhost so we're using the one for development as you can see production is false on this one for production you can see production is true here so we're not using this because we're not going into production yet but we're gonna use the one for development so i'm gonna go back into the environment for development and then here i'm just going to pass in a new attribute to this and it's going to be just api base url you can just give this a name you want i'm going to set this equal to our url which is http colon double floor slash localhost and that's ade and this is the url for the server for our backend so now we can access this url using our variable so let's go back into the employee service so here instead of empty string we can just call the environment which is down here and then we can just access the api piece url so visual studio code is importing everything for me but you really have to make sure that you're importing everything and you have to make sure that all the packages are coming from the right place like http clients coming from http um from angular common http and observer was coming from rxjx so now we have access to our base url here and one last thing we have to do to configure the service is to let the entire angular application app know about the service so we we're doing this here by injecting it here and then saying provided in root which is the root component of our app in that case that would be this component right here this module so if we don't have this then we have to register this service as a provider in here so you would go here and then say employee service like this okay so you either do it like this just by saying provided in root or you just do it manually and in here like this so now our service is configured and the entire angular application is aware of it and we can go ahead and give this a try all right so i'm gonna go ahead and start the front application and then we're gonna check it out in the browser so i'm gonna go to view and then open view i want to open the terminal panel and i'm just going to do energy serve and we're going to let this come up now also make sure the back end is running so my back end is running since this is making calls to the back end you have to make sure that the backing is running as well and as you can see here my backend is running and it's listening on port 8080 so let's wait for this to come up and the application is up so let's go into browser and take a look i'm going to go ahead and click ok and let this refresh and it looks like we get an error and that's because we didn't bring in the http module so whenever you're using the http client you have to bring in the http module in the app module file so i'm gonna close this for a second and as you can see here we're using the http client so i have to go into the app module and then bring in the http client module so here i'm just gonna do http client module and make sure it's imported here from the same package and let the app rebuild i'm going to open the terminal again as you can see the app compiled successfully so let's go back to the browser and now i'm getting a coarse error as you can see here we're not able to reach out to the back end because of course configuration and technically what this is it's a policy that is enforced in all modern browsers which means that an application running in a run domain cannot access resources in another domain or in an application running in another domain so we have to put a configuration in the backend to tell the back and say hey allow this front-end application running on this origin or this url to access your resources and if you want to know more about it you can just go to this documentation from mozilla and you can read more about it here as you can see it's a mechanism that uses http headers to tell browsers to give a web application running in one origin access to selected resources from a different origin so that's technically what's happening with us because this application is running on locals 4200 and the backend is running on locos 8080 so they can't communicate with each other because they belong to different domains unless the end explicitly say hey allow this application running on this domain to access resources so let's go back to the back end and i'm going to minimize this for a second and i'm going to go to the main application class and then i'm gonna put a course configuration here so the course configuration is really boilerplate code it's just something that you're probably gonna you know copy paste in every single application and then do slight modification to it so i'm just gonna paste the code and then i'm gonna walk you through it so i'm gonna go down here and then paste it and you can see it's a course filter configuration so all we're doing here is to create a course filter and for this we need the course configuration so in the configuration is where we set the what we want so here you can see i'm allowing credential i'm setting the allowed origin in that case it's our application running on 4200 and then below i'm allowing certain headers so origin accept authorization etc and then i'm also exposing certain headers so you have to add all of those to the configuration and i need to import this and then we have to pass that configuration to a url course configuration so because this is all url based so we say hey create this new object which is a url-based course configuration and then pass our configuration which is the regular course configuration and we set that to all the routes in the application which is the root route of the application which is forward slash star star and then we return a new course filter with that url based course configuration so that's all we have to do here and make sure you have everything imported and this is really a piece of code that i just have somewhere and in some github repository and i just copy and paste it every time and then i make some slight modification to it because it's pretty much going to be the same every time you're building this type of application and then you want access to some front-end applications so you'll probably have some configuration similar to this so that's why i just have it somewhere and i just copy and paste it every time and then i change the headers that i want to expose and the methods that i want to expose so now i'm going to go ahead and restart this backing application so i'm going to restart it and let it come up so the application is up let's see all right so we're running so let's go back to the browser and let this refresh and now if i zoom in you can see since we're console logging the employees you can see they're all here and if i zoom in here you can see we have all the employees here so our app is working as expected so what i'm going to do in the next lecture is just show you guys to you why that i'm going to be using or the html template that i'm going to be using so i'll see you guys in the next one so for right now the app looks like this and the ui that i'm going to be using is at this website bootday.com so if you navigate to this url you'll learn under this page and you can see the snippet that you can use and you can use it it's under a free mit license as you can see here permission is about granted free of charge to any person obtaining a copy of the software blah blah blah so you can use this template or snippet and if you scroll down a little bit you'll see the html code for it so you can just copy that to your clipboard and then paste it wherever you need to and here's the custom css styling for this so um this whole snippet is using bootstrap but there's a little bit of custom styles that you need and that's down here and you can just copy to a clipboard and paste it to your style so i'm gonna go ahead and paste the html code for this along with the css and then i'm gonna import bootstrap into the project as well so if you don't know what bootstrap is obviously i'm assuming you guys know what it is it's a csm framework that's like extremely popular you can just google bootstrap and then you'll see what it is and there's like tons of resources online that you can use to learn it so let's go ahead and make our app look pretty i'm gonna go to the application and i need to go to the template so i'm gonna go to the template and i'm going to remove all of this and then paste the code for the snippet that i just showed you so i'm going to paste it i'm going to close that for now and then i need to bring in everything for bootstrap and the custom style so i'm gonna go to the style for this app so scroll down to the bottom you'll see this file called styles.css and then in there you can import style like you can import a cdn or you can just add custom styling or whatever css styles that you want so i'm gonna go back to the website and scroll down i need to copy this so i'm gonna copy it go back and paste it i don't think we're using this bad here um but i'm just going to leave it anyways and then i need to import bootstrap because this is powered by bootstrap and this part is only the custom css styling for this so we need to import bootstrap as well so i'm going to go up here and then paste the bootstrap link along with the font awesome cdn so that we can have access to the little icons that we saw so now if we go back and i'm going to zoom out and close this for now you can see we have this navigation bar and then we have this card right here which is the same card as as this one we just haven't put in all the information on it yet but it's the same card so i'm gonna walk you through the template a little bit so let's go back to the app and i'm gonna collapse this close this style and i'm gonna scroll off so at the top i have a navigation so as you can see from line 1 to line 16 this is the whole nav bar and then i have a form here so this is this form right here to search an employee which is this form from line 12 to lines 14 and then i have a button right here and it's this button right here so i can click it well i can't click it now it's not going to do anything but this is the button which is add employee so what i want to do is to loop over these cards and increase as many cards as i need for every single employee so let's go back to the app and the same way that we did earlier when we were just showing the names of the employee we can do something similar so i'm going to go up here and as you can see here we have the cards right here so from line 20 to line 40 that's just the card information with the buttons on it and everything so i can just go here in the element above and then i'm just going to do one in g4 so i'm going to do star in g4 and set that equal to let local variable so employee of employees which is the variable coming from the template so just so you guys remember if i go back to the template i'm referencing this employees here which is the arrays of all the employees that i'm getting from the end and just i'm just creating this local variable here for every single one of those as i loop through them so now i can use this local variable in this card and that's going to create as many cards for as many employees so i'm going to copy this and for the image right here i'm going to pass in this employee that imagerail and another thing i want to do is to put a safe navigation operator so it's going to look like this you just put a question mark so what this is doing is it's making sure that this employee exists before it tries to access any attributes on that employee which is a safe way to navigate to a certain attribute so sometimes if you don't have that and then the browser is trying to parse this url right here or whatever it is that you're trying to access on that employee and that employee doesn't exist yet or it's not loaded yet then it's going to throw an error in the browser so to avoid that you put this question mark right here and that's just a safe way to navigate to attributes on an object so i'm going to come down here i'm just going to copy this and in the h5 i'm going to just put the name of the employee so i'm going to do name and in the paragraph here in the p i'm gonna add the job title so i'm gonna do this and do job title and then i'm gonna go down below here i'm gonna put the email so i'm gonna email and then here i'm just gonna do the phone and phone and another curly braces one here and one more here and another one here okay so i'm gonna save this and make sure this reloads open the terminal you can see compiled successful oh it's compiling right now just give it a second okay so let's go back to the browser as you can see here we have all the information it doesn't look right right so i think i miss a curly braces and the employee name so let's go back and right here i'm just going to put the close curly braces and save and let it rebuild and go back and let this refresh and now you can see we have all of the information for all the employees and i don't see the email as you can see here the email is missing so let's go ahead and fix that so i'm gonna close this go down and that's because we put this in the icon so we have to remove this here and put in the li which is the list item and save it and go back let this reload and now our ui looks good so for now this is all we're doing is just listing all of the employees and those buttons are not working so we're gonna have to work on those buttons as well as you can see we didn't have to create all this html code ourselves so it's really helpful to just use those templates and then just leverage them or just make slight modification as you can see here i remove all of the social links because i'm not using them so that's pretty easy but then i use everything else and that looks pretty cool so that's another thing in software development so you have to leverage as much code as you can now you always have to give credit to the author of a piece of a code but if you can leverage something then you have the leverage you have to reinvent the will so i'll see you guys in the next one now the app looks good but we have zero functionality so if we click on this nothing happens we click on those buttons nothing happens so what i want to do is to have a model come up every time we click on one of those button so if they click on edit employee i want this model to come up a pop-up layer or pop-up window to come up with a form where they can put in the employee information and then two buttons at the bottom of that form i want to save i want to close to auto cancel and i want the same for the edit so when they click on edit i want a pop-up window to come up and that pop-up window should be pre-filled with the existing employee information and then they can edit it and then save and when they click on the x here or delete i want a pop-up layer to come up again or a model and they can either delete or cancel so as you can see those three functionalities are very similar the models are going to be different or the layers are going to be different but all of the three functionalities are the same so if we go back to the template and i'm going to close this for now i'm going to scroll up a little bit so we have this button here to add an employee and this right here is the list of all of the employee with the cards so we're not going to do anything there but down here we have the two buttons as you can see here we have the um pencil button button with the pencil icon and the other one to delete so we have the edit and the delete buttons right here so we can create a function that can take care of that for us we can create a function that every time we click it we pass in some parameters that tells which model to open so we can create one function that can open all three of the models as you can see we have the add model here i'm just gonna collapse it then we have the edit model here i'm gonna collapse it and then we have to delete model here i'm gonna collapse it and this is the notification that you're seeing which we're going to only display when there is absolutely no employees to show so we have to add those functionalities so that we can have a working application so i'm going to go back to bootstrap and i'm just going to click on bootstrap 4 i think that's the one that this guy is using for this template so i'm going to close this for now because i don't need them i'm going to search for a model i need to understand how this thing works so if you scroll down a little bit you see an example here and what i'm interested in is this button right here so you can have a button to launch them so if you see i can click it and then it comes up okay so we have the models already so we have those lines of code already in the application we just need to have this button here now there's two ways at least i know you can approach this you can either have those buttons and then you call this button and click them or you can do everything programmatically so in my case i'm gonna do everything programmatically so as you can see here we need to have this button here the type has to be a button and then we don't care about this class because we're not going to display this button and then we need to give it a data toggle which is going to be model we need to give it a data target which is going to be the id of the model itself as you can see here or modal however this is pronounced so we can programmatically create a button and depending on what button they click on the ui so either add employee or edit or delete we pass in this id to that function and then you can call the proper model so as just so i can use this for an example i'm just going to show you how we can do this in a programmatic way i'm going to go back to the ts file and then right down below here i'm going to create a new method so i'm going to public and i'm going to call it on open model and what i want to pass is employee so i'm going to pass in the employee so that would be the employee that they're either adding or editing or deleting and i want to pass a mode and that's going to be a string so what the mode is going to tell me is what exactly the user is trying to do so that will help me determine which modal or model to open so if the mode is add employee for example then we're going to open the add employee model if it's edit we're going to open edit etc so this function is not going to return anything so i'm going to pass in void as the return type and then open and close curly braces so the first thing i want to do is create a button so i'm going to do const button and i'm going to say document dot create element [Music] and we're gonna pass in the name of the element that we wanted to create in that case it's gonna be a button so we have the button created so this is um this button right here okay so it's gonna create this button right here we don't have those attributes yet like the data toggle and the dead target we're going to add those in a minute so we created the button so we have to change the type to a button because by default when we create a button the type is is submit and we're not going to use this button for any submission so we have to change the type on that button so down below we're going to button that type and we're going to set that to a string that's going to be button okay so we change the type from submit which is the default to button and since we're not going to display this button i can also set some styling to display none so i can do button oops that style and i can access the display oops as you can see it comes up here and then i can set that equal to none and you know if you know a little bit of css you know this is just gonna hide it in the ui because we don't need to show that button um we already have our button like those buttons right here and this link right here too to called and then open the model so we don't need this we don't need to show this button anywhere on the ui so that's why i'm displaying i set the display to none i'm going to scroll up a little bit so let me go back and let's see what i want to do next so what i want to do next is to add this attribute which is the data toggle which is going to be model so that's going to be model for every single one of them so we don't need to change that so i'm going to go back and i'm going to go down i'm going to say for this button i want to add some attributes so i'm going to set attribute and in here i'm going to pass in the attribute that i want to add in that case that's going to be the data toggle so i'm going to do data toggle and i want to set this to modal and semicolon so what i'm doing here is to add this to this button and i'm just doing that programmatically instead of doing it manually by just creating the button and the element now the data toggle which is going to be the id of the model that i want to open is going to be dynamic so i'm not going to set a value for it yet so let's go back and what i want to do is to check what mode that the user is in which means which one of the button that they click so to do this i'm going to create an if statement so i'm going to do if the mode which i'm getting from my function here i'm gonna say if this is equal to add then i know they're trying to add an employee then in that case i can set a different attribute for the data target so i'm just going to copy this paste it down here and i want to change this to data target and that's going to be the id of the model that i want to open so let's go back to the ui so for the first one which is the add i want to add this id right here which is ed employee model so i'm going to copy this go back and then put this down here so what i want to do is do the same thing for every single one of the different models that i have so i'm just going to copy this if statement go down here i'm going to paste it one more time i'm going to paste it for the second time i'm gonna look for edit like if they're trying to do an edit and the third time i'm gonna look for a delete so if the mode is delayed we're gonna open the delayed model which means we're gonna pass in a different data target so here i'm gonna come back here and then grab this id for the update so as you can see edit or update employee model pass this in as the data target and for the last one i'm gonna pass in the delete employee model just like that so depending on which button they click this attribute which is going to be the data target is going to be different and i think since this is referencing an id i need to put the hash size so i'm going to put hash sign here and all three of them just like that and scroll up a little bit so now what i want to do is to add this button somewhere in the template itself so as we can see the button only exists in the javascript or the typescript world here the button is not on here so we need to have a way to place this button somewhere here so i'm going to scroll up a little bit and i'm going to give this main container which is like the main container for the page i'm just going to give it an id and i'm just going to call it main container or something like that okay so now we can grab this element and then we can add the button in this um div right here which is the main div of the entire the main page so let's go back here and i'm going to scroll up a little bit i create another constant i'm going to call it container and i'm just going to do document dot get element by id and then i'm gonna pass in the id i'm gonna go back just copy that id and then paste it here okay so now we have access to this this entire div right here on line 17. so now what we can do inside this div we can just add this button so we can go down here after all the checks are done so that we know which data target to edit this button we can come down here and then in the container we can do append child and then here we're just passing the button which is this button right here that we create just like that so now the button exists in this html template it exists under dom and all we have to do after that is just click this button so i can just do this button that click there's a click you can call on the button as you can see here it's coming up and then we click the button because that's what we're trying to do so now the button will have all of those attributes on it and then when we click the button it will open the appropriate model so now the only thing we have to do there are some scripts that we need that bootstrap needs to be able to open the model with this click of a button with those toggle and data target so let's go back to the main file of the application which is the index.html this is the file that's going to be ultimately served in a browser and then i'm just going to go down here at the bottom and then paste those script as you can see there's just jquery and then popper and then bootstrapmen.js those are just the sjs file that you need to have whenever you uh you're using bootstrap and you need to have your model to come up because there's like things happening in the script in the background that's making this happen and if you know if you don't know where to get those we can go back to the bootstrap and then go to get started and you can see that here's the css for the styling and then here's all of the js that you need and that's what we just pasted in as you can see we have the jiggery paper and then bootstrap so that's exactly what we just did just right here so i'm going to close this and i'm going to open the terminal again and i'm just going to save this and now if we click if we add this button over to a click listener we should be able to open either of the models so let's go back to the template i don't need that quite yet and i'm going to scroll up so here i'm going to add a click listener so i'm going to do click and what i want to do is call the function that i just created so here i'm going to pass in the name of the function and for this one i need to pass in an employee and since this is the open model so i don't know i don't have the employee yet because they're trying to like create a new employee i'm gonna pass a null and for the mode i'm just gonna pass in add i'm gonna do add okay so that means that this is the ed employee so it's gonna do all the proper logic which is gonna be here and then click the button so let's go back i'm just gonna copy this click event listener and then go down here so here we have the two other buttons so to edit and then delete an employee so i'm going to add the click listener on this link so i'm going to put this here and then i'm going to put this here and here i can pass in the employee because remember we're looping so we have access to this employee here which is the local variable that we define here so if every time it loops we have access to this employee that is in the current iteration of the loop so instead of passing null we pass in the employee here and then here is going to be edit and this is going to be delete which is the string that we're looking for here edit delete so now if we save all of this and let's make sure this is this is compiling okay so now if we go back and go back to the app if i click add employee now you can see we open the ed employee model we click on edit we open the edit employee model and if we click on delete we open the delete obviously this is not working yet because we haven't added all the functionalities but that's just one way to do this programmatically to open different models on the screen another approach to this is to put those buttons like you would put three buttons on the html template itself and then you would hide this button like you would put this style this lay down on this button and then you would get this button like this so you do document get element by id and then you call you get the button and then you can just call the click on it so i think this is a little bit cleaner it's more agile because you have one function that will do the same thing so you don't have to put all those unnecessary elements on the page and things like that so i'll see you guys in the next one so we have a logic here um so we have three if statements i'm gonna bring this down a little bit so you guys can see the whole function i want to debug this a little bit just to make sure that you know everything is taking the appropriate route so that i make sure that the logic is working properly we have three if statements so just to be sure at least one time just check this out to make sure it's working properly so i'm gonna go back to the browser and i'm going to right click and do inspect and i want to go to source because i want to see the actual file and debug them so if you don't see the ts file like whenever you go to source you can go to webpack i'm going to collapse this and then go to this dat folder and then go into the source you can see this is the folder of the app and then go into app and then go into the employee [Music] well appcomponent.ts and then i'm going to collapse this so you can see now we have access to the code that we just written so i'm going to put a breakpoint here by just clicking on that line number 33 and then i'm going to click to make sure that it's taking the appropriate logic route whenever i click on whatever button so if i click on add it should go into this logic and then run this two lines at the bottom 47.48 so if i click on add it comes here it stops at the breakpoint so i'm gonna click on this arrow to step over so i'm gonna go one two okay keep going so it's gonna come here so now i want to see what's in the button so you can see all of those attributes so if i hover over it and scroll down a little bit and you can see here all the information on the button and scroll down a little bit more you can see the outer html for the button so you can see here we have a button of type button and the data toggle is model and the style is display none okay so our button is looking good so now after this line we should see the data target so if us step over so it goes into this if statement on line 39 because the mode is add and we can over over mode we can see the mode is at coming from the template so it's going to go over again and then this is going to be false so it won't do this line on line 42 you won't do line 45 skip it and now it's going to add this into the container which is you can see when i override this the entire page so i'm just adding this button anywhere on that page so i'm going to click so now the button is in in here somewhere because i added it to the template which is the main container or the main d for the application and now i'm just gonna click that button so if i finish this you can see this comes up i can close it and then click on edit it's going to stop here again so this time it should go into line 42 so we're gonna skip this because we already know what's gonna happen so it's gonna come on line 38 supposed to skip it because the mode should be edit see skips it go into 42 and add the data target and then go down here so at this point we can look at the button again and scroll down we can see all of the attributes that we added so here's the there's the type again it's going to be somewhere at the bottom so here's the button so button type button there i toggle modal and then the target is the update employee so you can see everything looks good okay and you can see the type again here so i can finish this again and you can see the edit employee model comes up and it's going to be the same for the delay stops here go over those lines it's going to skip 38 because it's supposed to be delayed escape this one as well because it's delayed it's going to come in and it's going to execute line 45 okay and then it's gonna finish as you can see here so everything is working as expected at least this is like one form of test i guess but this is not formal test that you would do for an application you'd probably have some automated tests and then use some fancy library to run in the browser and then click all the buttons for you but i just wanted to show you that this is actually working in that our logic is good so i'll see you guys in the next one what i want to do now is to add functionality to this form right here so i want that whenever you add in the information for a new employee and you click save changes i want to make a call to the backend and then save this new employee to the backend and then show the new employee that you added on that list so i'm going to use angular form because obviously this is a form so we need to bring in the forms module so i'm going to go back to the app go to the app modules and then in the import for this well i think i already have it here so that's the forms module so make sure you had that imported i don't remember when i added this here but anyways you need to add in the forms module here so let's go back to the template and i need to go to i'm going to close this for now so this is the ed employee model so in the form here i want to give a reference to this form so i'm going to come here and then do that sign i'm just going to call it ed form and set it equal to ng form and that's how you set a reference to um to a form you set whatever name you want with the hash in front of it and then you say this is going to be unenergy form and in here i need to give it a ng unsubmit so that we can listen to the unsubmit event so ng submit and i want to set this equal to a new function that i'm going to create so i'm going to call it on add employee or something like that and this is going to take the form so i'm going to pass in the form that i defined here by that name i'm going to copy this and pass it here so we don't have this function yet so i'm gonna go ahead and create it so i'm gonna go back go above here go down and i'm gonna call public pass the name and it takes a form so i'm going to call it the same name so that's going to be the add form here and it's going to be of type in g form so in g form and it's not going to return anything so i'm going to pass the return type as void and open and close curly braces let's cool up a little bit so let's go back here so for us to be able to turn this uh form into a form that angular can understand we need to have the name attribute as you can see for every single one of those input i have to name here i'm gonna move this over here so you guys can see it clear so you have to have this name here because it's gonna be used as the key for this input and all you have to do after that is to just add ng model on this input so i'm going to do ng model and i'm just going to copy it and put it on every single one of those inputs for the email i do the same for the job title i do the same for the phone i'll do the same and for the image rail i'm going to do the same and for the button first so for the first button i'm not going to do anything but for the second one i want to add the disable attribute so that we can disable the button unless the form is valid so for this i'm just going to add in the disable attribute so disable and i'm just going to set this equal to the form that invalid so remember we have a reference to the form here so i'm going to pass it down below here and then i'm going to check to see if that form isn't valid so if that form is invalid then this is going to be true so this button is going to be disabled so we can save all of that and go back to the browser let it reload and click to open the form and you can see the button is disabled so we know that this is working so if we put something here something in every single one of this input you can if you watch this button as soon as i do the last one it's enabled okay so that's good so let's go back now what i want to do i want that whenever they click on this button so make sure the type of this button is submit that's how you call this ng on submit so this type of this button it must be submit inside of the form so now we want to handle this form right here so whenever they click on this button down below it's going to call this function which is on ng and submit so what we want to do is to just take that form take the value inside of that form which is going to be in form of a json object and then send it to the backend so let's go back to the ts file and work on this method so what i want to do is to just call the employee service so i'm going to this employeeservice.ed employee and then here i'm going to pass in the form so the form that value so the value on the form is going to be a json representation of every single one of those inputs with those names attributes and i'm going to debug it and show you that in a second so you remember this is the service making a call to the backend so we have to subscribe to it so that we can be notified whenever um there is something that comes back from the server so we're gonna call subscribe and inside of that we're going to wait for a response so we're going to say if we have a response which is going to be an employee [Music] then we want to execute some piece of code open and close curly braces otherwise we're going to do something else so i'm going to copy the same and then paste it down below but this time we're looking for an error and that's going to be of type http error response so in case it's an error i want to show an alert so i'm going to do alert and i'm going to access the error message you can see there's a message on the air itself so that's it for the error handling now there's probably a better way to handle this so instead of just alerting you probably will have like some sort of a notification and then you pass the error to it or whatever but you know that's not necessary in this case and then here what i want to do whenever i got the response we can log the response so that we can see what it is so we can do console log and then pass in the response [Music] and then i want to call the get all employees so that i can reload all of the employees just like that so i'm going to save it and let's see what's happening if we have any errors i'm going to open the terminal again bring it up okay compile successfully so this should work actually so if we click on this form to save all the changes it should call this function so there's one last thing i want to do so you can see that when you call when you click here and you click on save changes we want this layer to go away so we have to find a way to click this button right here so to do this i'm going to go back and and the template i'm gonna break this down a little bit you can see the id of this button right here so we can get a hold of that button and then click it so whenever they click on this function to add a new employee i'm just going to do document dot get element by id [Music] and then pass in the id of that element which is a button so since it's a button we should have access to the click so we can call click and then close with semicolon and then save that and let this rebuild as you can see at the bottom it's rebuilding all right so let's go back i'm gonna refresh this just to be safe so now if we click add employee and let's do john uh we need the full name john doe [Music] i don't know some ui guy and passing some number and i don't have an image now so i'm gonna leave this blank well i can't leave it blank so i'm just gonna say image url okay so now if i click save changes you can see it's added so because we send it to the back end and then we have it here obviously we don't have an image for this guy so i'm just gonna oh that's a guy so i'm gonna copy this image url oops we can't edit yet yeah we can't do that yet so we can edit but we can come back and edit this so we can't delete nothing's gonna happen we can edit nothing's gonna happen so we can fix this guy later but you can see that the ed employee is working and you can check that out if you go to the console you can see this new object that we get that comes back that's the new employee that we just added and you can see that they have this new field that we didn't add which is the id so we know that the ad employee is working let's go ahead and work on the edit now so we can open the model we just have to pre-load it with the edit user information and then we're gonna add an action listener on this button so that we can save or update this user whenever they click on save so let's go back to the application and the edit is going to be very similar to the ad so i'm just going to go ahead and copy all of this i'm going to close this for now and then go down and paste it i'm just going to call it on update employee and this is going to take an employee [Music] and that's not going to be a form that's going to be the actual employee and i don't need to close the model so i'm just going to delete this because if the user don't want to edit the employee anymore they can just close it themselves and then here i'm just going to pass in the employee and instead of add employee i'm just going to call update employee and everything else is going to be the same so now we can use this function in the form in the model so that we can call this function right here whenever they click on the button so i'm just going to go ahead and copy this go back to the template so this is the update model so i'm just going to collapse it for now and then i'm going to go into the edit model and here's the form so what i want to happen is i want that when they click this button to save the changes i want to call this function um that i just created so let's go back here and in here i'm just going to add a click listener on this button so here i'm just going to click and set it equal to our function and now we have to pass in the employee here okay so how where are we going to get this employee so it's going to be pretty simple so we're just going to bind an employee from the template to an employee on the form or the same employee but we're just binding it to the employee that we're going to have on the form and then we can pass that employee whenever they click on the button to open the model so let's go up here and let's define this employee here so we're gonna do public again you don't have to define public if you just don't have any access modifier it's going to be public by default so i'm just going to do edit employee and that's going to be of type employee [Music] so that's going to represent the whatever employee that they're editing it can be anyone of the employee and then i'm gonna take this employee and then go down here so whenever they click on edit i want to set this employee right so i'm just gonna say this that edit employee which is the employee in this class which is what this means meaning the employee in this class we're going to set it equal to this employee right here so whatever employee that we get whenever we're looping whenever they click on the button to open the model we're going to pass that employee here and then we set it to this employee in this class so now we can use this employee in this class to bind it to this form right here i'm just going to go up tab and then i'm gonna give a reference to this form so i'm gonna go in the form tag and then i'm gonna do hash and i'm just gonna call it edit form and then set it equal to ng form like we did last time so now we have a reference to this entire form so we can use that reference in this method and then pass in the value remember the value is a json representation of the actual input so now this is gonna be exactly like an actual employee because we're gonna bind every input in this form to the employee that we define up here this employee right here so let's go back i'm just gonna copy this so to do this binding we're just gonna set an ng model equal to this employee for whatever attribute so here for the name i'm just gonna do ng model and then set that equal to the employee so double curly braces and then pass in the employee and the class make sure this employee exists and then we can bind it to the name so now this input is going to be bind to this employee in the class for this name input here and we're gonna do this for every single one of the attribute on the employee itself so those two that are hidden uh on line 102 and 103 that's because i have to place the id in the employee code and i don't want to update those now the reason i don't want to update the employee code is because we're just not updating the employee code we want that when the code is set that's the employee good for the user um forever but for the id the reason we have to pass in the id because we want to represent the whole object of the actual employee otherwise if we send it without an id in the back end or if we didn't have this it would just do an ad hybridity would be like oh this is a new user because there's no id there's no existing id so hibernate will be confusing we'll just do an ad instead of an update so we have to pass in this id here so that hibernate can know that this is an update not on that so right here we can pass in the id and then here we're going to pass in the employee code and then here we're going to pass in the email job title and down here we're gonna pass in the phone and then here we pass in the image url so if you pay close attention to this you can see that this is just another way of using a form and send value to the back end and it's pretty much the same thing we're doing here but the only difference is here we pass in the entire form but in the add function we reach out for the value as you can see here we get the value which is the representation adjacent representation of the actual employee itself so from the form if you get the value from that form it will give you just the input as a name value tag and json format so we're pretty much doing the same thing here so down here the difference is we're passing it to this function we pass in the form and the value which is represented as an employee because that's what we're doing here for every single one of those inputs which is why it was important for us to put in the the id and the employee code because we want to represent the whole employee and then we're hiding this because we don't want the user to update this information the id and the employee code but they will be there in the form itself so that whenever we get the value on this form it will be represented as the full employee object itself so just to recap to understand what's happening here because this might be a little bit confusing so if we go into the app component right so let me scroll up a little bit so here we define this edit employee right this edit employee is defined in this class right and what we're doing is we're binding this edit employee whatever it is either if it's empty or whatever the case might be we're binding it to this form right so you can see we do ng model and then we're binding every attribute on this edit employee to one input on this form right and then we give this forum a reference here so with this reference we can access the value down here which is going to be adjacent representation of every single one of those input which is going to be the actual employee now how do we set this employee because we have a lot of employee here so what we do here is every time you click this button we pass this employee in so if we go back to the code whenever they click to edit we're going to call this function down below on openmodel to open the model so whenever it's on edit we're going to say hey this employee on this class which is binding and the form right here make it the employee that they click on because you remember there's gonna be an iteration for every single one of those employees so whenever they click on open modal they're gonna pass in the employee for the actual iteration so this employee will always be set whenever they try to open the edit mark so they open edit model this edit employee gets set and then we're binding this edit employee to the form so then we have access to this value which represents a json format of that employee which is the actual employee so whenever they click on save then we can pass in this here and the reason we're adding those two input as hidden we still have to have them on that form right here is because we want to show every single one of those attribute on that specific employee because if we don't then our object will not be complete so we have to put in all of the attribute for an employee which is the id code email subtitle phone an image url so when we call the id on this we can have a full complete object so now we should be able to test this so let me go back to the browser so if i do i'm just gonna copy this image see if i can update the image so if i do edit as you can see this user is loaded so now i can change the image url save it and you can see now it refreshes so we can also change everything else so if i pass in the let's say the email is john at email.com and let's say they have a new number some random number save you can see it changes right here so we can debug this a little bit just so you can see what's happening here so i'm going to go to source i'm going to zoom in a little bit here so you can see and i'm going to go to whip back to that folder the source and into the app folder and we want to go into the app component.ts and i'm going to collapse this back see if i can zoom in a little bit so when we click on this edit right this method gets called openmodal and it's going to go into this and it's gonna set this edit employee so we can check it out put a breakpoint here click on edit and it stops here step over step over step over step over now it goes into it's gonna go into this if statement you can see now it's going to set this edit employee as the employee in the current iteration which is this employee that we click on so now this add employee is set as you can see here and we can finish this so now this edit employee model is up and we can see we load this user that they click on how did this happen it's because we set this employee to the employee that they click on now whenever they click save we're going to call this an update employee so now if i click save and we look at this employee you can see it's a json representation or key value well we don't have to curl the braces and everything all the little double quotes but it's a json representation of the employee itself with all of the information and that's why we have the id we have the user code we don't have them here because they're they're hidden this input are hidden but we need to have them so that we can send it to the back in so that the backend is not confused say oh this is an existing employee because they have an id so hibernate and the backend will understand that and do an update instead of an act so that's how this whole thing works now that's just one way to do this you could do the same thing that i did with the ed employee you could pass a level form you can do whatever you want i'm going to finish this and you can see well i didn't do any changes but let's say this guy is sql and ui and save okay i'm going to remove this breakpoint and finish this you can see it's updated so let's go back here there's a couple things i want to do so in the app component what i want to do here is want to clear this form right so if i add an employee here i'm gonna add some random guy here [Music] and close this for now and click save okay this guy's added if i try to add another one you can see the form is still has the old guide or the old employee that i just added so i want to clear this and there's a very handy function that you can call on the form so let's go back to the app and here after we loaded all the employee we can clear the form so we can call the form and then call the method on it and this method is reset so we're going to do that and we're going to do that either if it's successful or not successful so that we can clear the form so let's let that rebuild so now if we add someone again some random guy save click on the form again you can see now it's empty so the last thing we have to do is to work on this delay so as you can see we can have the model come up we just have to put an even listener on that yes and then confirm the deletion of this employee so we're going to do that in the next lecture now we need to be able to delete an employee so whenever they click the x here and they click yes then we want the employee to be deleted obviously this is not working because we haven't added the functionality for that so let's go back into the app and i don't remember how the delay works so let's go back to the service so here's the delete so we need the employee id which is gonna be a number so let's go back here what we can do i'm just gonna go down here and then copy this again and then paste it down and i'm gonna change this to on delete employee so we're gonna take the employee id and that's gonna be a number the return type is still void and here we're going to call the delete employee from the service and pass in the employee id and we get an error here and i think it's because this doesn't return anything except the http status code so let's go back to the service yep so this doesn't return anything so it returns void so we can go back here and say whatever the response is going to be it's going to be of type void and we don't need to lock this well actually we can still log it so that we can see what it is and then we're going to call the get employees again to reload everything and then we will show the error message if there's an error and i think that's pretty much everything we have to do now we're going to do something similar that we did last time so whenever it's an edit we're going to define a new variable so this delayed [Music] employee we're gonna set it equal to the employee that's being passed into this function and we need to define this at the class quick fix declare property let's scroll up to see what this did for us so i'm just going to put the qualifier on that so i'm just going to make it public so this is going to represent the delayed employee and then we can use that employee as the employee in the template because it's declared at the class level so scroll down make sure i put this in the right spot it's okay when it's delayed then we set the delay employee to the employee that's being passed in here just like we did with the edit employee so now we can use this to bind it and the template so i'm just gonna copy it go back to the template and i'm gonna collapse the edit model go to the delete one and we can bind it to this button here whenever they click yes so we can add a click listener [Music] and set it equal to our function which is um undelete employee and we're gonna pass in the delete employee so we're gonna delete employee which is coming from the uh component and we're passing the id because that's all we need to call this function and we're gonna put the safe navigator here and we can also add the name of the employee so we're gonna say are you sure you really want to delete employees so and so so we can pass in the employee name here so that's gonna be the delete employee and we want the name so that way we can personify this um this message um let's go up a little bit i think we can do the same for this so edit employee and then we pass in the edit employee name so we can copy this and paste it here so that they know what employee they're deleting so i'm gonna collapse this back so that should work so whenever they click to and they say yes it's gonna call this function and then it's gonna pass in the id of this um employee so let's go back to the app make sure we don't have any errors inspect console okay let's just try to look these images that we don't have like this image in here and here so if we refresh it that's what it's gonna that's what it's gonna say you can see you can't find those images because we didn't put any images for this let's close this and let's delete yes you can see it's gone so let's debug this to make sure it's working properly so again i'm going to go to source and let's go to the open modal line 75 with a breakpoint i'm going to delete this user so it's going to come here and you can see it's the actual user that we're trying to delete and it's gonna go in and it goes it's supposed to go into this so let's see yep goes into this so it's gonna set this delayed employee here so step over look at the delayed employee it's this employee here so we can finish this so this motor is gonna come up so on that form we have this employee here as you can see his name appears here okay so we can say yes so i'm gonna put another breakpoint before i do that so i'm going to put in 63 here so we can see what's happening here so if i do yes and check this id it's id9 which is the id of the employee and it's going to make the call to the back end so we can finish this you can see the employees is removed so that's pretty much everything for this little tiny application now we have to just work on this search employee so that whenever we start typing something here and then we can filter this list right here and then we also have to fix this actually this is a quick fix let's see if i can just fix it real quick so we want to show this in case there is no employee obviously we don't want to show this and then some employee here or even one employee because we have at least one so we need to put a condition on this alert so that we can only show this alert when we have zero employee here and that's super easy to do so let's go back to the app and this is the notification so from from line 153 so what we have to do is to just put a condition on this so we can do this by adding an ngif so i'm going to do ng if so what i want to check is the length of the array so remember we have the list of all the employees on this variable here which is an array as you can see here or a list from a java or collection from a java perspective so we can just check the length of this list and then use that as our condition so we can go back here we're going gonna say if this list exists see if you can get the length on that list okay and we can say if this length is zero then show this list okay oh show this notification so it's gonna check to see if this is true if it's not true then it's not gonna show this alert if it is then it will show this alert which means we have zero employees so if we save this go back you can see now it's gone because we have that condition before i start working on this search here i want to show you the function that i'm going to be using it's the index of function that you can use on array in javascript so if you have an array in javascript you can use this function to find the first index of an element if the element exists otherwise it's going to be -1 if the element doesn't exist so we can use a reverse check on this minus 1 so that we can find out if an element actually exists in an array so it's so it's a smart thing to do but it's very efficient because this index of method is pretty fast let's go back to the application and let's close this for now i'm just gonna go into the component and right before this function i'm gonna create another function and i'm just going to call it search employee so search employees may be better and it's going to take a key and that's going to be your string okay so again it's not going to return anything so i'm going to pass the void that's the return type and then do open and close curly braces so what i want to do is to define a new array where i can store all of the employees that match the actual key so to do this i'm just going to create a constant and i'm just going to call it result which is the result of all the employee and i'm going to set it equal to well i have to give it a type first since we're using typescript so that's going to be of type employee array and i'm going to initialize it as an empty array just like that oops semicolon so now we can use this constant to store all of the employees that match this key here or either their name or their email match is the the actual key or something else so here i'm just gonna create a loop so i'm gonna do four every employee will have to define this first constant employee of the employee list for this employees so we're going to loop over all of the employees that we have in the actual application so this employees here is this employee's array that we define up here so that holds all of the employees on the page so we're gonna loop through all of them so let's go down and we're gonna come back here okay so we'll define this temporary variable or this local variable here to hold all of the employees uh whose name or email or job title match this key here and then we're gonna if they do match the key then we're gonna put them in this result here so that we can filter the list so what i wanna do now i wanna do my check so i wanna do if for that employee that i have here okay i'm gonna put their name in lower case so i'm gonna do that employee name and i want this to be to lower case okay because i want everything to be lower case now i want to say if the index of this key exists inside of it so i'm going to do key and then do two lowercase as well so that they can both be in the same case just like that and then i check to see if this is not equal minus one which means we found it so minus one so that's gonna be the check and i'm gonna go over this in just a second so in that case what we want to do we want to add that employee into this list so we can call results and we can just push and we're going to push the employee in the current iteration which is this employee right here okay so we need to close this and then remove this extra parenthesis so just to understand what this is doing right so we're gonna iterate or loop over all of the employees all right all of them and then we're gonna see for every single one of them so this constant employee here we're gonna say check for the name we're gonna turn that lane name into lower case or uppercase it doesn't matter and we're going to do index of the key which is whatever the user passed in when they're searching in the search box turn that to lowercase as well in case the user put uppercase and then we're going to check to see if that doesn't equal minus 1. so remember if it equals minus 1 that mean is not present so if we check for not equal minus 1 that means it's present for the index so if you remember so that's gonna put that employee into this list and then we can just do this for everything else so we can do it for the email or whatever else so i'm gonna copy this go on a new line and do an r and then paste that and i'm gonna go on a new line again into an r paste it again and here we can check for the email so if it matches the email the phone and i think we need to do it one more time so i'm gonna do another or pass it again and do the actual job title okay so that way we check for we check this key against the name the email the phone the job title and then we put it into this new array right here so after we loop right here from line 76 we can set that list of employees to this result because then that's represent our new list here so that will work for every time they search so every time they search it would work but the only problem is we need to have a way to reset this in case they put in a key and the key doesn't match nothing on this check here so it doesn't match the name the email or phone number or title of any of those employees here so the way i'm going to do this is to check to see if i have anything in results i can do if result [Music] that length and make sure if it's zero or if i don't have a key so if key is not truthy so that means they didn't enter anything it's empty so in that case then i can just call the method to get all the employees again and by calling this method it's going to reset this employee to the employees from the backend so now we can save all of that so i just have to use this function on some listener on this inbox here so let's go back to the app and let's go back to the template i'm gonna scroll up so this is the form right so here's the input for the search right so what we can do here we can add our function so actually let me do it after the type so i can come here and then i can do so that's not going to be a click because we need to listen every time that they type something in so in that case we need to use in ng model change okay so this is going to fire whatever function you set it equal to every time the input change and then we can pass in the employee here and then here we can pass in some key values so we can say value so then now we have to set this key so i'm going to put this on a new line so we don't have this key right but we have this input so we can give this input some local reference so i'm gonna do hash sign and that's gonna be key because that's the name that we set here and i'm just gonna set this equal to ng model okay so now we have this local reference on this form and of course we have to pass in this ng model on the form itself and we have a name which is key and we have ng model and then we pass it in here so instead of using the form here we could use the form here and then put it on the form and then call this function but we're just doing it on the input itself because you can also put a reference on the input itself and then you can access the same value on that input so if we save all of this and go back i'm going to refresh this just to be safe if i do daniel you can see it's refreshing and let's see if i can do some console log for this so you can see what's happening so if i check this key here i can just do console.log and then pass in the key so whatever key that they pass in which is whatever input they put in the input form and save it let it reload and let's inspect that let's go to the console clear this and now oops it's just still loading so if i do d you can see it's typed d a daniel you can see it's filtering so that's how this works but there's another way we could do this we could actually um have this in the back end and then you know filter it in the back end and then call it and back in and get the response but that's just an extra load on our server and doing it this way is a lot easier so that's pretty much everything obviously there's a lot going on here and i would probably need to take a little bit more time to explain like what all of these things is doing but again i'm assuming you're a little bit familiar with angular this app is very minimal so there's not really a lot going on here well maybe but uh in reality if you look at actual you know enterprise application and things like that there's not really a lot going on here we just have a few functionalities we can add you know edit and then delete and then search so those are pretty simple standard functionality and i just wanted to give you guys an idea of how you can build a simple little application but then you try to stick to best practice and do things the right way so i hope you enjoy this and all of the code is in the description and i'll see you guys in the next one i hope you made this far and as you saw throughout this course you have learned quite a lot to be honest and if you want to further increase your knowledge on spring boot and angular go ahead and check the link in the description of this video where junior has a complete course teaching you everything you need to know to master spring boot and angle ajs this is all from me i'm gonna let junior wrap things up and i'll catch you in the next one assalamualaikum you

Channel: Amigoscode

Views: 236,574

Rating: 4.9462485 out of 5

Keywords: amigoscode, spring boot full stack project, spring boot full stack application, spring boot full stack developer, spring boot full stack, spring boot, spring framework, spring data jpa, spring boot and mysql tutorial, spring boot react, spring boot microservices, spring boot api, spring boot project, spring boot application, java tutorial, learn java, spring security, angular tutorial, spring boot and angular tutorial

Id: Gx4iBLKLVHk

Length: 159min 56sec (9596 seconds)

Published: Fri Feb 05 2021