Angular Crash Course! | Karthikeya T | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

19 Lessons (2h 18m)
    • 1. What is Angular?

      13:23
    • 2. 1202SettingUpAngularDevelopmentEnvironmentPart1

      7:02
    • 3. 1203SettingUpAngularDevelopmentEnvironmentPart2

      6:21
    • 4. 1204AdditionalConfigOnWindows

      0:34
    • 5. 1205ng new

      6:17
    • 6. 1206 Web Pack

      4:37
    • 7. 1207JITvsAOT

      8:39
    • 8. 1208ngServe

      4:37
    • 9. 1209IncludingBootstrapFramework

      6:21
    • 10. 1210AngularComponents

      14:29
    • 11. 1211DataBinding

      5:26
    • 12. 1212EventBindingInAngular

      9:47
    • 13. 1213PropertyBindingAndDataExchangeBetweenComponents

      8:12
    • 14. 1214ServicesInAngular

      8:40
    • 15. 1215DependencyInjectionInAngular

      7:21
    • 16. 1216DependencyInjectionInAngularPart2

      2:45
    • 17. 1217ModulesInAngular

      6:08
    • 18. 1218AngularRouting

      8:35
    • 19. 1219AngularHTTPClient

      9:11
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

123

Students

--

Projects

About This Class

Anglular Crash Course will cover pretty much all the concepts of Angular (Listed below). Angular is a popular front end framework that will help us develop cross-browser, cross-paltform single page applications.

If you are an IT Professional, Angular is a must know technology.

Contents that are covered in this Angular crash course,

What is Angular?
Setting Up Angular Development Environment Part 1
Setting Up Angular Development Environment Part 2
Additional Config on Windows
ng-new
Webpack
JIT vs AOT Compilers in Angular
ngServe
Including Bootstrap Framework
Angular Components
Angular Data Binding
Angular Event Binding
Property Binding And Data Exchange Between Components
Services In Angular
Dependency Injection in Angular Part 1
Dependency Injection in Angular Part 2
Angular Modules
Angular Routing
Angular HTTP Client

Meet Your Teacher

Teacher Profile Image

Karthikeya T

