Java Full Stack Development with Spring Boot and Angular

welcome to this course on full-stack application development with angular and spring boot from in 28 minutes I am langa carnem I have more than 20 years of application development experience with a variety of languages like Java Python JavaScript and a variety of frameworks like REST API frameworks like spring boot and front-end frameworks like angular that in 28 minutes we ask ourselves one question every day how do we create more amazing course experiences the success we had on a variety of platforms including udemy with more than 200,000 learners is a result of this pursuit of excellence beloved programming and we think full-stack application development is one of the most important skills for a developer today in this awesome course with more than hundred steps you will understand how to build a to do management application step by step connecting an angular front-end to a spring boot REST API we focus extensively on angular during this course and help you learn the basics of modules components data binding and routing with angular we also help you implement forms with validations we would execute a number of REST API calls from the angular front end we make extensive use of the dependency injection capabilities of the angular framework will your spring security to secure our restful api and we would use two different approaches number one basic authentication number two JWT or jot JSON web token we would expect you to know the basics of Java programming a bit of JavaScript programming experience and a little bit of experience working with dependency injection with the Spring Framework we will be helping you to install all the tools that you would need for this course the complete source code and step-by-step details of what we would be doing during this course will be available on our github repository what are you waiting for let's have some fun developing a full stack web application with angular and spring bolt we had a lot of fun creating this course for you and we are sure you would have a lot of fun too if you want to learn more go ahead and click the enroll button or you can take a test drive by using the free preview feature good luck and I'll see you in the course welcome back in this step we want to help you get quickly started with this course the first thing I would want to do is to congratulate you on making a great decision in choosing this course now let's get down to getting started with the course the first thing you would need to do is to bookmark the github repository of this course you'll find a link to it in the resources section of the video you are watching you just need to hover over to the left top corner of your screen and you should see a resources and a link to the github repository just click it and launch the github repository and bookmark the URL the github repository contains links to all the installation videos step-by-step details of the course and this source code also present is backup of all the code at various points for example this is the last backup this is the final backup of the code in the specific course you would see that the entire code is present as a single file so that if you faced a problem you can use this as a reference you can look at how it is done here and check how you are approaching it the first two sections of this course would extensively focus on angular the two tools you would need for that section is NPM and visual studio code we can install Java and eclipse a little later for now you can launch this playlist which would help us to install node.js which is NPM and Visual Studio code this place list contains three steps installing node.js and NPM quick introduction to NPM and installing visual studio code I would recommend to pause the video in here and continue with the installation of node.js and Visual Studio code if you have successfully install node.js and Visual Studio code you are now all set to rock the angular world if you are a Java developer the first few steps can be overwhelming you will be using a new language mode on JavaScript and typescript you'll be using a new IDE Visual Studio code you'll be using a new framework angular with a new tool angular CLI which is used to create angular projects the first seven steps contain a little bit of theory to introduce you to the various part of developing modern JavaScript applications once you get to the second section of the course you will be spending 95% of the time getting your hands dirty the recommended approach to follow the course is to take steps one at a time take them in the order which is present in here however if you are in a hurry to get your hands dirty and write a lot of code then you can skip step 6 and step 7 and come back to them a little later we'll talk about all the remaining sections of this course when we get to them let's get started with understanding the application architecture in the next step welcome back I'm excited to help you learn full-stack application development with angular and spring boot and I am sure you are as excited as I am in this step let's discuss the high-level architecture of the application we are going to build in this specific course let's start with understanding the basic functionality of the application that we are going to build you're going to build a to-do management application everyone has things you'd want to do you want to learn you can manage them in this specific to do management application you can add two deuce delete to deuce update other than that we'll also have authentication and authorization features typically login and logout capabilities let's now shift our attention towards the high level architecture of this application what we are going to develop is a full stack web application whenever we talk about a full stack application we are talking about a front-end application which is talking to a back-end API or a web service in this course we'll be using angular to build a front-end application angle is one of the most popular free works to build friend tents angler has a variety of features like components modules forms HTTP communication to talk with the web services it makes it easy to develop friend and applications angle it uses a language called typescript if you are new to typescript then typescript is nothing but modern JavaScript plus typing we'll discuss a little bit more about typescript in a subsequent video enough it's sufficient to understand the different an application will be developed using the angular framework which would be based on a language called typescript to build a RESTful API or the restful web services in the backend we will be using the spring boot framework we will be using Java as the language spring boot is the number one Java framework to build restful api s-- and micro services we will create multiple restful services for authentication as well as to do management as far as authentication is concerned we will start with basic authentication and also discuss about how to use JW teas or JSON web tokens for authentication we will be using the spring security framework to build authentication around the restful api before we move on to the next step let's discuss an important question we are talking about full stack application why should you really build a full stack application why should you create a separate back-end and a separate front end there is a lot of complexity associated with building separate backends and friend ends you need to understand multiple languages you need to understand multiple frameworks like spring boot and angular why should you do that the most important reason is to create a flexible architecture which can be extended to meet the future needs let's imagine that you would want to develop a native mobile application in future let's say you want to develop an iPhone app or you would want to develop an Android application maybe you would want to connect with a Internet of Things device in such kind of situations you can completely reuse the back-end API that is being exposed the full stack application with a separate back-end API or the restful api and a friend end will give you more options to extend your architecture and create applications for different devices in this quick video we look at the architecture of the application that we are going to create you would create an angular application talking to a restful api built on top of springboard we discussed why we build full stack applications I'll see you in the next step until then welcome back when we discuss the architecture of the application that we are going to build we said we would develop the front end as an angular application using typescript as the language we discuss the fact that typescript is nothing but modern JavaScript plus types now in this video let us understand what is modern JavaScript what is typescript if you have built web applications a few years back you would have written a lot of JavaScript you would have played with the dome which is the document object model I'm sure the JavaScript you wrote would not have looked something like this a number of developers are surprised with the evolution of JavaScript in the last few years modern JavaScript supports features like classes you even have annotations however these annotations in JavaScript are called decorators you can import classes from modules so modern JavaScript has all the features that are typically present in object-oriented programming languages like Java let's look at a quick history of the versions of JavaScript you can see that the JavaScript versions are es 3 es 5 6 7 & 8 what does es time for EU stands for ACMA script ACMA script is nothing but a standard and java script is the implementation of that standard it's like a interface and the class a class is an implementation of the interface similar to that whatever is specified in ACMA script is implemented by javascript javascript versions are specified as es 3 es 5 6 7 & 8 you can see that there is a huge time gap between es3 and es5 as well as es Phi and es6 all the versions which are after es6 so es6 and the versions after that are what I would typically call as modern JavaScript because these are the versions which support classes modules and they help you to write modularized well organized JavaScript code awfully the year in which our ACMA script standard has been released is also being used to represent the version so es6 was released in 2015 so this is also called es 2015 so you have es 2016 which is nothing but es 7 yes 2017 is nothing but es8 now what is typescript why do we need it typescript is nothing but JavaScript plus typing what does that mean thing is JavaScript is a loosely typed language when you declare a variable you cannot really define the type of the variable over here we are saying their value we are saying value is a variable but we cannot say value is a integer variable what happens because of this is you can assign a number 5 or you can assign a string or you can even assign another object this is a little different from a strongly typed language like Java in Java you can say int value which means value is an integer variable and you can only have integer numbers in value if you say value is equal to 5 it gives you a compilation error the reason why typing is important is because it helps us to write maintainable code errors will be caught directly at compilation time when you write code with typescript it would look something like this over here we are saying value is a number and when we assign a numeric value to value this is fine however if you assign a text value this would give you a compilation error the syntax is a little different but essentially it exactly represents the same that script also has features like you can define types on method parameters so over here in this method this parameter number 1 I'm saying is a number this number 2 is a number we can also define the return type of a method over here we put a colon and declare the return type the other thing typescript adds is the concept of interface and having the class implement the interfaces in this course we will use learn as we go approach to learn modern JavaScript and typescript where all we need features like a class a constructor a decorator or an input we will take a pause and discuss it to ensure that you have a good understanding before we use the feature in this quick video we discuss the fact that JavaScript has evolved a lot in the last few years modern JavaScript helps us to write maintainable JavaScript code using classes modules import decorators and a wide variety of other features typescript helps us write even safer modern JavaScript by adding type safety with which you can identify errors at compile time itself this video was just to give you a quick overview around typescript and modern JavaScript we will look at a lot of hands-on examples as we go on further with this course I'll see you in the next step welcome back in the step let's focus on installing angular CLI if you google for angular CLI the first result would be CLI dot angular dot IO once you navigate to that webpage you would see that angular CLI is a command-line interface for angular if there was ever an understatement then this is the one angular CLI not only helps you create new angular applications but also it helps you to generate a lot of code while we are developing the angular application it helps us to run our application locally and also run our unit test integration test run our code quality checks and things like that installing angular CLI is very very easy the first step is to launch a pure terminal or command prompt so I'm on Mac I'm launching up my terminal and you can see that the terminal has launched up if you're on Windows make sure that you are launching up your command prompt all that you need to do is to click this Add button type in CMD the CMD command prompt would come up and make sure that you are writing it as an administrator so right-click on it and make sure that you are running it as an administrator you would have your terminal or command prompt launched up so let's go ahead and check our node version which is installed DB you can check your node worsen is node - we make sure that you at least have v8 if you don't you can go and check the NPM version as well so NPM version that we have here is six point for any version which is rather than six should be fine if you don't have these versions right then I would recommend to go and check the installation video for notice again and make sure that you have the right versions now we are all set to start installing angular CLI angular CLI is present as a NPM module so all that you need to do is will n p.m. install - G at angular slash CLI NPM install - G at angular CLI I would want to get the latest version of angular that's seven so I'll add at 7.3 so the comment is very simple npm install - g at angular slash CLI at 7 dot if you have problems typing in you can also copy it from here and happen at 7.0.3 at the end out plus enter now what would happen of is NPM would download the angular CLI one of the important things if you are a Java developer you can kind of think of NPM like maven write maven download the dependencies the plugins for you so angular CLI is almost like a maven plug-in and we are using NPM to download it for us this download might take a little while if you're on a slow network or if you are doing this for the first time when I ran the install I got an error it says missing light access to so if you got this error if you got the same error that I got then it means you don't have admin permissions so if you are on Windows the way you can have admin permissions when you run your command prompt is by making sure that when you are launching up the command prompt you're launching it as right click run as administrator so this will ensure that you have admin rights when you're launching up the command prompt in Mac or on Linux the way you can sign admin permissions is by using sudo so I just need to type in sudo before the commands I'm saying sudo space NPM space install and the exact command as it was earlier so no it would ask me for the administrator password so go ahead and enter your password if you have any I'm entered my password enough you'd see that it would start doing the same process again so this is very important whenever you installed a node module make sure that you have admin rights now you can see that there is a local module install so it says plus angular CLI at 7.0 point 3 because I executed this on my machine earlier it happened very fast down here it might take couple of minutes on a slow Network when the installation of angular CLI is complete we can go ahead and test it the way you can check the version of the angular CLI is basing ng version so ng space version should give you the version of CLI which is installed so over here I can see that I'm using angular CLI version 7.0 dot three you can also see the node version and also you can see the versions of few other packages which angular CLI makes use of the most important thing for us is that any version which is greater than seven is good enough in this quick step we install angular CLI which would be used to generate our first angular application I'll see you in the next step until then bye in the previous step we have installed angular CLI let's create our first angular application using angular CLI in this specific step before we get started with creating an angular app let's learn a little bit more about ng the angular CLI so ng space help is what you need to type to get help on the angular client you can see all the different commands which are present in here we have already used ng version ng version gives you what version of angular CLI do you have so ng space version would give you the version of the angular CLI which is installed let's go ahead and try ng help again you can see that there are a wide variety of commands available engine nu which is present over here is used to create an angular app so whenever you want to create a new angular project you can say ng new the other useful angular's here like a man is ng generate when we talk about angular applications they are built using modules components services the initial code for those modules and components can be generated by using the command ng generate the other commands which are available are to build your code to run the code quality checks which is called lint to run the application to run your unit tests as well as you are n2 enters one of my favorite commands which is present in here is called ng serve if I use the command ng serve then as soon as I make a code change the change would be automatically picked up by the application ok enough theory now let's get to the practical stuff before we start creating an angular app you need to make a first decision right well you want to create it so you need to CD down to the folder where you would want to create this specific project I want to create the project in the directory that I am showing on the screen right now the most important thing is just have a subfolder called free intent so that all the front-end goes in there so I'm sitting to that folder and over here is where we would want to create our angular project we would create an angular project is by ng mu and the name of the project so nu is the command ng knew the name of the project that we would want to create is to do if you press ENTER right now angular CLI would ask you a few questions the first thing is would you like to have angular routing yes I would have multiple screens and I would want to have a screen flow between them so I would add angular routing we'll talk about angular routing in detail a little later I'll say yes the next question is asking me is which style sheet format would you like to use the default is CSS you can use arrow buttons to scroll down and scroll up I'd want to stick with CSS to keep things simple you can see that it started creating your angular application there might be a few warnings you can ignore them the project is generated and it's actually now trying to build the project if this is the first time you are building an angular project on your machine it might take a long while a few minutes in certain circumstances you can see that the installation is going on and finally you would see the success message now if I want to list the contents of the directories either LS or dir you'd see that there's a folder called to do which is created in here let's CD into to do and type in LS or dir again so if you're on Windows the command is dir instead of LS what you'd see is a project is created inside the folder to do and there are a wide variety of files which are present in here make sure that you are inside the to-do folder enough you can start executing the command to build and run the application so we would be using the command ng space server so type in ng space serve and press ENTER you can see that it's listening on localhost 4200 and it's actually building the modules right now so you need to wait until this is 100% okay now 800% and it says compiled successfully and it's opening up in the browser at this fect location so the hundred browser that we will be using throughout this course is Google Chrome so make sure that you are using Chrome as well in Chrome go ahead and type in localhost 4200 and just press Enter cool you'd see a page come up it says welcome to do and you would see a few links to the angular blog to to Ruffalo's and CLI documentation if you had an error when you were running this command make sure that you did a CD into the to-do folder so make sure that you are inside the to-do folder before running the command ng so that's a common mistake a lot of developers do in this step we were able to quickly generate an angular app and we were able to run it our real journey starts from the next step where you'd start understanding what's happening in the background as well as you would start creating our own angular code I'm excited to bring all this to you and I'll see you in the next step until then bye welcome back in the previous step we created an angular application using angular CLI and we have launched it up and we saw a clean UI coming up in this step what we will do is we will import the project into our favorite IDE which is Visual Studio code let's get started enough I'm sure you would have the IDE Visual Studio code installed we had it as part of our installation section when you launch up Visual Studio code this is the screen you would see this is the welcome screen and you would be able to see a few help documents you can see the recent projects I had worked a lot to make sure that this course is perfect and you can see other stuff about how do you can customize and learn about the visual studio code if you have some time I would recommend you to spend some time exploring the IDE one of the things that I have done is I am using a specific Visual Studio theme so if you go to code preferences if you're on Windows it's file preferences you can change the color theme what I've done is I'm using a light Visual Studio theme I like it very light so that it appears clear on the video and you can also see this very well on your Mobile's but if you like dark then you can leave the default as it is now let's get to the first task of this step which is to import the project in the thing is in Visual Studio code importing a project in is very easy either you can say open folder or even more lazier way of doing it just go to the folder where we have the project in so to do is the project and just drag and drop it in and that's it the project would launch up when the project launches up you would see the Explorer view so this view which we are seeing in here is the Explorer view you can toggle it and toggle it down by clicking this icon which is present in here let's open up one of the files which is present in here readme dot MD lead me dot MD contains certain amount of documentation about the project that we have created so it says it was generated using angular CLI version 703 it says you can do ng serve that's what we are doing right now and you can use this URL to launch it and that's what we did already as well so there's a lot of documentation in here you might want to check that out if you want to see this in full screen so it read me is enough taking part of the screen and the Explorer is taking some of the part of the view so you can toggle it by clicking this or the other option is to use control-v or command-v so control B command B so if you're on Mac its command B if you are on Windows or Linux its control B so use that and you'd be able to see the entire thing in full screen so this is something which we'd be using frequently so I just wanted to make sure that you are aware of that we'll explore more about Visual Studio code as we go further in this course I'll see you in the next step welcome back in one of the previous steps we saw that when we run ng serve inside the to-do folder we were able to launch up the angular application and we were able to look at it in the browser in this step let's explore ng serve further as well as let's look at a few other ng commands which you can run from your command line I would want to look at a file called index dot HTML it's present in the source so let's go to source index dot HTML inside this file is the title so you see the to do this is where it's coming from so let's go ahead and change this to something else let's say my - duze application and I'm saving it right now what happens now is you would see that I'm not doing anything on the browser right now within a little while you'd see that it's Auto loaded that's what ng serve does in G serve would keep polling your code for changes and as soon as there is a change it would pick up build it and it would load it into the browser let's do another example let's go to source app app component or HTML this is where the actual content of this page is coming from well committed to do the angular logo as well as the links which are present in here for the most part this is typical HTML except for something called interpolation which is being used in here we'll look at it a little later but for now let's remove the h2 and d UL so I am removing the links which are present in here and saving it you'd see that immediately the change is reflected on the browser that's the most important thing that ng serve brings onto the plate so as soon as you are making a change you can see it reflect on your browser now let's look at a few other commands in G space lint in space lint when you run it it would say linting and it would finally print that there are no violations which are present so the questions you might ask is what is linking who is doing the linting linking is nothing but checking your code for coding stand it's because the code which we have is generated we did not write a single line of code by hand yet all these files pass the coding standards what we'll do now is we'll introduce a coding standard violation how can I introduce a coding standard violation I'll go to jail studio code open up a file called AB component dot tears the way you can open up a file is by either searching through the Explorer and then finding it and opening it or you can press command P or ctrl P if you're on Mac its command P and if you are on Windows its ctrl P you can type in app dot component dot TS and you should be able to load that specific file into the UI you'd see that at end of every typescript file there is a newline character what I will do is I will remove the newline character so now if this file has only ten lines let's go to the terminal and do ng lint what you would see is that it would say there is a file which has a problem aha it says lint errors found in the listed files it says error after component or TS file should end with a newline that's what is this standard now if you might be wondering where are all these rules defined all these rules are defined inside a file in our project which is TS lint dot j7 this is where all the rules are defined and the end of file rule that we looked at is a defined on line 17 right now so it's end of file line true so it should make sure that at the end of the file there is a newline character the great thing about this file is the fact that you can customize it according to the needs of your particular project now that I added the new line I can do ng lint and you would see that there are no errors now let's get back to the command and let's run a few more let's go on to the next command which is ng build what does the ng bill do let's run it and see what's happening what u 3 is when you run ng build it says there are specific files created main dot J polyfills dodges runtime gorgeous styles DOJ's rendered rjs and when you go to the IDE you'd see that there is a new folder which is present in here which is the dist folder if you open up the dist folder you would see a few files which are present in here indexed ojs main door JS and all that kind of stuff the great thing about this dist folder is you can take this to do folder and put it behind any web server and you'd be able to directly launch index dot HTML and run the entire application so you don't really need any of the other code which is present in here to launch these angular applications so typically when we deploy angular applications to production what we would do is we would execute ng dist and we would take this folder which is generated and put it on the web server so ng dist makes it easy to deploy applications to other environment for example test environments or production all that you need to do is to copy this to of app server the next command which we are going to look at is ng test whenever we write applications we are supposed to write a lot of unit tests ng test runs the unit tests which are written for angular applications typically unit tests for angular are written in a framework called Jasmine and we are using karma to run the unit test you can see that all the tests ran and there are zero failures in foreign language tests are called specifications so these specifications are what are running and you can see what are the specifications which ran upon ponent should create an app app component should have a title to do had component should render title in h1 tag if you'd want to run any of these specific tests again you can click them or you can click the app component to run all the tests again let's quickly look at where these tests are defined there are few important files related to unit tests the first one is the Karma contour JS this is the configuration of the test runner which is karma other than that there are a number of tests which are written as part of your angular code typically these files would have an extension dot speck dot tears speck stands for specification that's basically the test and if you open up this test file you should see all the tests which are written so these are the tests which ran earlier so you can see all the tests which are present in here and let's kill this by saying ctrl C now the other command which is present in here is ng ii ii ii ii ii ii stands for ng end-to-end tests so into n tests are much more than the unit test unit test test individual components one at a time with into n test what happens is we would launch the entire angular application you can see that we are launching the angular application at localhost 4200 it's still billing a you might take a little while so now if the application has been launched up enough you would see that we are actually running the entire application and running tests around it you'd see that over here it says should display welcome message and it says 1 test successful if you look at the logs you would see that there was something called a chrome driver which was downloaded which is actually something related to the selenium automation tests the chrome driver was installed and the chrome driver was used to launch up the test in angular the end-to-end tests are written using a framework called protractor protractor is a layer around the selenium api which helps us to write into end tests in this course will not be focusing on either the unit errs or the end-to-end tests all the code for the end-to-end test is present inside this folder e2e and over here you would see also the protractor conf so this is the configuration for protractor which is an end-to-end integration testing tool angular dot JSON which is present in here is the file which defines what should happen when we run specific command so we ran a number of commands right ng test ng build ng lint the angular dot JSON file is where all these commands are defined in this quick video we looked at a few commands which we can execute from the command line which are provided by angular CLI we looked at ng lint which is to execute coding standards we saw that there is a file called TS lint dot JSON where all the lint rules all the coding standards are specified next we ran ng build and we saw that a dist folder was created which contains all the files which should be sufficient to deploy the specific angular application to external web server external environment we ran ng tests which ran all the unit tests which were created using the Jasmine framework in the spec dot TS files using the runner which is defined as part of the karma contour jeaious after that we ran the command ng e 2 e n 2n and all the tests which were defined in the end-to-end folder were executed we saw that the entire application was launched up and protractor was used to run the end-to-end test the idea behind this specific video is to give you a big picture overview of all the commands and what are the files associated with them you might not really need to understand all these files in depth it's sufficient to know where they are and what they are related to and that's good enough enough I'll see you in the next step until then bye welcome back in the previous step we looked at a few ng commands ng dist ng test ng e 2 e n ng lint we looked at a few files which are related to each of those commands when we look at our folder structure there are still files which we have not really talked about in this video let's try and cover the other folders which are present in our workspace when I open up the source folder you'd see something called app this is where all our angular code would go into when we build angular apps we will create them using something called components and modules and all the components and modules will be present in this app folder the assets folder is where all the images go into the content which needs to be rendered as it is like images they all go into the assets folder when we develop applications we would want to deploy them in multiple environments local environment dev environment QA production tests all the configuration for each of these environments go into the environments folder now that we looked at the important folders let's look at the other files which are present in here let's start with the TS config dot JSON we know that we would be writing code in typescript but do you know that your browser will not understand typescript and your browser only understands JavaScript so whatever code that we write it needs to be converted to JavaScript so whatever typescript code that we write as part of our source code needs to be converted to typescript that is specified as part of your TS config dot JSON we already looked at readme dot MD which is kind of the documentation for this project so if you have something to document about the project you can put it in readme dot MD we are building angular applications and we saw a number of commands which we were able to execute in the last step ng serve ng build ng test ng e to e and all these need a lot of external frameworks and tools all these frameworks and tools are specified in the package dot JSON you would see that all the frameworks are specified in here all the packages are specified in here as well as all the tools that we would need to be able to run the unit test integration test and to run our angular application whatever modules you have defined in package dot JSON are downloaded when you run NPM install node package manager is the package manager we are using it's very similar to maven so once you specify the dependencies in here when we run NPM install all these dependencies are downloaded to the node modules folders the node modules is where all your packages that's basically your frameworks and also the tools which you would need to build and run your project are downloaded to we did not really explicitly run npm install at all whenever we create a new angular app using ng new the npm install command is automatically executed the get ignore file contains what are the different folders which should not be committed to version control so when you commit this project to version control all these folders would be ignored index dot HTML which you see in here and the main dot TS we are inside the source folder enough so main dot TS and the index dot HTML which is present in here are the two things which are loaded up when we launch the angular application so these are responsible for bootstrapping the angular application at a high level there is something called the root module which will be launched it up by the test dot TS which will be included in index dot HTML and that's how the application gets bootstrap you look at bootstrapping in detail a little later the other files which are present in here is something called polyfills dot TS we know that different browsers have different levels of support for all the web standards the same javascript code might not work in all the browsers polyfills dot tears would take care of these browser incompatibilities and make sure that whatever code that we write would be compatible with all the browsers the Styles dot CSS is where you specify the global application styles so whatever styles whatever CSS you would want to use across the application you would put it inside the Styles dot CSS test or TS is basically the starting point for running the unit test so this is what is used when we run the ng test in this quick video we looked at all the other files which we were not able to cover as part of the previous step the important ones which we discussed your packaged or JSON where we define all the tools and frameworks that we make use of and these are downloaded to our node modules folder when we run npm install the npm install was automatically ran for us when we were creating the new angular project the s config dot JSON defines how we would want to convert the typescript code we would write to JavaScript code which runs on the browser the app folder contains all the important angular code typically modules components and all the other stuff which you'd write as part of your angular applications as it contains things like images that you would want to use environments contain environment specific configuration if you want dev specific configuration or prod production specific configuration that's what goes into environments polyfills ensure that all the code that you write is comparable across all the browsers style dot CSS contains the global Styles global CSS and test your TS is a starting point for running our unit tests the idea behind the last two steps is to give you a ten thousand feet overview on the project structure the different folders the different files which are present in here it's not really necessary that you need to know the absolute details of everything which is present in here it's sufficient if you know at high level this is related to this and that would help you when we start building the dealer app I'll see you in the next step until then well I welcome back in this video let's get introduced to the one of the most important concepts in angular which is called components let's consider that we would want to develop a page like this we have a menu at the top and we have a list of todos which are shown and we have a footer in angular the way we would develop this is as a set of components so the entire page would be divided into a number of components so you would have a menu component we would have a list to do skom ponent we would have a footer component each of these components are responsible for displaying the view that basically the HTML the styling that's basically the CSS as well as the code to react to the user actions so when user clicks update when user clicks delete when user clicks Add to do what needs to be done all that is handled by the view logic which is present in that specific component this menu component is responsible for showing the list of menu items which is highlighted which is not highlighting the styling for that and handling the click of the events if home is clicked if tohru's is clicked or logout is clicked whenever we build angular applications we first start thinking about what should be the component which should be created typically a component is associated with the template which is basically the HTML how should it be shown the styling which is basically the CSS how should the elements be styled and the code how should you really respond to user actions this is written in typescript when we look at most components in angular you would see that the template file is having extension of dot component dot HTML the style file has a component dot CSS extension and the code file has a component dot ts extension D S stands for typescript when you look at our workspace there is one component which is already present in here it's called the app component and you would see that the extensions exactly match to what we have seen earlier so we have a HTML template the component dot HTML that's basically the app dot component dot HTML we have the styling in app dot component dot CSS this file is empty for now and we have the code which is present in app dot component dot TS in angular you would indicate that something is a component by using something called a decorator the decorator is very similar to annotations in Java we use a decorator add component to indicate that the app component is a component and we have a few attributes which are specified as part of the component decorator the first one is this selector setter is basically the tag name for this component so if I want to make use of this component what tag name should I use that this selector so if you look at index dot HTML which is where this particular component is used it says app root the next thing which is present in here is something called app dot component dot HTML which is the template URL so what we are saying is where is the location of the HTML template for this specific component we said it's in the app dot component or HTML the other thing which we specify in here is where is this styling for that specific component so the app dot component dot CSS is where typically the styling which is specific to this specific component is present you can see that as part of our component code we have some data we have member variables which are present in here this member variable is actually mapped to this value in here what we are using in here is something called interpolation so what it does is it takes the value which is present in here and put it in here so let's say I would want to create another one so let's say I'm saying message is equal to welcome to in 28 minutes what I can do in here is I can use interpolation and I can put within flower brackets or braces I can put in the message you would see when you look at the page you would see welcome to in 28 minutes also as part of your h1 what are we doing in here is called binding we are taking some data from the component and showing it in the view in this quick step we looked at components we said all angular applications are built up of a number of components each component has the HTML or the template the styling or the CSS and code to handle the view actions this code is written in typescript we discussed the fact that at component decorator is what makes this app component a component we looked at the attributes which are part of the add component decorator the template URL and this tile URL as well as the tag which is used to represent this element and we looked at the fact that whatever data is present as part of the component we can use it in the template by using interpolation I'll leave you with an exercise what I would recommend you to do is create a few more data elements as part of this and make sure that you use them in your f dot component or HTML play around with it and I'll see you in in the previous video we looked at the basics of components in this video let's play around with the app component a little bit more I'll start with going to the app dot component or TS and oh here what I will do is I would want to directly include the entire template in here instead of actually putting the URL to where the HTML is present you can also include the exact template so let's say I would want to show h1 and just let's start with just putting the title in oops I'm using caps lock let's move that let's make this h1 and this should be h1 what would happen if I go and refresh the page oops it says this module cannot be found what it's saying is I'm not able to locate the template URL the thing is I will need to change the attribute to them play it so if you say it's template then you can directly define the template in here so you can see that enough to do is display it so just the h1 because that's the only thing which is present in the template what I'll do is I'll undo the change let's go back to where we were earlier I'll comment this out and paste this in so what we are doing is we are replacing the template you are instead of the template URL we are using template and thereby we can actually put the complete code of the component right here if you want you can do something like that with these tiles as well what we'll do now is we'll comment this out and let's continue using the template URL because we would want to see a lot of code now if you go to the template URL what we'll do in here is create a additional Divac let's create a div component content now what we'll do is index dot HTML let's go here and also over here let's create a div so this div is actually index.html content so we created two depths one in the index dot HTML one in the abroad component or HTML if you look at the screen right now you would see the content in here right so the content is displayed as part of the index dot HTML now let's style the divs so I'll say div background color I'll just make it B's let's refresh the page you can see that just the component alone gets the background color B's the content in the index.html does not get the style so whatever you put in here does not apply to all the divs which are present in here whatever content you put in AB dot component or CSS only applies to the component the scope of the styles which you are specifying in here is restricted to the component and that's awesome let's comment this out the appearance does not really look good so let's comment this out the way I am doing it is control / or command / if you do that it gets commented out enough you would be back to the usual stuff in this quick video we try to play around with the component we try to create a template directly in here by using the template property and we try to create a simple style inside the abroad component or CSS and we were able to see that this style was affecting only the specific component I would recommend you to try and play around with the template and the template URL and try and understand it more as an exercise I'll see you in the next step welcome back if you are a Java developer who's coming into the front-end world one of the most important things to get used to is the syntax of typescript you would see that this looks similar to a Java class but there are quite a number of things that you would need to get used to you might be wondering if let's say I would want to create a new component it might be a lot of effort I need to create four files manually link them up there is a lot of effort which is involved in doing that the thing is angular CLI makes it very very easy to create components in this step let's create a component and see how easy it is to do that typically we have one window where we have the ng serve running I have all my code in this to do folder and I've seeded to this folder in here and we have done ng serve to launch up the application and that's what we are seeing in here what I would typically do is I would open up another terminal window or another command prompt seeding to the same folder so I opening up another folder if you do the present working directory it's exactly the same as what I have in here so I have two command line windows one of them is running ng serve and the other one we would typically use to create the components to create modules to create services whatever you would want to create you would use the other window to create it so the advantage of doing this is as soon as new code is generated the code would automatically be picked up I don't need to stop ng serve create a component and then start ng server again if you'd see that the new code you're writing is not picked up make sure that you are inside the same working directory in both these folders now let's get started with creating a component how do I create a component it's very simple its ng generate and what we want to create we want to create a component ng generate component actually you can also run it as ng G and C so this is kind of a shortcut once you are more familiar with angular maybe you can use that for enough let's stick with the usual one ng generate component and we need to specify the name of the component that we would want to create let's say we would want to start with creating the welcome page so I would want to start creating the welcome components ng generate component welcome one of the most important things that you need to understand with ng generate is there is no rollback once the component is created once it's added you not be able to roll it back so it's very important to make sure that you get the names right first time so welcome so check the name before you press Enter the other thing is I am NOT saying welcome component I'm saying just welcome and you would see that it would create welcome component for us so ng generate component welcome you'd see that there are four files which are created and one file which is updated hmm what's happening the four files that I created that we would expect right so we have the component or HTML which is the template these CSS which is the style the TS file which would contain the code the typescript code this is the test file which is typically generated and we would keep ignoring it the interesting change is what is done to AB dot module tortillas it says an update is done to AB dot modules or tears let's look at what update is done when I open up the app dot module dot TS let's do a control B or command B to make sure that we are seeing it in full screen if you do that you would see that there is a welcome component which is added in in the declarations we will talk about ng module a little later this stands for angular module every component that we create as part of an angular application should be associated with a angular module and the declarations indicate what are the different things different components that are part of this particular ng module you see that the Welcome component is automatically added in as part of this particular declarations array this particular module contains two components app component and welcome component now let's go on to the Explorer and look at where the Welcome component is created so inside the app folder there is a folder called welcome and inside the welcome all these four files are created you can see that it says the HTML says welcome works the spec file contains the default test and the dot PS files contains the basic component you can see that the name of the component is welcome component it's very important we just specified welcome in here but the component which is created is welcome component so we don't really need to say welcome component when we are creating the component that's kind of a typical mistake which a lot of beginners make you would see that the default selector or the default tag name which is for this perfect thing is app - welcome and you would see that the template URL and the style URLs are appropriately matched the interesting fact note is the use of implements on init which is pleasant in here the thing is modern JavaScript does not really have the concept of interfaces this is something which is a typescript concept which we are making in use off in here so we have an interface called on init the interface defines a method called ng on in it so what we are doing is in the Welcome component we are implementing the method ng on it you would see that if I remove this there is a compilation error you'd see that it says I'm not implementing the interface so this is very similar to Java right in Java when you implement a interface you have to implement all the methods which are present in there or you can make it abstract let's not worry about it right now so the ng own init what would happen is this method would run when this component is initialized let's save this let look at the application you'd see that there is no change because we have not used this component any where now I want to include this component I would want to show this component how can I do that one of the ways I can do that is I can go to the app component HTML and I can include the tag app welcome and save it let's see what would happen when it loads up you see welcome works isn't this awesome so what we did is we have included the component that we have created inside another component so the Welcome component is enough included as part of the app component in the step we created the Welcome component and we have included it as part of the app component dot HTML I recommend you to do an exercise and create another component and include it as part of the abroad component or HTML as well I recommend you to play around with it as much as possible to understand a little bit more about components and I'll see you in the next step

Channel: in28minutes Cloud, DevOps and Microservices

Views: 104,189

Keywords: in28minutes tutorial, in28minutes, angular, full stack, spring boot, full stack developer, in28minutes tutorials” in28minutes courses

Id: 8ueiZf988qY

Length: 64min 53sec (3893 seconds)

Published: Thu Nov 15 2018