For Your Learning Needs

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. What is Angular?: straight understand angular in easy and fun manner. It is official definition off angler, and it says Angler is a platform and prim book for building client applications in HTML and typescript, which is great. But what does this mean? Well, that's what we're going to find out in this video, but I want you to memorize certain terms used in this definition, like platform prim book, client applications and typescript. Just try to keep this terms in your mind, and we'll explore all of these in next few minutes. And, of course, as a bonus, you'll also understand what is angler its purpose. White came into existence, etcetera, but before that, as a critical is that it's necessary that, you know some of the terminology is off the Web. HTM is the language that brought us understand, and it's going to look something like this. If you send the search team into a browser, it's going to render Hello world in heading format, and then we have CSS stands for cascading style sheets is meant for styling there still element, and in this case we're trying to change the color of the text to read by adding an attribute And then we have JavaScript, which is a client side scripting language and would allow us to manipulate the estimate elements. For instance, using JavaScript, we can get hold off this element each one, and maybe change the color to something else. Maybe blue. But how does JavaScript can get hold off? HTML Element is by using so called Dom Ar document Object model, which is a representation off the interest email document. And JavaScript is going to use a dom object in order to travel through all the elements and do manipulations has written in the JavaScript code. Next, we'll try to understand how difficult Web application would work. Imagine that you have an e commerce application, something like Amazon from Declined, which is a browser. Let's that you have requested for list off products. It's going to hit the controller on the server control of the try to. First, the data from the model, which is essentially the database and then controllable, forward the data to view. Ultimately, the soldiers going to respond back with HTML file, which is combination off HTML tags, cascading style sheets, JavaScript, etcetera and it would get rendered on the browser. If you're not ever off. What is embassy architecture? Just think about it this way. You send the request, which is when you type A you are and so is going to respond back with dot html file, which will be rendered on the browser. But this system has one major drawback. Is that it responding back with the esteem in which works for browsers but not for mobile phone applications? Because all that mobile phone applications are interested in is just the data, not the presentation part. In other words, they're not interested in all those his team lnc asses aspects off this page. They just need the data, and they will take care of presenting it to the user as the desire. In other words, let's that you have decided to launch a mobile version off your application. Then you can't use existing code because your existing court is written in such way that it responds back with HTML, which cannot be used on a mobile phone application but only works on the browser. So in order to solve this problem, he would completely get it off the view on the presentation parts from the silver side, and he would directly respond back with the data from the server in the farm off the Jason or XML. So this time it would work for Android as Ola's IRS. But you may have problem with the browser because browser's is expecting you to send or expecting server to send an estimate file. If you send the data as it is, it's exactly what gets shown to the user, which is not user friendly, and user cannot just interact with it. I mean, just imagine it was it amazon dot com, and all you see is just plain text product description and all, but without any presentation or formatting or without any styling, and the users cannot interact with it, it certainly is not going to be a good user experience. In fact, it's terrible and impractical. So what do you have in case of browser? In other words, just as you have and and rode up running on Android and an IRS up running on highways, he should have an app that runs on the browser as well and is ready to take in this data sent from the server. What's that going to be? Well, you may be tempted to say angler, but not yet. We could actually write out application using JavaScript. But jealous God comes with few drawbacks. For instance, JavaScript is an interpreted language, which means under Lee run the program. You cannot fix the others. This is cocaine gets off simple applications, but modern applications are pretty complex. I mean, think about a website like Netflix, Amazon, Facebook, etcetera he can't afford to use JavaScript in such cases is going to impact the development time and oral productivity. Moreover, JavaScript is a loosely typed language, meaning that there is no concept off types. I mean, you can create classes interfaces like you would do another programming languages, and that comes with a host of other drawbacks. So, you know the address, these problems. We have a new language for that purpose, which is typescript, which essentially is an enhanced version of JavaScript. Or, in other words, it's JavaScript. Bless type capabilities so you can create classes, interfaces, etcetera. Added to that typescript is a compiled language. You don't have to wait until you run the program in order to fix the errors. You can fix the combat the mirrors, as in the new type, so that's a huge advantage, and it will give you the flexibility to dull up robust applications. But language alone is not enough to create applications, right? I mean, you have spring framework for Java. You have jangle framework for python. Similarly, should have some framework for typescript in order to create those client side applications that run on the browser. What's that remark is going to be? Well, you guessed it, angler. That's where angler would come into picture. Angler is essentially a framework that would help you Delaplane side applications that run on the browser so that he can. First, the data from the server render it as a desire. One of the significant advantages off Angler is it would allow us to create so called single page applications. Are S P A. What's a single bit application? Let's take a look at the definition. A Web application that puts in a single page and dynamically updating the page has there's interact with the app again. What does this mean? A straight understand it with a flow diagram in case of traditional of applications, Parisian every request, so is going to respond back with HTML. Let's say you have requested for product. One information. It's going to respond back with esteem requests for product to information. So it was going to respond back with a steamer, and every time cell response back to the client, the page would be reloaded because it's entirely new page. It's entirely new estimate being sent on the server, and so it requires the pace to be reloaded, whereas in case of single page applications only for the first request. So where is going to respond back with HTML and for all the subsequent records from the client server would respond back with just the data, which will be consumed by the client application. And it will update existing page, which was sent previously. Overall, it's just one single page sent from the server, and that's where the term single bitch comes from in single page application. An example of this is Jim it. As you interact with the application, for example, you can click on the links that are on the left hand side, or it can open the email while you perform such actions. No page reload would happen because behind the scenes, your Gmail application was loaded for the first time and for all the subsequent requests, which is when you interact with the application. So there is just going to respond back with the data, which will be abated on your existing page. And hence there is no real or of the page is just abduction off an existing page while you use the application. A few of the examples off single page applications could be Netflix. We have, ah, Twitter, we have paper all. We have a host of other applications, and I believe even Facebook is partially single page application. In fact, all the modern the applications are shifting towards single page applications because off their advantages, which is coming next. Here are some of the advantages off single page applications. The first obvious advantages. It's going to save bandwidth because you're not sending esteem a reach. Never request just sending the data, but only for the first time. Only for the first request, it's going to take it off a time combat to tradition application because you're essentially sending the entire client application in one go with the first request itself, we'll understand it better down the line as we explore with these different concepts off angler, the second advantage is going to result in better user experience because single page applications doesn't need page to be reloaded, so the user will see only part of the page. Getting updated is not going to see the entire page getting refreshed or reloaded. Another advantage is obviously board declined and the seller applications can travel independently, so over completely got it off the presentation part. It is taken care on. The client side and this boat are not tightly coupled, and so they can have all independently with different development teams. One thing that I also should mention, especially for beginners, is that Angler is not Angler Jess. And here are some of the facts off angler in Anglo Jay's Anglo Gist was first released in 2010 and it is developed and maintained by Google. Angler is a successor off Angler Js and was released in 2016. But one thing to note here is Angler is not an enhancement off angler JIA's It's a complete rewrite off a new frame book with host off features. One of the major improvements in Angler is that it is better start off typescript, not JavaScript, and we've already explored why JavaScript isn't the best option to develop plans and applications. All the Anglo abortions that are washing one dot exe heart termed as angular Jess and all the angle abortions that are too horrible are called Angler, which is based sort off typescript. And here are some of the other features supported by angler and are not supported by angler Jess. You're angler jeers especially meant for browsers, while angler applications can actually be deployed on multiple different platforms. So you develop your application ones and you can deploy it on a mobile device or on browser etcetera. Anglo comes with anger. CLI, which is basically a command line interface, very condone bunch off angler commands to do ability off things, and we'll certain explore them in the course. Angler is a competent based architecture again. You'll understand it better once we go deep into concepts. So here is Thea Angler Definition again, and I bet you would understand it by yourself. Angler is a platform and the frame book for building client applications in esteem and typescript. I hope it makes sense, and I hope that you enjoyed watching 2. 1202SettingUpAngularDevelopmentEnvironmentPart1: in this video, we're going to talk about how we can set up the development enrollment to start working on angler projects. One of the key things that would need to develop angler applications is NPM, or node package manager. What this allows us to do is to lay low was to manage. The dependence is for our project. Even for a simple hello World angler application, we would be needing a host off Libraries without NPM would have to manually download all those libraries from the Internet, store them in some location and then use them inside your project, which is a ready, tedious job and is very error prone. However, with NPM, things are going to be a lot easier because MPM is going to do the heavy lifting for us. All we have to do is to specify the libraries we need in a Jason file, and then we have MPM repository. This is where all the libraries would be hosted and this is from where, and people download those libraries. We have thousands off libraries available. A new Liberace will keep coming every day, but depending on our needs, we're going to be including only the library's that are relevant for a project and our needs. Here are some of the examples off libraries that we're going to be using inside our project . These are just examples, and in reality, we might be needing more than these typescript to JavaScript Transpire lor We're into dollop or angular application using typescript, but browses do not understand typescript. So we need a transpire lor that will translate the typescript two Equal and JavaScript. And so weaken Donald Angler applications on the browser, even though we're writing our application on typescript. And then we have angular CLI library, which is a command line interface to create angular projects, modules, competent etcetera, going to talk about it in a while. And then we have a magnification library, which will register size off the end product that weaken deploy on the silver. Soto just regis the size in order to better explain this, let me take your website called Stack Bliss. Just do a quick Google search on Stag bliss, angular and click on the first link. You'll be taken to this page. Stab list is an online court editor, and it gives the same look and feel as with an I d. And you can work on various different Josko projects, including angler. We'll soon we're going to have our own idea in stroll on a local machine and you would pregnancy the similar interface. But this is just to give you a glimpse off how the angler project is going to look like And what are various things we can do in it. And I'm pretty sure that a lot of these things may not look familiar to you. And that's what we went. Explore incoming lectures. But for now, I want you to be aware off this particular file package dot Jason, this is very would specify all the libraries you've been needing inside the project. What we have here is a simple hello world angler application and even for that would be needing all these libraries. So we have the transpired her which is part of this library. And then we also have angular Seelye, which is right here. So once you specify the library in this manner, along with its portion and people download this library from NPM Repository, which is hosted online, let's go back. But in order to use all these libraries, we would be needing node.js. So here are all the things that went install winter install node.js. All the libraries that I mentioned before wouldn't work without node.js. The winter have it in place. And no, just comes with NPM Command line interface, which we can use to install angular CLI anglers here like will allow us to do already off things. For example, it will allow us to gender dangler applications with just one command. Or we can create angler components services, etcetera with just a command. Or we can build applications, run the applications and see the change is getting reflected immediately on the browser and the host of other features. If you worked on springboard projects, then this is similar to Springwood command line interface, and then team is like maven or Gradel. Let's go back to stack bliss and try to understand a little bit about angular CLI, but wouldn't explain more on it. Incoming videos for sure. With anglers here left, for instance, you can create this project with just one command without using it. You'd have to manually create all these files, which is again error prone, and it's going to take a lot of time and, moreover, Angler C 11 also taken off, creating the boilerplate code, which we need to write otherwise. For example, if you take a look at this file, there's already some called included. This is done by Anglo cli again. All this may look strange to you. Well, sort of explore all these sections in detail incoming lectures. But I hope that you got some sense off how these tools are helping us build anger applications. Next Virgin Stall and I d are integrated development and Roman, if you're new to idea, then you can think off it as an enhanced version off. Not bad with a lot of features. I mean, you can't develop applications on and note bad, right? You need something more robust. I mean, you need something that looks something like this that will give you a lot of convenience like syntax highlighting, coloring, sharing the combatant matters etcetera. And that's what I d. Does a lot of free and paid abortions off I DS, for example, we have Web Storm, which is a paid I D. But there are also free alternators. For example, we have visual studio cord, so these are all the stuff we need to install, and that's what we're going to do next. 3. 1203SettingUpAngularDevelopmentEnvironmentPart2: hold it. Let's go ahead and install all the stuff we need to get started with. Angular. First of all, we're going to be installing node dot Js from their official website. No, J start. Argh! So here I am inside. Nor Jess Stark. Depending on your operating system, you would see slightly different options. In my case, I m is in 64 bit portion off windows, and so have these two options. I can either go with recommended version or the latest Washington. I would recommend you to go with recommended abortion. Once a Donald nor GS, you can install it just as you would install any other software. Pretty straightforward. Once you finish installing, just open up your command, processor off your operating system and type the command MPM hyphen Washington, and you must be able to see the washing off the Norges that you've just installed. Since I have all the installed nor Jess, I don't have to do it again. But if you come across with any issues, then you can let me know and we'll try to fix it. Also, while installing nor Js, Norges would automatically add the path variable. What that means is, you would be able to run Norges Command from any directory from inside your command processor next, when it installed angler, See, Ally. And as I mentioned before, it comes as an NPM library, which, when it explicitly install using nor GS Command. And here is the command. For the same, it's NPM install hyphen G option at the rate angler slash Seelye with hyphen G option. You would be able to run anglers here like a man's from any directory. So once again, you would open your command processor an executive, this command again. Since I've already done that, I don't have to do this again. Just exude this command. And if you're prompted to enter anything, just leave it to default and finish installing. Our next step is to create the angler application using angular cli. And for that, go to a directory where you intend to create your project actuals um E directory and inside angular folder. So let me execute angler cli command That's n g nu and whatever the app name that was to give in my case, I'm going to call it as angler. But what this command does is it will create all the required files and configurations toe start creating angler applications. I'm prompted with this message, asking me if I would like to add angler routing at the moment. It's not necessary. I want to say no and there's no asking me would style sheet for my Would you like to use? I'd like to live it to default, which is CSS just had written our enter the project creation might take quite a bit off time. Meanwhile, we can go ahead and install our I D, which is visual studio code sonority. Install visual studio cord Once again, let's go to Google and do a quick search on with us to the accord You would most probably need to click the first link. Depending on your operating system, you can download installer and install it just as you would install any other software. You can leave all the options to their defaults, but make sure in the final prompt you check. This option had open with court action Toe Windows Explorer pile context menu and finish installing our project. Creation is still taken time. Let me pause the video and get back okay. After waiting for a while, we're finally done creating our project. Let's go to this folder. So it is a project which were discredited, right? Click on it and click on open with court, which is was just to the accord. So here is our angler workspace or project inside results truly accord Next launch Your application is an angler CLI and the commanders in Jessel hyphen open With this common, we're asking angular to deploy our application on their server and open it on a browser. Now we don't have to install any additional servers because, nor just comes with the very lightweight server, which is used by angler. So let's run this command. You can either run it from the operating system. Come and Prosser are You can do the same from an I D. By opening a terminal, make sure that you're inside that works. Best directory and type in N G, sir. Open. Let's see how it goes. I guess the command is not great. Straight one more time. It might actually take some time, so let me pause the video and get back. So here is our application house over is running on the port 4200 and certainly down the line throat. Our course will understand each and everything that Anglo has to offer in detail and in depth, Stay tuned. 4. 1204AdditionalConfigOnWindows: If you're using Windows operating system, then you need to take care off one additional configuration. Inside the A visual studio cord. Go to find preferences and click on settings. Search for setting start Jason file and click on Edit in Settings or Jason. Here in it add one additional value, which I've just highlighted. Without this, you won't be able to run the commands from the terminal. 5. 1205ng new: let us try to understand what's going on with our first angler application. Hold it a simple hello world application. There's a lot going on behind the scenes, and it's really what understanding what's happening because it will lay a solid foundation for the rest of the course. So, essentially, when we created the workspace using this command engine, you and then the APP name, it primarily does the following things. It will create a new workspace and an initial skeleton application, and that's what we're able to see that application running on the browser in the port. What it 200? But what to XP's? You can think of what space as a workspace in any other I d. For example, if we had walked on Java projects, you're probably were off eclipse workspace. So within the works position how multiple products you can create multiple applications. Similarly, in case off angler within the workspace it can create multiple products are applications. But the recommended approach, and also the best practice is to have one application of one product under workspace, and that's what we're going to do in the rest of the course, and that's what is recommended even for commercial applications. This command blocks install necessary and being packages in order to build our application and run it and we'll also populate. The dependence is that will be needing inside our project and added to that this will also create. And when tests for the initial application that was auto generated by angler cli. In order to better understand this, let's go to the court editor. So here is the project structure which God created without angular cli. You'd have to create all these by yourself, which is quite impossible. And that's why we're needing to, like angler see a lie to do that job for us At the root level, you have all this conflagration piles and definitely I'm not going to go deep because I might need to use some terminologies which you may not be aware off as off now. So ready. Get things simple and even for you, don't try to observe everything destroyed a house in basic understanding off how angler project is structured just so that it is useful for the rest of the course. So angler has created this file package, not Jason. This is where it had populated all the dependence is our libraries would be needing, and these would be downloaded from the MPM repository. If you want to add a new library, then you just have to add have value like this along with its wash in and you're good to go . Those libraries would be part off your project, and you can use those libraries inside your source code. So we have certain libraries that are meant for development, a few for production, etcetera, and definitely will be exploring more on these as we progress through the course. Likewise, he got a few other conflict files. For instance, you have angular dot Jason. These are the conflagrations for Angler Seelye that would remain common for all the projects reciting in this work space. For example, maybe you can chained index start estimate filed to something else when we launched our application. This is the page which got rendered and it recite inside the SRC folder, and here it is. If you want to change the name, then it can change the name here as well, instead will start reflecting like was he got many such configurations, which we can play with, and we have a few more files. We also got some files with some weird names karma dot com dot Js, which is for testing. And here is a folder where Angler had created tests for the application that was auto generated. He do. It stands for end to end tests and then we have source folder. This is where we write our application logic. And it had all the d created. So called a route component will talk about components in coming time, but essentially are in that application would be going inside this parent component and even inside here we have made is different files. And then we have knowed modules. This is red. You find all those packages basically all the north modules, our packages, your been eating in order to build and run your application, for example, we have angular see line here. And if you notice you can even see the command that we're just run. If you go to commands, you would see this file. So we have a new door, Jess, which is a command we just used to create this project. So that's just a quick overview of how the product is structured again. Just roughly understand how it is structured and nothing more than that. We'll dive deep and understand each one off this in detail. I'm trying to refrain myself from using all those terminologies which might and no you. At this point, I'm trying to keep things simple for now. Hope it makes sense. 6. 1206 Web Pack: If you're learning any JavaScript based technologies, it's really necessary that you understand what is a Web back and try to understand its role in the application development. In order to understand this, let's consider a few scenarios. It's so that you have an application with these JavaScript files. You have one Dodgers, which has function F one, and then we have to Rogers, which depends on Wonder TS because it is trying to call a function in Wonder Jets from the EFTA method. And then we have freed orgs, which makes call to functions in both wonder Jesus as well as to Rogers. So it's safe to say that two Gorgeous is dependent on wonder. Js and Three Gorges is dependent on both wonder Jesus as well as to largesse. If you want to specify these jobs script files inside an HTML file, then you have to follow a specific order. In this case, we specified Wonder Js first and then to Rogers and then treat RGs. This works well because we specified one before, to which depends on one, and we specified three door Js in the end because all the JavaScript files it depends on came before it. If you mess with disorder, even accidentally see that you have put one Georgie s in the end, then your application wouldn't work because three door Js is dependent on Wonder Js. But by the time the RGs is loaded, wonder Jess is not present because it came after that. Similarly, can't specify the order in this manner. 321 In this case, we just have three files, so we can easily managed to fix the errors. But what if you have hundreds or thousands of JavaScript files which need to handle like in gets off angular applications, then surely you can't manage it manually. You need some tool that will take care of this. Dependence is, and that's where the back will come into picture *** will manage. Dependence is for us with a little to no configuration. Another problem that backpack salts is, for example, say that you have three JavaScript files which you need to specify inside your estimable file. Then, in order to load your page completely, your brother needs to send multiple requests equal into number of JavaScript. Files is specified inside arrest email file, which is fine for smaller applications. But again, If you have an application which is built using Anglo, for instance, you'll probably be having hundreds or thousands of JavaScript files. That means that there are a number of JavaScript files your brother needs to make a number off. So requests which will drain the performance increases the load time and so is going to result in bad user experience. However, we're pack will solve this problem, where pack takes all your just twice and transforms them into one huge pile sort of ridges . The number off round trips required added to that. Rep Akkus Modern of to not include the code that is not used. For example, all the functions that are not called anywhere in the code would be eliminated. They're not useful anyway because they're not called inside your coat, essentially, to summarize the back manages. The dependence is it will register number off round trips required to run the application, and Lepak will also take care off, not including the court that is not used. It is modern of to do that Orel. With all these, you'll see improved performance and low time and hence better user experience. Hope it makes sense if you take a look at the source. Score off your first angler application. You won't see all those JavaScript files. I mean, you might be having hundreds of JavaScript files inside your anger project, but you won't see all of them in here because *** has done its job and improved the efficiency and low time in the rest of the course will explore more on what's happening in here. 7. 1207JITvsAOT: in this video will try to find the difference between just in time compiler and head off time compiler. But before that, we'd understand what these are for that. Let's go to visual studio code. You. What I have here is a simple actually tag inside or template or the estimable file. And we also have our engines so command running. If you go to the Broza, you would see that text getting displayed in heading format. No, Let's that I wanted to read a variable from a typescript trial and displayed inside our template. By the way, an angler world we call this estimate filed as templates. We're going to talk more on components. More Jews, etcetera, thereby He will be familiar with all these files in here. But for now, just think about it this way. This type of file in here corresponds to this template. And if you won't read a variable that is inside this typescript, for instance, we already have a variable populated automatically by anglers. Eli, When we created this project, let me copy the variable name and try to display its value Inside our template, we have to follow syntax. This is called string interpolation in angler, You start with a couple of Kali braces and end with a couple of Kali braces. And between these two, he would specify your wearable name. Now, on the browser, Brother will not displayed this as a text. But this will be replaced with the value in here. Let's take a look and sure a debt. But how did this happen? I mean, what we have here is anglers Index. This is not STM. Oh, how did browse and know that it needs to replace this with its value? Well, the answer is it doesn't know there's somebody that is actually translating this angler notation to something that brothers can understand. Well, that's something is nothing but NGC are angler compiler, and this is different from the transponder we had talked previously. The job off transpire lor is to translate the typescript files into equal and JavaScript files. And moreover, this chord in here isn't inside a doctor's file. It's inside the daughter schema file. So this is not typescript and typescript, compiler or transpire. Lor doesn't come into picture in this case survey does n juicy would come into picture? Well, it depends in case off nd. So by default, even the company would be bundled and would be sold to the browser. Let me show you what I mean to go back to the browser. And if you take a look at the source cord, you would see a lot off our script modules. And if you go inside window door GS file, you can actually look it with me. Zoom in a little bit. Let me search for Compiler Door. Jess. So you have this angular compiler or engine see delivered to the browser and this will actually translate those angler notations to binaries that prosecute. Understand? You can even find the string interpolation syntax that were just written inside main dot Js file and here it is. But brother did not display this as is because again, the angler computer has done its job right when we first Lord this application, this is called just in time compilation. Because this compilation process is happening when we want to load this application the opposite off This is ahead of time, Compiler. That means this translation happens right when you build application with engines self, which also means that the Kampala will not be bundled along with your application. So how do you use ahead of time, compiler? Well, you stop drop and one additional para meter that makes it out of this. I'm going to provide the option. It will be they will see stands for ahead of time, ahead of time. Compiler, he quotes True by before this is false. No, I'm enabling it. It's going to take a while. I guess it's able t. Let's go back to the browser. I mean, close all the rest of the times, the media load the page. And this time, if you take a look at the source code and if you go inside render dot Js, you won't be able to find that compiler. That's because it's not bundled and delivered to the browser. The compilation process has already taken place right when you build the project and even inside may not, Jess, you don't find our angler string interpolation code is just not there. Even if you go back to the console and take a look at this size in case off a body, the size is 2.65 MB. But yes, and guess off charity, its 3.8 MB because N. J C compiler is also included and packaged as part of the bundle. No, let's find out the differences between these two and try to understand which one is better under what scenarios with J T. Your application lords very slow as it needs to combat the application when running it for the first time, and it also requires those additional compiler libraries. And hence the bundle size is going to be more, which also means the load time will also be increased. For these reasons, it's not recommended that you use just in time compiler during production, but only for development in development, your application server as well as a client residing in the same host. So there isn't going to be much off a delay in response. Also, it's what noting that if you're using just in time compiler, then you're exposing your angular code, which might be a security concern. In contrast, ahead of time compatible Come into picture, we're building the air and since we're not deploying compiler along with bundles, there's going to be significant improvement in lord time, and we wanted to seen the difference. The difference between the two was almost one MBI and hands. This is suitable for production and Roman, then development and Roman. And since we're not exposing the code, it is more secure. Hope that makes sense. 8. 1208ngServe: in this, we will try to get into more details off this angler cli Command Engy. So this command is made a lament for testing your application. I mean, once after a 1,000,000,000 application, he wanted to see how it all goes on the browser. Well, here's a command for that. Without dis command, you have to build your application and then deploy all those files on their server and Goto browser. Open the Ural etcetera. But this comment, however, all that would be taken care and moreover, your changes would be reflected on the browser has. And when you make changes inside your cold so essentially this command would launch a server called Wept Back, they'll silver, and then it will build the project, which is when all those files that are meant for development would be ignored and only the files that are meant for running your application would be delivered. And this loss of watcher files and rebels, the app as and when you make changes to those files, let's try to understand it from the visual studio code. So here we have our sample application, which was auto generated, and then I ran this command and just so, hoping so what this has done is it has built or project if you're used to working on any real time projects, building would mean generating a new folder where you would see all those resulting files. But in this case, however, all those files would actually be stored in memory. That means inside your RAM memory, not inside your hard disk. If they were generated in hard disk Europe fencing, another folding here and gets off angular before the name is dist for distribution. And as I mentioned before, this command will also start this over called the Back Toe Silver Developed. Those over will actually pick all those files that are in memory and would serve it to the browser and hence the name N. G. So, But before doing so, it will actually take help with the Web back. Hard to be more precise. It will actually use so called a pack their middle, where which will use, wept back in order to create a bundle or off all those files, and that bundle would then be picked. And so to the browser and hence the name of the summaries wept back their silver because it's going to essentially sell the bundle created by the way back to the browser. If you go for the down, you would notice angler life developments over is listening. Which means this cell right here is not really meant for production. But it is just for development. We didn't even install any additional servers. This is all taken care. And here is how our application looks like. But if you want to change this application or if you want to change the cord, you can certainly do that. We're going to talk about all these files, incoming lectures. But this is where our court is reciting the middle. It all this and indeed use a H one tag with something. And the moment has saved this file. The angular the angler see liable again building their project. Put it inside the memory, and the suburb will pick the bundle created by the web back and serve it to the browser. And hence you would see it getting reflected immediately on the browser. And in order for this to work, even brothers have to have the support for the same and all modern. Their browsers support this, and I hope that you observed that the silver is actually running in Port 4200. Hope it makes sense, you know, Next lecture. We're going to dive deep and understand how it actually works, where it all starts and how it actually renders the application, etcetera. 9. 1209IncludingBootstrapFramework: in this video, we're going to take a look at how we can install bootstrap library or framework with angular poster for waters. Bootstrap Bootstrap is a front and framework that will help us create response to cross browser compatible and mobile friendly websites. Now you don't have to worry if this is a new framework which we need to learn. You don't have to know anything about bootstrap, other than knowing how to include this inside our project. And the reason why I want to include this is it will make our application look visually appealing without we having to write. CSS are cascading style sheets, so we don't have to pay attention to how our application is going to look like. Bootstrap is going to take care of that and will allow us to pay attention to. More important things is to learn angler concepts. They're multiple Western stolen computer bootstrap. But the approach that I'm going to recommend is by using North Package manager. Let's take a look. There are primarily three steps in world. First of all, went install will strap by using NPM Command NPM install both strap, so this will download the libraries and keep them inside. No more deals Folder. Also, if you're using nor jails that is worsened below five. Then you have Dad an additional option half save. So in addition to this command, you have to say hyphen hype on save so that it will be saved, a spot off or dependencies. If you follow it along with me, you probably have the latest Russian off Norges, so you don't have to worry about it now. This is going to take some time. So let me dispose the video and then get back once it's done. So we're done installing Bootstrap. We also need to install Jake. Really? So I'm going to use the same command. But instead of Bootstrap, this is going to be Jake ready. Bootstrap uses Jake ready in order to bring in all those response of features on our application. Again, this is just for better user experience. Nothing too fancy. Let me pause the video and then get back once it's done. So we install J query as well. Let's go toe packaged or Jason. And if you notice MPM Command not only has downloaded those libraries and stored them inside north modules, but also has added those dependence is Soto say, with some typing, and it's not enough that you just have those libraries in place. You have to use them. Traditionally, you would include those post op CSS and JavaScript files inside the estimable file, which is, ideally, gets off angler application. It should be indexed arrest, email. But there is a better and reliable approach is to configure it inside angular door Jason File. Going to have a bootstrap dot Caesar's file added as part of this today, and we're going to have a bootstrap script files as part off the script? A. So we turned to relate apart to that file. And for that, I'm actually going to navigate to North Modules to make sure that you refresh the project so it will be able to see the downloaded libraries someone to search for bootstrap inside the dest folder CSS. Here it is, went right, click on it and copied or later path, and added, as another value went to change. The direction of this slashes, though, because it would conflict with escape characters. And let's save the file. Similarly, we need to add a couple off script files that are under Js folder. I already have the parts handy. I'm just going to copy and paste them in here just to save a little bit off your time. And once you do that, you're good to go. From this point on, Anglo will take it off, adding these libraries inside the single page application that gets loaded. But do make sure that you add these values inside. Build not under best. So you have the exact same fields here as well. Don't add them in here. I had them add them under boot like we did here. Let's also quickly run NGOs. Serve to see if everything is working as expected. When that's done. Goto browser. And here is your application, right click and take a look at the page source. And if you check this ties door Jess, he should not be able to locate Bootstrap Library. Hope it makes sense, and even the text in here is looking slightly different combat to what it was without bootstrap. That means our changes are significant 10. 1210AngularComponents: The goal of this chapter is to help you get usedto angle of features and understand what it has to offer. Basically, we wander minds to get used to Angler World, and in this video, specifically, we're going to talk about angular components. Confidence are the basic building blocks off angular application and are independent reusable units. Before I confuse your further, let me show you an example just Was it any angle of best website? The end of application is actually split up into multiple components. We could have a component that can have multiple child components. For instance, the entire application is actually one huge component, and here it is highlighted in green box, and then it can have multiple child components. For instance, all the sections that are highlighted in red. And if he really observed all these components may have three different factors. A competent can have you, which is the HTML. And that's why we're able to see the competent. And then it can have style, which is why we're able to see the component in visually appealing way, and then it can have behavior which it defines what should happen when somebody contracts with the competent pullin stance. If you take this component, it has HTML the view, and that's why we're able to see it. It has styling our CSS, and that's why we're able to see it in visually appealing way. And then it can also have behavior. For example, what should happen when somebody clicks on Sina button. Maybe you would like to show a sign up form har. What if somebody wants to search something? Maybe you would like to accept whatever the text that is being entered and show some results. Next, let's take a look at how we can create our own components in Angler. Let's go to court when you created the project. Using engine new Angler has already created one component called AB component. This is going to be the root component which will host all the components that we will bring on table Angler Lord Discomfort mint and soon we're going to take a look at how it actually works and where it all starts where ultimate angler will load this competent and it will automatically trigger all its child component, which means our entire application would be loaded. So let's go ahead and create a new component. For that, I'm actually going to open a new terminal and the command that I need to use his n g generate what would like to generate a competent. So that's component And then the name of the component. In my case, I'm going to damage task students. Maybe I'd like to create a competent to show our display list off students. This is actually going to take a while. So this has created the competent, and you can actually see it in here under the APP route component. And it has created basically four different files. The HTML, which is a view. The CSS, which is the styling for this competent. If you won't write any styling that is specific to this competent again, have that Gordon here and then we have typescript, which is essentially the behavior, and we also have another file. It's spec dot es. This is something to do with testing at the moment. We're not really interested in destiny aspect off this application, so we will ignore this for now. But let's pay attention to these three files in here. So all these three files combined together before my component by the way. That doesn't mean that you have to have all these three in place. You could have a competent without styling, so you can get it off the CSS file in here. And in fact, we can get it off this because we already have bootstrap taken care off styling aspects off for application. But we need to have the template or their steam, although this is where he would have your esteem, a logic. And we also need to have some kind of behavior for that component. And so we have this type script file that corresponds to that component. This Take a look at what was auto generated inside this file. If you notice it has this decorator anything that starts with Adelaide Symbol is called a decorator in angular. And this is a competent decorator would state that this class right here is a competent. Now, this time, knowledge might be little confusing because we call all these three together has a component as well as the class in here is also toned as a competent. So don't get confused. Depending on the context, competent would mean multiple things. Whenever I'm quoting if I say component I referred to this particular file, and men are application gets loaded on the browser. Whatever gets displayed by combining this three is also called a component. Anyway, let's explore what's happening in here. So we have the decorator in here and it is having some matter data. We have template your that corresponds to this HTML file. So we specified it. Spot. Similarly, we have styles. You are that corresponds to this file. But in order to use this decorator weight actually imported from the angular court library and that's what this instruction does, we also have a class. What states that this is a class, that's what the obvious and it has constructor. If you're used to any program language, then you probably know what is a constructor. In case if you don't, this is a court that gets executed. While the competent is being created and difficult in angular, we tend to use constructors for dependents injection in simple terms. If this class depends on another class, then we would specify those dependent classes right here inside the constructor to use them in sorrow code. We're going to talk about dependency injection pretty soon and then you also have this method n g On in it. It is a life cycle hook that will come into picture during the lifecycle of this competent And whatever the court decides in this mattered, we'll get executed right after this component gets created. So maybe you'd like to have some initialization logic here If you'd like to initialize particular objects, variables, etcetera. And we didn't actually talk about the selector. This is the name that you need to use in order to display this competent inside. HTML. If you go to the index arrest email file, Angler has already specified the route competent called uproot. If you go inside, it's typescript file. It's the same name which is used. So if you want to display this competent, I mean students competent, then he would use this as a tag name and discomfort. It will be displayed on the browser. We also have this keyword called Export just before the class. We're going to talk about it once we called the concept off more deals. What we're going to do next is I would like to define a variable, um called student equals student one. Whatever. And let me just display this inside the template. Let me get it off the auto generated code. And there you have it. Let me copy the selector from here and would like to make it part of the bed and competent . So I will go inside the template off the parent competent and just use it as that bag. So when our angler renders dependent component, which is the app competent, it has the stag in here which corresponds to the competent that were just created. And so it will display everything. Waters in here. I already have the engines so command running so we can just strike. Ever go to the browser and see the results. I guess we didn't save the file. Now, if you go back, you would see it getting displayed. Next. We're actually going to and Hell's this application just a little bit. So that will display more than just the name of the student. Realistically speaking, when you're displaying student information is just not enough that you display just a name . We would like to show some more details about that student and obviously inside or typescript. We just have one very book and this certainly doesn't hold all those values we need to create a custom type. So let's do that insider app. I'm actually going to create a new file called student dot TS And inside here, I'd like to say class student, I'm going to define couple of fields. One is Theoden to fire, which is off type number and other is off type string. So that's name String. Let me save the file. We do have to use the keyword export so that we can actually use this outside off this confident we thought this you won't be able to use this class inside our students competent and actually important Import. What would I like to import student from? We're going to go back one directory and then used this class student. Once we import it, we can actually use it. So I'm going to say student, he can give water with name that you wish to gyu off type student which is a class that were just created equals you just simply going to populate those fields. I d his one. Let's say and name is going to be se sunder whatever you wish to give. Not sure why we have a natter okay, we missed. Call my character. No, let's try to display it inside our student template. Someone to say student one dot name. Let's say the file and see if everything is working on the browser. Shorter did. Similarly, we can also display the identifier or, if you want to include age, for instance, can do that. I like to name this as age, which is off type number and inside our student typescript file, I'm going to add just that age like toe. Give him 19 years doesn't really matter and let's try to display the same inside our template. Save the file. Let's go back to the browser and it worked hopes. So that's a quick introduction on angler components and surely will be creating more as we progress through the course. 11. 1211DataBinding: in this video, we're going to talk about data binding in angular data binding. The 1st 2 automatic synchronization off the data between the view and the model use nothing but the best email template. The model is nothing but the typescript file that corresponds to the template. And basically we have two types off bindings. The first off, which is one way data binding, meaning that the data will flow from the model to the view, an example of which is string interpolation. Whenever you're trying to read a variable that is defined in model inside your esteem a template like in case off string interpolation that is one day data binding. Because data is flowing from the model to the view, we also have to wear data binding. As you would guess, this means later will not only flow from model to view, but also wise worser from you to the model, an example of which is something that we're going to take a look at right now. Let's go to court. So what I have here is the student object and using string interpolation. I'm actually reading the name and age of the student, and same is getting displayed on the browser. Not sure if you're able to see it. Let me change this to it's to tag just so that we can see what's happening better. So we're able to display the student name and age from the model. So that's one big data binding because data is going from here to the competent. Now, let me introduce to with it a binding. The way I'm going to do it is I'm actually going to introduce and input field. And whenever I type something in there, it's actually going to change the name of the student. Let me show you what I mean. For this purpose. I'm actually going to use one of the angler directors. So we're going to have input field with N G model Director. This is the director that will enable us to have to read it a binding and the value off it is going to be the name because we want tohave binding between this name between the student name field and the input field in here. We can also have a placeholder text if you wish. I'm just going to say some name now if you go to the browser. You will actually see nothing because we actually have an error click on the inspect element. But what we're interested in is the console. No matter which browser you're using, you must be having it to like this. And here we're seeing another that says combined engine model. Since it isn't a known property off input, which is 100% true, let's go back. This property right here is not a standard estimable property off input bag. This is something specific toe angular. Nothing to do with HTML. When you're using an angular director in this manner, you also need to import the module. Were the static to recites again? We're going to talk about modules very soon. But whatever the application that you're building in here reciting a specific model and a few model depends on another module, you have to import it in order to use it. So way to go inside the app more jeweled RTs file, and we need to add an additional module called forms More deals. But before we include it as part off imports, we have to actually imported from the angular library. Just as with the case with Broza, more deal So we're going to be needing forms. More do and that belongs to angular forms. Library. And let me just include it in here. And values needs to be separated with the coma. Character can go back to the browser and hope everything works. So currently we're able to display the student name. That means the data has thrown from the model to the template. Now, if I make any changes to this, it will also reflect the other way. Now the data is throwing from the template to the model and student name is getting abated . This is called two were binding and it is possible with this angular director. But what we had previously is the one we're binding. Hope it makes sense. 12. 1212EventBindingInAngular: in this, we're going to talk about even binding in angular, even binding. The 1st 2 binding an event to uneven handler or a mattered. But what is uneven and even would occur when the user is interacting with your application . And here are some of the examples and even could occur when a button is clicked. Are when the user cell it's an option from the select drop down list are when the user is typing something on the search console. These are just some of the examples off events, and when you have a code that handles that, even that's called even handling, for example, when the user types and something on search console, maybe you would like to have a handing logic that will take that input and do some processing and show some results to the user. And this mechanism, off tagging and even with an even handler, is called even binding. Currently, we have an angler application that is displaying student name and age, and we also have an input field with two were binding and whatever I type in here get reflected in here as well. But what I would like to do now I'd like to get rid off the student age from here and instead would like to show a button right after the student name and that button say's show student age. And when user clicks on that button, I would like to show the students age, but in order to make this more realistic, we went actually have more than one student. Let's go to court and see how we can bring all those features, so I'm actually going to get it off this from here. But before that, let me just go ahead and create list off students. Ideally in real world applications. We would first Mr Indigenous from every more data base by making a Web service call. But since we don't have any more pep service from there, we can fetch student. We're actually going to mark the behavior by creating an aerialist off students. So instead, our laps folder, I'm actually going to create a new file. I'm going to name it as student records and of course, this is going to be off typescript. I already have called handy just so that I can save a bit off your time, so I've just imported the student object and then I've just created and every list off student objects with the name students, and this is what we're going to use inside our student components typescript file. Currently, we used to rent object in order to populate one single student, but now would actually going to have list off students. And that corresponds to these students at a list which were just created. And the reason why we have another is because we haven't imported. We haven't imported that class where we have the student today, So let's do that. Import students from student records went to go back the directory structure. That's where our student records file is deciding. So we imported that at a list of students from student records. Let's go to our template and make all those necessary changes. So this time we're not displaying a single student, but all the students reciting in the Saturday So for this purpose, I'm actually going to use a looping construct off angler in order to just look through all the list off students and display their details. And for that I have to use energy for a tribute, someone to wrap this code around a do tag and I'm going to use N G four in order to sort off loop through. Then diet. I had a list off students and the syntax for that is when does a let student off students this right here? If us to this And this right here refers to each and every individual student and using this object, we can do whatever we want inside this do tag. Let me close the deal Attack first. Let me also close this and if you go back to the browser, you should be able to see all the list off students with their details. Let's make it more meaningful by saying that this is a name and this is age. It obviously works. So we're able to display all the list off store in details. But this is not what went in to have. I'm going to replace this with a button which, when clicked, want to populate student age in another section. So much going to introduce a new tag called button soft type button. So we should be seeing a button and the name off it is going to be show Whatever is the name of the student, someone to copy the string interpolation syntax age. Let me come in this sort for the time being. I can do control slash to comment it out. And if you go to the browser, this is what you're going to see. Now, when somebody clicks on this, it's going to trigger an event. And then we'll have an even handler the backend method which will handle that event. So here I'm actually going to use one of the Anglo constructs. It's going to be a click event, and when that happens, I would like to call on Select a method. We don't have this method yet. I'm going to introduce it in just a while, and I'm going to pass the student age to this even handler matter. So back here, I'm actually going to introduce that method on select. I'm going to call it as age off type number because it's number which were trying to pass as an argument to this method and is going to written nothing. Let me also introduce a variable that will hold age of the select, a student selected student age again. This is off type number. I'm going to use this inside here this start H So essentially whatever. We're passing it as an argument to this method. We're trying to sign the same to this very book, which will be reading in another section. Some would introduce another extra tag, just like so, and it's actually going do treat this variable straight away with one way binding. I'm going to call the Does selected students age. Let me say the file and go to the browser and see if it is working. So this is going to show this under stage. And if I click this button that corresponds to Bob, it's going to show his age, so on and so forth. So that's even binding in action. Now, speaking from experience, ah, highly recommend that you fall along with me and do exactly what I'm doing and just tweet the score a little bit and basically play with it. Because angular is such a thing, it looks easy. But when you actually start typing the cord, things will be very confusing. That's just a quick get wise 13. 1213PropertyBindingAndDataExchangeBetweenComponents: in this video, we're going to talk about property binding in angler, and as a bonus, you'll also understand what is binding between competent. Let's try to understand what is binding between components with the real time example. Take a look at this image. This is a simple Google search. This page right here can actually be divided into a couple of components in the first competent. These would enter the search query and in the second, competent, the user would see the recommendations. If you observe, there has to be some kind of relation between these two components because depending on what has entered in here in the first component, the second component is getting updated. That's exactly what is competent binding. In order to understand this better, let's go to code. So right now inside our competent were displaying all the list off students and for each store, and we have a button associate ID, which, when clicked, we're going to show the students age in another section and this is how it functions. So right now, the score is reciting in the same template and within the same competent. What I'd like to do now is I would like to move the section out from this competent and put it inside another competent and somehow create that binding between these two competent and exchange data basically will have pretty much the same behavior, except that we're going to split up this application into a couple of competence in order to sublet the behavior off Google, for instance. So for that, the first obvious thing way to do is to create a component, some actually going to open up a new terminal and gender it a new component so that n g generate component and the name of the competent student age is the name that I would like to give. So, like I had mentioned before, we're going to have this card inside that newly created competent. So let me go to its template and simply bested in here. It's also changed the name to just student age because from the prospect off this component , it just needs to display student age. I mean, whatever the value that it is given with it doesn't move, it is selected or not selected, etcetera. You and the water mean once after we finish according Let's Go to its typescript for a lesbo and had this pretty. But so we have student age, off type number, so we know have a brand new competent. But this property, let's try to declare this competent inside our students competent would no longer be needing this. But let's keep it for the time being. Or maybe that skated off. This, I would add The stag, which refers to the newly created competent and this component has been property, just as any other estimate tag has its own properties. This stag is no exception, and the property here is just the property in that were just defined student age. So the syntax for that is it's going to go inside the square brackets and whatever you're declaring here, it should be the same thing that goes in here. And the value of this is going to be whatever you would like to pass. In this case, I would like to pass the selected student age variable. Now we're pretty much done, except there's one last thing to do is to declare the input decorated for this property. Phillips Voter students age typescript file and introduce. That decorator obviously would getting better because we didn't import it. This decorative belongs to Anglo core. So we can decided are spot on this list. I'm not sure why was still having an error. I think it's simple typewriter. Let's fix it. And it started working. But what is the need for us to use this input decorator? This decorative right here states this property is bounded on property in the template, which is this right here. If you want to be able to accept the data from external sources or from another component, then you have to decorate it with this decorator. And this is exactly what is property binding were ever to bind the property off a competent , which is this with another property from under the competent? Isn't this property binding syntax just to advise what's happening in here? Initially, we would show the list off students and their corresponding buttons. And when somebody clicks on the button and even would be generated and sit would trigger this mattered, which is this? This would populate this property. And with one more binding, the selected student age would be obligated on the template, and this would be assigned to this property right here because off property binding and again with one more binding, were able to display this student age inside its competent. That's what a browser and see if everything is taking effect. And sure it is working. Everything looks as before. Except now these two are deciding into different components in order to show what exactly I mean, let me pause a 1,000,000,000. And did you see assess that will show these individual components separately. Okay, we're back. Ahmadis Quickly former the cord. I would press art shift and f did your proper indentation. So what I've done here is I've just added this do tank with idea tribute. And inside this competent CSS file, I just gave some styling. There's glad of the border, So whatever gets displayed in here will now have a border in red in color. Similarly, Father competent for students, age competent have been pretty much the same thing. Except it is blue in color. If you go to the browser, what we have here is parent child components 14. 1214ServicesInAngular: in this week we're going to talk about. So this is an angler. Imagine that you'd like to fetch list off students from a remote server. Then you can certainly have that court inside your type script file off your competent. It's perfectly fine if you're just having one single component in your application, which is very unlikely. In all likelihood, you would have multiple components. And let's say that multiple components want to make a request to the server to fetch list off students. Then are you going to duplicate the same court that is already there in one component toe all the other components? Well, if you do so, then that's going to introduce a lot of problems. It's going to increase the number of friends off cold, which also means more maintenance and more cost. Moreover, if you'd like to change the cord, for instance, maybe you have decided to fish list off students from a different silver or from a local database. Then same changes needs to be taken. Care across all the locations hard inside all the components better were you having that code? So this is clearly a problem that needs to be addressed So we're going to solve this problem by changing the design just a little bit. We would give that responsibility or fetching the students from the more data store to another class in Anglo World. We call it the service service will be responsible to fetch the student list, and all the components will call its method to take the list off students and displayed. There are many advantages with this approach. First of all, we're reusing the same court, and we're not doable getting the court the 2nd 1 day ages. If you'd like to make changes to the cord, then you can change it in one location. Since it's not duplicated. Another advantage is the main purpose. Off components is to take care of the user interface. They need to represents very sections off a page. It's not a good practice to have the cord that needs to be otherwise handled by a service, like in this case, that will help us separate the constants and give us more fine grain control and keep the court organized. Next, we're going to take a look at an example of the same right now. If you take a look at our running application or just displaying all the list off students . But we're not really falling good practices here. All the students were actually fished from the same component or, in other words, the cord that will help us. Fish store in Details is reciting in the typescript file off the very competent. And of course it is a bad practice like where discuss before the better approach are A better design is to move that court from this competent and put it inside as service a steak Look at the cord. So here's accord the typescript code off the component and here were fetching the students from another class. So let's move this court from here to a service. So the next obvious thing to do is to create a service using angler Command. I want you to get the command. It's simply n g generate. Guess what service and then the name of the service. I'm just simply going to call it pass student, even though I described it as a student angler is going to happen dot service string to it . So here we have these files, including the test. While that corresponds to this file, enough course, At the moment we're not interested in testing, but let's explore this file. Everything looks pretty familiar. Except this decorator. This has something to do with the concept of dependency injection, which we're going to discuss in coming lectures. But for now, at the moment will get it off this. But let me tell you, it's not recommended that you not use dependence injection. The approach that I'm going to follow is not recommended. Since we haven't had discussed about dependence injection, I'm not going to use dependence injection in this case. So after we removed the decorator, we have nothing really. That s special about this class. Just simple class. We're just calling it as a service. But here we went to French, the students. So let me copy this import statement from here to this class and make sure that you give the right spot inside here. I'm just simply going to introduce a method with the name. Get students. It's going to fetch list off students written. I'm just simply copy bested. So from inside, our types could file. I'm going to create an instance off this class and call this method in order to fetch the students so we no longer want to fetch our imports Student records. But we need students owners, though let's call it as student service. So next we're going to just simply create instance off the class and then call its methods and whatever gets returned, we want assign it to students every who want to use this for that purpose. I'm going to make this has student today this was one be populated. What is simply going to use the horn, innit? Lifecycle Hope mattered in order to create the instance and fresh the students and this will come into picture right after this component gets created, you can also do the same from the constructor. And since the constructor would come into picture while creating this component, it's not recommended to have the court in here. So let me just created in stance off our student service this start students equals, let's actually move this court from here and make this part off another method and call that method from N. Jeon in it just evolved from good practices because it matter may not be just meant for student service. We may actually want to use it for very different purposes down the line. So get students and simply call this method from here. So that's out shift F to give proper inundation for a cord. We seem to be having another. Let's see what it says. Okay, I see It's a quick type wetter. That said, the violence. See if how the application is working and it works the same as before except off course. We're now following some good practices, but still, we definitely have a lot to improve because, like I said before, it's not good practice to actually create instance in this manner, instead would like to use the dependence injection mechanism, which will discuss incoming lecture. 15. 1215DependencyInjectionInAngular: in this video, we're gonna talk about dependency injection in angular. Imagine you're like the fetch list off students from a remote server. Then, instead of having that logic inside all the components, you would have it inside. A common location called a service service is now responsible to fresh the list off students from the remote silver and from all the components. Wherever you need the student list, you actually call them method inside the service by creating an instance off service. So essentially, inside all the components, Hume actually have a cord that looks something like this. You would create an incense off student service and using that object you would call its method, which will return the list off students. However, this court has couple of drawbacks. The first drawback is you will end up creating multiple instances. I mean, it's not necessary that you need to create multiple instances. Off student service is just enough to create one single instance and let that instance b share across all the components. So to save memory with the current court, however, we went in the past in a lot of memory. The second drawback is it's really hard to write this for record like this in order for you to understand this year to have some familiarity in writing just for source code. And guess if you don't, then you can ignore this point. If you do, however, then you probably know how difficult it is to write tests when you're actually creating an instance in this manner. In contrast, if you use dependence injection, however, it's really easy to mark the behavior off. Student service. Answer can write tests with lesson number off lines off court with improved readability, improvement, inability and even the overall development time will also improve. So what is dependency injection? Well, in this context, with dependents injection in stuff you creating the instance he will ask somebody to given already created instance. So essentially somebody is going to create an instance off student service and the same instances given to all the dependent components. So to save memory, my heart is the dependence injection mechanism walk. How can we implement dependence injection in angular well post a fall from inside the component way to tell the angular dependencies system that are component is dependent on another class. How do you specify that really is by using a parametric constructor. I used to have to specify a perimeter that you're component depends on, and somebody is actually going to inject that dependency in this case, the student service object inside this constructor and so we can use it in our court. So in this case, somebody's going to inject the dependent object, which is the instance off student service. And we're using the same instance in here and calling its method in order to fetch list off students alternatives that I didn't ascend this argument do any class very book and the news dip. You don't have to do that. It's all taken care implicitly, he condemned. Italy used this name that will represent the instance that was injected, in contrast, comparing it with our earlier example or earlier code. We have an empty constructor, and we even went ahead and created an instance off student service, which is again back practice. So this mechanism is called dependence injection because we have a dependency that are competent depends on, and we're asking somebody to inject it. But what's that? Somebody who will take her off Injecting the dependence is, well, that's an injector service from angular and typically angler will create so called a route injector, which will do the job. But in order for injector to inject the student service, the student service has to be a valid candidate for dependents. Injection mechanism. How can we make student service eligible for dependents injection? He's by decorating the class with injectable decorator like you're seeing here, but it doesn't tell about this class itself. For that, we have to register the provider with the injector. What's the provider? Well, this class right here is essentially a provider because it is providing a service in the scarcity is helping the components specialist off students from the perspective of components. This glass right here is a provided off a service and this providing student service essentially so now, in order for dependency, injection toe work are in order for the student service to be injectable in other components. We need to register this provider with the injector. We can do so a direct margin level or at component level by adding the following value inside their meta data. If you want this provided to be scoped within the module, then you would add this inside the modules. Meta data entered can be accessible across all the components that recites in that module. Or if you want this provider to be scoped within one single component, then you can add the same inside components matter. Data are. If you want this to be scope across the in that application, then you would actually add a matter data. Inside the injectable decorator, however, the metadata is not the same. It's something different, and it's something that we take a look at when we actually go to court. So just to summarize when the application bootstraps going to talk about bootstrapping incoming lectures. But when that happens, Angler is going to create instances of all these classes, and while it is creating an instance off this component class, it notice us that it is dependent on an injectable dependency so angular injector will actually take care off. Injecting it to this component while calling its constructor and inside are court were using the same object in order to call its methods. This is definitely going to solve our problems because we're just reason the same instance again and again not creating multiple instances, and this is even easier to write test cases because it's really is it to mark the behavior off this service while writing tests for this particular component code. And, of course, in order for the injector to be aware of the service has the provider and to know about its scope were to add the meta data inside a the module or the component. Let's go to court and see how it works. 16. 1216DependencyInjectionInAngularPart2: So here is the running application. I'm just simply displaying all the list off students. Nothing too fancy. But if you go to the cord, then here were using the dependence injection mechanism by creating a parametric constructor. Then we're using the same in here as well. And like I said before, I don't have to create a class variable and then assigned this particular object to it in order to use it. Kinetically uses because it's all taken care implicitly inside the student service. I've annotated this class as injectable, and so it will become injectable by dependence injection system. And of course, I've always added the student service as one of the providers inside the metadata off engine model. And here, in this case, we're not really making an external Web service called We're just, uh, approaching the students from student records, which is simply in a day. So yeah, but not really making a Web service call, we'll do it in common lectures. This is just a similar to the behavior of fetching students from the remote silver, but the idea is to understand dependence injection. So right now, the services coped are the provider is coped with this module. Since we added this provider at module level, let's he want in Greece a scope to end their application. Then you can add the matter data as part off injectable decorator and you're going to say, provided in. And then you'd specify the injector. Like I mentioned before, Anglo will create the injector for us, which is the root injector. So you would specify the same under quotations, and this needs to go inside, call the brackets and you're good to go. I'll do all shift f to do proper indentation saved the file. And if you go back to the browser, things will function as usual. Hope it makes sense. And I hope that you understood what is dependency, injection and its significance. 17. 1217ModulesInAngular: in this video, we're going to talk about angular modules. Angler modules help organize related things together. Well, what does this mean? What do I mean by related things? Or is a module in first place? Well, you can think off module is something that would compress off components. Directors injectables are so this is etcetera. Before I confused before the let me show you an example. Whenever you create an angler project using Anglo Seelye, this is how the project structure might look like ignore all the other components which we have created for our own purposes. But at its core, angler has created so called a route module which would compress off one component, which is the APP component. This is the main component under which will create all the child components which will make our application. But in addition to all this standard component files like CSS template the test file, as allows the typescript file. Angler Seela has also created this file called Abduct More Deal. And as that mentioned before in modulate comprise off it has different things like components, pipes, directors, etcetera. If you open up this file, this is how the court might look like the class would be decorated with energy module. It has a falling meta data declarations. This is very would specify your components directors. If you want to create your own directors or pipes etcetera, you would have them listed in here if you notice. We have already created couple of components called students and students age, and those two are all that included as part of declarations. If you don't include them, then you would see another during the run time in a similar fashion. If I want to create my own custom dedic to, I need to specify a despot off the declarations to tell angler that that director is part off this Mordor, and then we have imports and module can also depend on other modules. Some of the murders were actually provided by angular. For example, we have forms model, which is provided by angular library, and this will help you write all those angler directors for data binding etcetera. Similarly, if you want to send request to a remote server, you would be needing extra declined. So there's a module specifically for that purpose, so if you really observe, each module will have a unique purpose. For example, if you want to create a school management application, then you have a module to manage all the students, and then you may have other modules for admits. And then you may have other modules to take care off user authentication, so each module would compress off later files, and they all do a specific task. And then we have exports section This is very would specify what are all the things that you'd like to export to other modules? Want to use your model? For example, You could mention one off your components here, and some of the module, which wants to use this component that belongs to your model, can actually use it because you included as part of exports. However there, the more joking or access are the component because they're not exported providers is something that were talked about in our previous lecture. Essentially, if you have any injectables like in gets off student service, you would populate it in here and have its scope restricted. Within this more deal and all its components. Bootstrap is something that we're going to talk about incoming lectures when we actually take a look at sequins off actions that would take place before your angler application gets launched. And just as with components, you can have a module inside another module to create that parent child relationship. And for that there's actually command and degenerate module and then the module name. For example, I can go inside the students territory and create that file that would create a module file with this decorator inside that finally can actually mention all your components, pipes or directors, etcetera. One of the other advantages off more jewels will come into picture when you actually run the application. When you're loading the application for the first time, I mean, whenever declined since the request to the server for the first time, you actually don't noting then that application. But the size of the application can be so huge that it would take a while to download and load it, which is going to result in bad user experience usable. Keep seeing that refresh icon for a while. Thankfully, with modules, we can load only the margins that are required at the point of time. And as you interact with the application, all those additional models would be loaded lazily hasn't when you need them so that we don't have to download the entire application in one go. He would essentially Don't. Not only the parts that you need right now, whatever actions you're taking on the website. So that's one huge advantage with more deals. I'm not going to show you any chord because this is pretty much what you seen there as well . But I hope that you understood what? Our modules in angler. I hope it makes sense. 18. 1218AngularRouting: in this video, we're going to talk about angular routing, noting will allow us to configure what components to render, depending on the actions taken by the user. Digimon, for instance, initial. Even the user logs in. These are messy all the list of females he or she received, and depending on the actions performed by the user, we may get to see what is different components, for example, of the user clicks on sent link. Then we want to render a different component with all the sent emails. Are these the clicks on this button compose? Then we may want to show another component, which will allow the user to send an email. That's exactly what is routing. Let's take a look at how we can come to the routing in our application with a simple example. Let's go to code. Right now we're displaying all the list off students, but what I would like to do now is I don't want to show the list off students in the home page. But instead I would like to show a link that says, show students, which, when clicked, would like to run the disk component. Let's go to visual studio cord and see how we can do that. So for this purpose, I'm actually going to create a new, more deal. So that's n g. Generate more do. And the more that I'm creating a specifically meant for routing. And so as a good naming convention, we always name it us up outing, ideally water the stuff that we're going to contribute inside this file. We can do the same stuff inside the APP modules file, but it's not recommended because it might actually mix things up because we don't want to disturb this file and instead want to have the roading configured in another module. We're going to import this model into this model just for our own convenience. I'm going to provide a couple of options. The first option is flat. Without Providence Option Angler Seller will actually clear the folder, and then it will keep the approaching file inside it. I'm not interested in having that pile inside another folder, so I'm just going to say flat, that will just create the module without the folder or directory. And I'm also going to say this is going to be part off a more duel called which corresponds to this. So with this option, I'm instructing angler cli to import this module into our APP model. If you don't provide this option, you'd have to do it manually. So here is the file. Now we need to import the routing more deal so that we can bring in all those rotting functionalities. I mean, just copy the statement, counting more deal, and we're also going to be needing. I wrote and the boat belonged to Angler Qatar Library. I guess this is what more do. Yep. So this model right here will bring in all those rotting capabilities to our application and wrote is in every where we can configure our own droughts, you will know what I mean in just a minute. Next we're going to configure route roads will help us specify what component should be rendered when the euro matches with a particular string. I already have the court handy just to save a bit off your time. And it's also important the students component. So with this configuration, whenever you have a you are with despite it'll a string we want to render the students component. So when you have a your let's say is local host 4200 slash students. When this string is part of the your then angler rotting mechanism will render this component next. Will it actually configured this routes with the rotor? More Do and we can do that inside. List off imports. We won't be needing common module for now, so I'll get it off it for now. I'm going to say rotor model, not for route. That means starting is applicable for entire application. And here you were just past those routes that you configured previously here. And we're also won't have exports. It won't export the daughter module and so it can be used across all our components. Rotor Ma do have you saved the file? So whenever we have a your that has a string were rendering this component. Let's go inside. The app component template here is we're displaying the list off students now. I don't want to display this anymore. I want to displayed whenever somebody was this study Orly with slash students. Hey, I'm actually going to introduce a new tank router outlet. This belongs stood out to module. Now this is a component that it's part of the rotor module. We talked about the modules, and I said, You can export the components when you want them to be used in other more deals. Well, haters example for the same. And then in addition to that, I also would like to have the navigation menu and would like to add a link with the attribute Router Link equals This is going to be This is going to be slash students, and I'm going to call this lingers Show students. I misheard the file. I already have the engines so command running. Let's simply go to the browser and see if everything is working great. And indeed it is. So this is the home page, and when I click this link, the your list changing toe students, and it would render this component just as we can figure in our roading configuration. In case off Gmail, for instance, this could be something like compose an email. Then you'd like to show a couple of boxes with subject and body, and maybe with the send button, which will send the email. I hope that you understood how real time applications are built using routing 19. 1219AngularHTTPClient: in this way, we were going to talk about Esther. Depict lined in angular. Imagine that you have an employee management application. Then one of the things that you need to do is to fetch list off employees from a remote server. The court that will help you fetch Let's stop employees from a remote server would be deciding inside your service and then all the component who needs the list of employees. We'll call the method inside the service. But how does service make a Web service call to the remote server? Well, by using yesterday, declined using a should've declined. So this will be able to send this to the request to the remote server, and then the remote server will respond back with list of employees. Adrian Jason, our Necks Immel format. Whichever the format is requested from the court. Now let's take a look at how we can actually implement. Hester declined inside our angular project. First things First unit import extra depict line module that belongs to angular communist er db library. And in addition to that, you also need to add this module inside list off imports so that will be able to use this inside all the classes and components that come under this model. Next, we need to write the code that will help us fetch the list of employees from the remote server in order for this to work. Way to have a Web service, exposing few endpoints where we can send request and then get back some response, which in this case is going to be list off employees in order to keep things simple, we're not going to create a Web service. Instead, we're just simply going to use one off the dummy Web services available online with a quick Google search I came across with this website that's dummied or trust FBI example dot com. Let me take you to that link real quick. So here I am inside that website. So they are exposing a Web service, which we can use in order to sort off retrieve all the list of employees or get a specific employees with unique identifier, an example of which can be seen in here. We can also create an employee update or even delete an employee, But right now we're just interested in understanding how this repeat lined walks. So we're just simply going to retrieve list off employees, and the link for that is right here. We can use this link in our activity list of employers. So think of this as a remote web server, which is exposing all this endpoint in order to do where it is different things. So, using this, you are I'm actually going to fetch list off employees. So we have this method get employees and inside here I'm using that object yesterday declined in order to use this way to first dependence injected have actually added, this perimeter has part of the constructor. So and global dependency inject when the application gets bootstrapped and we're going to use the same instance and calling its method get and then passing that your as an argument . So this instruction will help us and Hester depict get request from our application to the remote Web service. And if you notice the method destitute, the matter that way to use here is indeed get. If you want to delete an employee, then you need to send the request using a stripper delete method and whatever gets returned with the converted to employees object. So, for this purpose of course, went to create a class on interface in order to accommodate whatever has been sent back from the silver. Let's take a look at this file. If you're wondering how I created this, then I'll just use one off the available online tools in order to convert the Jason file into equal and typescript. Let me show you what I mean. If you go back here and click on the details, they've actually populated a sample response, have just copied this and converted this infrequent typescript file. And I got this. If you notice we have a couple of pills in here when his status and the other is data which would compress off list off employees. And each employee is having a unique identifier employing name Saudi agent image and same is reflected in here. We have status as well as the data field, which is actually an Eddie. And each element is essentially an employee having all these fields with a quick Google search, you will come across with one such tool pretty easily. So now whatever the response that we received from the server will actually be converted and represented with this object next from inside a component will try to fetch all the list off employees. So for that purpose, have actually dependence injected, employ service in order to call it smelt it, get employees. So this method right here is actually going to return me an object off type observable, which has the method called Subscribe. Now it's really hard to explain this in single video. This is the concept off streams and basically would subscribe to a stream and then listen to the stream. But to keep it simple, just imagine you're getting a stream of data from a source, and then only when you subscribe, the data stream will start flowing. Or, in other words, only when you have somebody to listen to the stream. Do we actually send the request and federal the list of employees and whatever is being streamed? We're doing some processing here, in this case, have created a variable off type employees, which will essentially hold the response. Lastly, I'm just trying to display all the names, some using Engy for director and trying to fetch all the list off employees. So that's date off well, which is essentially an area off employees. So that's data field inside our template. I'm just trying to look through all the list of employees. So here I'm trying to fetch list of employees, which is essentially the date off field. So we get in a list of employees, and then finally, I'm trying to display their name in this manner. If you want to get creative, you can actually display all the other fields as well. But I'm just trying to just demonstrate the concept off, sending the request and then present it to the user. If you go to the running application, this is how our initial application would look like. And if you click on show employees, it would send the request of the remote server, pitch all the employees and then display their names in this manner. And, you know, previous example, we had show students, so that's routing, which is taking place if you go to code. We're pretty much had the same stuff. Whatever we had just discussed. Nothing different. So inside our employees component, we're trying to read all the names, etcetera and set up modules. We just imported it inside Employees components typescript file. We're trying to retrieve list of employees and then inside the Employee Service type script file we're using extra declined to send the request and in this case, I'm trying to send a get request. But if you wish, you can send delete patch for partial update. Are you concerned The Post Request? You can even upend the Prospera meters Query parameters, etcetera if you wish. Depending on what did the moat Web service demands over, it makes sense.