Learn Angular 8 by building a Progressive Web App (PWA) | Vinod Kumar | Skillshare

Learn Angular 8 by building a Progressive Web App (PWA)

Vinod Kumar, Software trainer, developer & consultant

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (2h 40m)
    • 1. Introduction

    • 2. Characteristics of a PWA

    • 3. Installing nodejs

    • 4. Installing Angular CLI

    • 5. Installing Firebase tools

    • 6. Installing VS Code

    • 7. Creating an account with omdbapi

    • 8. New Angular application

    • 9. Home component

    • 10. Header component

    • 11. MovieList component Part 1

    • 12. Routing and Single Page Application

    • 13. Getting the list of movies based on search term

    • 14. MovieList component Part 2

    • 15. Getting the movie details based on IMDB id

    • 16. MovieDetails component

    • 17. Adding PWA to our project

    • 18. Walk through of the generated artifacts

    • 19. Creating and updating icons

    • 20. New Firebase hosting for our application

    • 21. Deploying our Angular application to Firebase hosting

    • 22. Accessing the MovieBrowser PWA site on Chrome

    • 23. PWApp on a mobile phone


About This Class

Develop a real world Movie Browser app and deploy on Google's Firebase free hosting service.

A Progressive Web App or PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. PWAs need to meet a set of essential requirements that we'll see next. PWAs are similar to native apps but are deployed and accessible from web servers via URLs, so we don't need to go through app stores.

A PWA needs to be:

  • Progressive: Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.

  • Responsive: Fit any form factor, desktop, mobile, tablet, or whatever is next.

  • Connectivity independent: Enhanced with service workers to work offline or on low-quality networks.

  • App-like: Use the app-shell model to provide app-style navigation and interactions.

  • Fresh: Always up-to-date thanks to the service worker update process.

  • Safe: Served via HTTPS to prevent snooping and ensure content has not been tampered with.

  • Discoverable: Are identifiable as "applications" thanks to W3C manifests and service worker registration scope allowing search engines to find them.

  • Re-engageable: Make re-engagement easy through features like push notifications.

  • Installable: Allow users to "keep" apps they find most useful on their home screen without the hassle of an app store.

  • Linkable: Easily share via URL and not require complex installation.

In detail, this class will cover everything you need to build amazing PWAs - leading to a score of 100 (out of 100) in Google's PWA auditing tool "Lighthouse".

This is completely a hands-on training, bringing all the best practices that a developer should follow in his/her projects.


1. Introduction: Hello and welcome to my courts. Don't angular eight by building progressive about my name is we know on. I'll be your instructor for this course. I have over 23 years off training experience in I T Industry and trained hundreds of thousands of software engineers. This course primarily focuses on two things. Number one, learning angular Number two. Creating a progressive Web application. Angular is one of the most popular framework for developing mobile on Web applications. Current washing off angular as off this recording is a door to about 15 however, even for future Russians, the framework is simply called angular without being referred to its abortion. If you ever hear it would angular Js, it corresponds to abortion Wonder eggs, which is completely different from angular two onwards, which are simply turned us angular. Before we begin. Let's have a look at what we are going to develop. Why learning angular? Here is the Ural Off or Application, which is hosted on something called Five Minutes, which is from Google are application has a header where the title I can click on that toe come to this page called home Pitch. The textbooks very concerned for movies on the home page displays my picture. The title of Your application, which is angular PW demo application. Devil it by my name link to my website on There is a basic copyright information about my application. I can go to the search box and search for movies. Let's say, for example, later, Jerry Press enter. You should see a list of movies which contain the world Jerry in the title. When I click on a particular movie, I should be able to see a Progress bar and the details of the movie, such as Director Plot. Your etcetera are shown clicking on the back button. I should be able to maybe get back toe the previous speech. Apart from that, our application also is install able on the device. For example, on Google Groom, I have got chrome colon APS. You'll see that my application movie browser has been installed, taking on that it will launch a standalone washing off my application, which works just fine. So if you look at Spider, for example, I get all the movie started last fighter. Even on a mobile device, I should be able to install this AB as a standalone application without having to open where a browser. The application is fast because the HTML CSS JavaScript corresponding to our application has been cashed. Our application also works off line to some extent, such as displaying the home page of your application. Are loading the components that doesn't require any data from arrest in point without any further delay, let's start learning about angular on progressive applications. 2. Characteristics of a PWA: in order for about application to qualify as a progressive about it must fulfill some baseline characteristics in this sector. We will distance these characteristics one by one. Number one, the site must be served or hits to TPS instead of hits TTP. As you can see, the application that we're gonna build has that feature already and we are making use off Google Fire base for the same. So if you look at the certificate over here, you can see that the certificate has been issued to fight was at dot com and you can see some details about the same as well number toe. The pages must be responsive on tablets and mobile devices. We are going to use CSS framework called bootstrapped from Twitter, which helps us design our application in a responsible manner. For example, if I goto this particular page over here, this is how we see this on the browser. But if oppressed after well and go to the developer concern where have enabled the device toolbar? And I'm seeing my application on an simulated iPhone 678 and you can see that the list off movies which were displayed as agreed, that now it shows one below the other. If I change the device from iPhone toe, let's an iPad and you see now I'm able to see it in a different way. The third aspect of a progressive about these all appearance should lower while offline. So our application, for example, if I'm on the home page if I goto offline, if I turn off my WiFi and then if I refresh, you can see that the APP is rendered without any problem. Of course, the searching off the movie, based on a keyword, may not display any result. But I'm not getting any other message assets that you don't have an Internet connection. My application is still running without the Internet connection, but as if I visited websites like YouTube dot com, you can see that I get no Internet at a message. We can handle that even here also on display a custom user friendly error message saying that you are currently offline. All you can also cash the results off some off these movies offline and then present the same thing to the user back on land. So if I refresh, I should be able to see the results. Once again, Number four feature off a progressive Web application. Is it? Should have moderator provided for Acto home screen. Well, this is applicable for mobile device. Even on a desktop, you can see that I have a plus icon here. Taking on this icon gives me an option toe install app. You see an icon over here, you see a name as the less the location from where this gets install. If I click on install on Crume, it will be installed as an AB on the chrome. So I can as well with it the Ural Crume Poland slash, slash ABS and you should see an application called MB or movie browser Over here. I also have a couple of other applications over here. All of which the progressive of applications are here. Number one is angular. Five base PW, etcetera. That the photo Pia that the capital that angular? So these are some of the application that I've installed. Now I have the movie also so clicking on this will open the application in a separate window. Basically, this is behaving like a standard on application on your desktop or laptop. If you open your website using Crume on your android phone, you should see a pop up that comes and says Acto home screen. And this is possible, using a matter data provided along with their application. Number five feature off. A progressive application is the First Lord must be forced even on a three g network. And this is ensure using our angular single page Web application concept, where the initial component is typically the home component like this, which are very light to it as well. You can do something called lazy. Loading off components on this feature is very much forwarded by angular itself. Number six Site Works Cross browser, which means your application must work on different process in the same fashion. For example, your application should be here the same whether it is on chrome. Microsoft Age. Firefox, our safari and angular, ensures that our application runs on all these browsers seamlessly. Number seven page transitions don't feel like they block on the Internet. The transition should feel snappy as you type around, even on a slow network, a key toe perceived performance. This is achieved by developing a single bit application or a client rendered application where a user when transits from one page to another page, we must show a skeleton screen at least on use Any contents? It s title thumbnail something that is readily available instead of waiting for the entire data to be loaded. Eight on final basic characteristics off a progressive of application is that every page should have its own urine. This is to ensure that unusual pages on deep link herbal. Why are the euros on the euros are unique for the purpose off share ability on social media , for example, we are in the home page over here that has a different urine for itself. When I type something and press enter here, you can see that the U R shows this The reason for this separate your lists. Now I can copy this and share it to someone where a email are different means on when they click on that particular Europe, they should be able to see the similar result as well. Similarly, when I select a particular movie over here, you can see that I have this particularly oral. I should be able to copy this and share it with someone. So when they opened that particular ling by clicking on the hyperlink, they should be ableto see the same result as mine. When you don't look about publication on you intended that application to be a progressive about you can always check whether it has met all these baseline features. By going toe the developer concern, there is a section called Audit On. Then you can run an audit and one of the feature that you can test whether your application is progressive about or not is mentioned over here. And at the end, when our application has been developed, we will use this tool called Light Owes Toe check the theme. 3. Installing nodejs: no jeans forwards a platform where we can compile our angular application on a development Web server. Also do some building off our application. Nor Jace is only a development requirement, which means once your application is developed, built on deployed to a production server, Norges is no longer a requirement. Your angular application can be deployed on any https there were, such as Apache Norge, a serval are by tons over our. If you come across with any other HDTVs artwork, you can try the blowing your application on the same environment to install Norges first with it, nor J start on, and it will take you to this homepage. Very see. Big Two buttons once is recommended for most users, which is called long term support 12 or $14.0 at the time of recording here. There's also the current version 13.5 dot zero, with latest features probably not stable yet. We will go with a 12 or $14.0. So I click on this. Let me keep it on my downloads folder. Save this once the packages don't wrote it. I'm going toe. Start installing the respect of the operating system. Your chosen Windows. Mac wars are leaners. This step is gonna be seen. It's a wizard. So let's get continue. Accept the license agreement. You can change the installation location, but I would like to leave it to the default location. Click on install in case with us for the administrator Password, please provide the same thing. Click install software and wait for the reserve toe. Complete the installation process. Once this is done, let's get it off this dialog box. I don't need this package for which got downloaded, so I will delete that. Now the installation is done. I can open a new terminal on windows. You call this s command prompt. So I'm gonna open the terminal here and then look for North Dash. We are north dash dash portion. So it was the washing that I've been start to alert. $14. Go. Norges also comes with a couple of other utilities. One is called np again, which is no package manager. The washing off that happens to be six start 13.4, which happens to be the latest in case If you will see an older Russian after in telling nor Jace, you can also upgrade the North Package manager using the North Package Manager itself. To do so, you might have to say NPM update dash G for Global. And then again, say NPM So we're actually using the NPM command toe update a global package called NPM on Windows. This command will do just like this, but on Lenox, Andi Mack or his human also have to get a pseudo permission. This actually asked for the password. Andi wants them done with this. It should show the same washing six. Start 13.4. So check it again by typing in PM Dutch Free and you'll see the same Washington. 4. Installing Angular CLI: starting from angular four. Angular comes with a command line interface that allows us to create a new application. I had a new components services, directors and any other angular artifacts. So this is called angular. See a line on. Do we have to install this at the global level? So I'm gonna use pseudo comment on macro is you don't need sudo for Windows. You just type npm install G followed by at angular slash C L a. The ones you press enter, it's gonna take a while on windows on Mac Warriors and lean it's This could be a little bit faster, probably because Norges waas initially intended only for Lennox Platform. So the angular cli Once it is installed, we will be able tow run. A command called N G on N G has a lot of options. For example, Engy new followed by name will clear a new project with that name. And if you want to start a development server, you might have to say N g sir, as you can see, that in my case, angular, see, like eight door treated 21 has been in start. Let me clear this cream and they in G danced s worship. This is going to show me the angular Russian as well s nor Jace on a couple of other Russians. As you can see over here to get some help, you can always take n g help and that will tell you n g available commands. For example, engine new here creates a new workspace and an initial angular app in geezer built themselves. The up rebuilding files on changes engine tests to run the test cases that are currently available in your project n g build aloes is toe compiler and their project onto an output territory so that we will be able to deploy that on toe a remote server. 5. Installing Firebase tools: In order for deploying our application, we will make use off fire base from Google Fireworks, Probert's hosting service, which allows us to expose our web application using hits https, which is a secure socket layer. Now, this is important from our PW a point off you. So to install the same, you have tow issue the command NPM install dash G because it's gonna be a command. So we're going to say firebase tach tools on windows. This command will do but leaners and McQuay's request the pseudo So when I pressed Enter ask for the password. I'm gonna enter the password. And now this is gonna install the five best tools globally so I can issue the command from anywhere I want. Once the five best tools is installed, you will be able to lock onto your fire based console, La goat kid. New projects deploy your current projects on toe you're hosting service Are if you have any data basis over there, you will be able tow, connect, initialize. A lot of things you can do with this at this time, we're only going to install the fireplace tools on one's. Our application is ready for deployment we will initialize the fire based on deploy our angular application on the firebase. This has finished the installation off Firebase tools Washington $7.11 0. And to check for the you can always type your fire based dusters felt to get additional help on the fireplace command itself. 6. Installing VS Code: Richard Studio Court is one of the most popular i. D. E R text editors for developing applications, especially for Web applications. So to download the same goto cold dark visual studio dot com based on your operating system , it has already chosen the appropriate build. Click on the big blue button here to download the same. Once the download is complete, you should be able tow install the same thing. So let me keep it on my downloads. So as you can see that it zip, find that we have got it. So I'm gonna unzip the same thing. In my case, it's an application itself. I just have to double click the same to run the visual studio core. Now. The good thing about this software is that it's like an evergreen application, which means that if there is a new abortion, it gets automatically updated to your existing visual studio. You don't have to actually remove the existing Washington Dendreon stop on McElroy's regionally. Keep this in the application's folder. I'm gonna drag this and drop it onto the application's folder on, but that actually installs. I already have an older Russian. I remove that Andi replace the current question. So now I have visuals to the record. Let me open the same on this is how it's gonna show when it opens. 7. Creating an account with omdbapi: using angular reader front and applications, which run on browsers or mobile devices on the data for the same comes from another server using an application typically called at the rest full service. Since we're not interested in creating our own rest full service using technologies like Job or or Norges our fighter, we're trying to make yourself already existing Rest Full Web services are also known as a P s. To make application interesting, we will get the movie details from a Web site called Toy Mdb a ph dot com. This property has something called rest ful end points like this. It's typical on www dot William d. B. A. Peter Con slash a be a key equals toe your a p a ki, followed by an ampersand symbol and then followed by perimeters such as I, which corresponds to on IMDb. I. D. T, for example, is for the title on. Likewise, we have some search options and so on and so forth. To get your own a be a key. You go to the a p a ki button. Over here you can register for free. Which follows is toe hit 1000 requests. I'll give my email here. Let's, for example, loaning at we know dot co name. We know. Come on, use Let's for learning I click on submit and now I should be able to see that A verification link toe Activate your key Waas Cento Learning at winner dot co So I should be able to open my email and you can see I have the oil mdb ap a link your so I got my key D to double to 39 f or you can use the same idea as this is only going to be used for learning purpose are alternately you register by giving your humility and you get your own AP a key. You can also see that we have to click this link toe, activate our key. Otherwise you will not be able to access. I guess so. Let's click on the same toe activity. It says that your key is no activated 8. New Angular application: to create a new angular application. First letters decide. Where do we keep our application? So I'm gonna create on desktop First, let's open a command prompt or terminal on Mac OS and Leaners City into our desktop and then issue the command N G new, followed by name off your project. The name of the project must be given in lower case letters, and if you have multiple words, you can separate them using hyphen instead of space. Or underscore some real type as movie browser press ender. And this is going toe ask you a few questions. It says. Would you like to add angular routing? Angular roading helps us clear single page applications, which means you have a single index truck HTML and then the content off the page change dynamically based on the Ural part. If you want to use routing, you can say no here and then at the voting features later. But if you say it s here, which we will do, angular adds the necessary court for us. So let's keep it as yes, press enter. Then you have few options for your CSS. Do you want to use the Rossi S is are We want to use other villians off CSS such as a CS is our SAS less stylus incident. I would like to keep it as CSS itself. We will be using bootstrap, which is one of the most popular CSS framework from to return. This creates a lot of fines, as you can see and then installs all the Norges dependencies on windows. This Mitic a lot of time. So have patients Until this is finished on Mac Hoyas, I've seen that this works much faster. Even then, it is taking a lot of time. Once this is complete, we will walk through. What is the actual court generated? Finally, after a couple of minutes, it has successfully initialized. You know, if you just do it de around windows or ls minus l on Lenox platform, you can see that you have the movie browser application. I can see the into that And then if you see what are the fighters that are there? There are some folders nor models is the folder that contains all your angular library dependencies. This is the one that took a lot of time for installation. Arrested them are some source scores one of the most important file as we go and check it out is the packaged or Jason, which consist off on the day as a less The production dependence is, and the most important one here is the angular door Jason, which is a configuration for for your angular application. We can run our application by typing N G, served on an optional dash, or will open the browser after the application is ready. So let's give it a try again for the first years. This may take a lot of time, especially on Windows, and in my case I made chrome as the before browser. So you should open Crume in a second. You'll see that it opens local host for two double zero, which is a local application being sold on the port for two, double zero. And it has some content over here, which is a vile appellate court which will get enough that soon. Let's open our application using visual studio cord. So I'm gonna take on the Visual studio court icon over here, and it is open folder so we can open our folder as a workspace. So I click on this, go to my desktop over here and then select the movie brother older that contains all of my application. I click on open Let's have a first looking toe packaged or J son and see what exactly it contains. So the package Georgeson contains your application just in case. If you're trying to publish this on NPM repository, this is the name that's going to be given to the C. Also, the devotion with 000 There are a couple of scripts here which can be run using something called N B M Start or NPM test. And for the rest of them, you might have to say NPM run, build NPM Run Lind In PM Ron E. Two e. R. You can use the command N G for a lot of things. For example, I can say Engy so n g build r N g test because we have access to the global commander, Col. N. G. We should be able to do all these things Anyways. There are some dependencies, as you can see, that there are basic dependence is this is the one that contains our basic requirement. If you want to work with forms, you have that. If you want to work with a routing, you have that over here. A few more original stuff hasn't when we require will come back and have a look into the same. A lot of depth dependencies such as, for example, all the testing Fremont's are required only during development, not getting production. So that's all they'll let's have a look at quickly on angular Georgeson as well. Now angular Jason is the one that is used by the Command N G. Whenever you're doing whether Engy, Selim or N G build Exeter, the name of the project is called movie browser. So that's what is the name over here. The movie browser application can have different architectures. For example, for building, there is one architecture for running their different architectures. So if I come down here and collapse this over here, you can see that the build there is. So there is extract I 18 n that for internationalisation. There is one called the test. There's one called Lind on one for E. Two e. So these are all the different configurations that are defined in angular that Jason. So when you're on N G. So this is a configuration that will be used on. If you expand the same, you'll see that it's actually going to use an option called US movie browser Colon build. That means it depends on the bill configuration with little bit of aliens over here. So if I explained the build configuration, you'll see that there are options that can be configured on these adoption that are very important, that we will have a look into that now. Number one is what is the home page off your applications, it says. SRC slash index or HTML. So if I happen toe, look at the SRC. There is an index or HTML, and you'll see that the index html consist off very basic structure. Html Ahead section A body, a body with an unknown HTML tag. But this is very well known toe angular as a component. We will discuss a lot of things about components as we go forward. But this is the H demon that is sold to the closer when you run the application. So which means if I go back to the chrome Onda right, click somewhere here and then say view paid source, the actual HTML you see here is the result off different TML. However, you can see that the body contains only one tag here called uproot slash Uproot. But here again see lot off other court is also included inside the body. Not this is what is happening during the wrong time when you do an N G. So it took this HTML file and added a lot of content. So the content comes from here. You can see that there is an entry year called me. It says that the SRC slash main dot ts so the SRC slash main tortillas is the entry point for our application. So all the condemned off main dirty years will be converted in tow. Main door Js. And that's what actually, we're going to see somewhere here there is a script whose SRC is main door chase. Apart from that, you can also see some of the other things like Polly Field are just. This is the one that actually used when you're using Internet Explorer or an older brother , which doesn't support the modern JavaScript that also as tile start Js noticed that the styles have been injected as a job loss could court over here. But when you do a production bill, this will be extracted into see assess and will be added over here in the index html itself . You also see some fights like rendered or genius. And then there is a runtime door chase. Now the runtime Georges and Window Dodges consists off angular compiler over here. Now, since we're running a development Web server, angular sits on your browser on interprets lots off court. But during production, the angular compel it is no longer required. This will be combined in tow. A single file cauldron timeto chase So at the wrong time, this is a file that manages your application, which is going to be in the main dark chase for itself. So let's go to see what is there in the main dot de eso. If I goto main dirty years under SRC over here, it simply does. Wanting here, which is called Boots top model. If I want to explain in simple English platform, Rosa Dynamic is an object that represents angular can say and toe angular were suggesting that here you have to do a bootstrapping off the model car after module. Now that model is a court that is coming from the current folder slash act slash abduct module. Whenever you see something like that, you can assume either dot es or dot Js. So right now, if you look out at the act folder year, if I expand, you see that there is an AB model ts now in the at model ts, you see one app model class has been created without any content. You see something called as a decorator engine model. So this is equal and off annotations in Java or attributes in C shop, which gives him metta later for this particular class. So basically what's happening is that from the main door tears, this particular model, the APP model, is being bootstrapped. That means angular is going toe look into the model and sees any meta data information given toe model and acts accordingly. So if I go to the APP model over here by control, click on that. The APP model is a empty plants, but it has got a lot of metadata. The metal leader engine module defines what score as a logical module often application so you can create a number of models. But this is gonna be the starting model, and this model may import other models. For example, you can see that there is something called browser module, a protein modules, etcetera. So if you want to add more models, for example, if I want to work with HTML forms, I might have to come and say You're forms model on so on and so forth. So you are additional model so that the content off that model becomes part of your application will come back to this section later. But for now, let's focus on the bootstrap because we want to see when the application is started. What is happening, So to come back again when your application starts. This is the first line of execution, so the execution says they're angular. Bootstrap, this model card at model on the APP model has a component, which is the visual your element often application. So it says that find this component and do a bootstrapping. So if I go to the APP component over here, which is a type stood classified here, which is called at component Importantly, it has a decorator called at Component, which provides metadata for this particular class. On one of the things that you can see here is called selector, which is ab dash route. And the abduction route is the one that is used in index HTML. So what angular is doing is so remember our main door, Jace will be injected over here. We saw that right here. Does that mean Doctor? Yes. So when the browser starts interpreting each off these lines, the last line that it encounters is running a script here which is commend are just on in the main Dodgers. What actually happens is that it is tryingto load a model called APP model. On in the at, Mordovia mentioned that the bootstrap component is at component and in the APP component, we said that the selector, meaning a tactical uproot, should be replaced with content off the HTML and apply the associated CSS. So the after component, or HTML which is right here contains lots of HTML course over here, which is what actually you see in this particular place. So if I just go here to this html select all get rid of everything and then at your h one on gets a hello world, save it. And if I come back to the browser Now you can see that it is a lower because now the APA route, the tag uproot is now going to be containing the HTM and that I have given. So if I go and do an inspect element here, limit a strike on this pitch and then say inspect, you should see that the apa root slash uproot that's over here body If I see uproot slash Uproot. If I expand that, you can see my hitch one with content. Hello. So basically all we did is that we said find the tag a put on inside that include the content of this HTML So let me recap everything again So I'm gonna go toe my angular dot Jason file where we say that the entry file for this application is an index html on the index html should be included with the content off Main Dark Dia's and the main Dirty Ears has a bootstrap instruction saying that we had to bootstrap a model called at Marty on the APP model says that there is a component called at component which has to be bootstrapped on the app component say's that wherever uproot element are html element called a protease found its content must be replaced with a content off at component HTML on up competent, each demon is now containing only Hitch one. Hello word. One other thing that you can also see here is that if I goto at component and I'll say hash , uproot and save my file now, in fact, I've done the file auto sale options. So every time I type something, it is automatically saved. So I've changes toe uproot. And if I go back to the browser, you'd see that my actual content is empty, primarily because angular is now looking for an element whose idea is uproot in the index html. And since it is not finding any element with idea off uproot, so it is actually not doing any injection off the court. So the absolute slash absolute is not handled by angular and neither by the browser, so it is being discarded. But if I go back to the HTML on instead off this, I can type your deal hash at route like this. And if I pressed, enter results to the court is going toe create a do with an idea off uproot like this on that we should see my html core comes back because now we are actually telling in the app component ts that whenever there is an element whose ideas uproot replace that with this content So you can play around with this For example, if you put it, don't it means that find an element who see ASUs class name is uproot which is currently not present So I don't see anything over here. But if I go back to the index html and then come in this one and type your dot uproot So we escort is going to give me a deal with a class off uproot like this says the fight I go back and you can see now Hello world embedded into the deal with a class off uproots inside that we will see our hedge one over here 9. Home component: the way the fundamental building block off any angular application is a component. For example, if I go back to my court under SRC, we have app on Under AB. You can see that there are four finds called APP component CSS at component HTML at Component Spec on at Component TS file here. So these four friends together make up a component. But essentially the class that we have created here called AB component, is the actual component. A class with a decorator off at component becomes a component. A component must have something like a selector. When you're working with routing, you will see that this becomes optional. But at this time, this is mandatory for us. You can simply given name like app. That's route. Are they canoe? Some other selectors like Hash, which represents an I. D. Oregon is a dot which corresponds to your CSS class name. You can use parent child relationships and so on and so forth. But what I would do is I would like to simply keep this back toe uproot as well as in the index HTML. I would like toa enable the tag uproot instead off the other two that we had earlier. So in the index html when uproot element is found the content off that it's gonna be a substitute. Er, with this HTML, which is denoted here with template you are but alternately you can also use an in line template. For example, I can remove this and then put something else here, which is actually html content. Say, for example, I can say each one. I say hello, angular slash H one. And now you should see that internal Hello world. I should see a hello angular because now the actual template, the text itself is gonna come over here most of the time. We don't use this because eventually this is going to be a lots off HTM in court, which is very difficult to write in single courts or even in the template strings itself. So we're gonna put a template, Ural, and then associate the You are, which is current folder slash ap dot component dot html. If you want to create our own component, we also have to create these four files generally. But instead of recreating them manually, our Engy tool provides a command for generating all these components. So Let's go to the command. Prompt on if you want. You can stop this terrible running are you can open a new tab or new command from window, and then you can issue the commands from your project for them. So what Under there, Keep this running as it is on. Then I'll goto shell a new tab. So when the new tab is open, I'm currently on my work directory. As you can see, it is in the movie browser directory. Make sure that you are always in the work directory Onda. Then you take N g generate are you can simply that G and then followed by component are you can say See so little you can say N g generate component like this Oregon State N g G C on Then type the name of the component that you are interested in creating. Now it's a general practice that you organise your components in a separate folder, compared toa other things like Syriza's our director, which then go into different folders. So I'm gonna go create a folder called Components Slash on the name of the component that we're industry to create. Now I want to create a home page component. So I'm simply going to say at home. So there is a new folder called Component Under App On inside that there'll be a folder called Home On Inspector. There'll be four files generated, called home that component or tears home that component out. Specter tears, and there is an HTML and CSS file associated with the same thing. So when I pressed Enter, that's what you're going to see. In addition, it also is gonna update a file called APP model TS that this is very much essential. That's going Have a look in tow the change that has done in the app dot model Dirty s first . So let's go back to all cord on. If you want to open a file in the escort vehicle type control P on Windows Command key on Mac ways, so that will give you a dialog box. Very concerned for fights, you can simply type up module. We can see that I'm typing partial letters and wherever it is matched, it is getting me that act. Modernity is, is what I'm interested in. If I press enter, you can see that model has been open as well in the module N G model decorator. We have a section called Declarations On In this section. We will see our home component that has been created. The home company come from slash components slash home slash home component Dark TIAs on that is included in the Declaration section. What we're doing basically here is to say that this component is part of this model. So it's a logical grouping off on the components that are required in case if it is not part off this than your AB component cannot make use off home component. So now that it is part, let's get it off that from here on, let's go and see what is there in ab component. And then there is a home as a sub folder. Under that, we have this home component es As you can see, it is an empty class here. There's nothing here simply says select terrorist Abd Ash home Now. One thing that you can also see is that default prefix for your selector has come with AP. However, in the angular dot Jason, we can confident that as well. So if you go to the angular Jason, you should be able to see somewhere that the prefix happens to be ab because of which you are ABX dash route. If you go to the home component now, you should see that there is an app dash home. Ultimately, when we issued this command here, we could have given a different perfect also, by using dash dash prefix equals toe something else, for example, for my application being a movie browser, I may use em be as perfect. However, we will keep the prefix us app itself but angular style guide suggest that you should use some kind of prefix to differentiate between your tags as a less It's demon attacks the content off AB Dash Home is gonna be replaced with home dot component of HTML with simply safe here. Whole works, but on my browser, I don't see that. And that's because we have never used this particular element. Our time now we can't use this in the index html because if I have to use that in the index html, then in the app modernity is we have to save bootstrapped the home component instead of at component. Now an angular application typically is a three off component which means there is gonna be one a root element like uproot. And that contains a couple of others. Like, for example, a header, a cyber, a foot or ah, home component on the home component may contain sub component and so on and so forth. So to understand the same, let's go back to our app component html and right below this, I'm gonna type your ab home like a tag on. Now, when I go back here, you should see that at home will now be replaced with its corresponding HTML. So this is how we can say a route condense at home now at home can for their content, other components. As we go forward, we will be creating more components and, well, basically create a at three of components over here in order to make our application look better on beautiful. Let's use a CSS framework are bootstrap and the boot steps official home page is called Get pushed up that calm where you should be able tow, read a lot of documentations and help, and so on and so forth. If you want, you can download this onto your local machine using either a zip file. Or you can refer to them directly, using something called Syrian that are quite a few options for you to work with. Like using NPM. You can do an NPM install. If there is in young, you have yon on bootstrap. But if you want a nicer Bush top team, then we visit a website called Boots. Watch dot com While you see her, it's nothing but have free teams for bootstrap on the Washington Four is going to be used over here. And if you scroll down, you should see a lot off ninth team options. We can choose whatever that looks nice for us, so you want a lighter one, a doctor, one and so on and so forth. For example, let's say I want to use this one. You can click on the download button to download. The essential files are you can click on the drop down over here to see what file you want . If you're using CSS, fine. Probably you can use this boots watched or CSS, but I'm using a CSS now. I'm not interested in debugging this year, says so I don't need this bootstrap dot CSS, but I can be happy with bootstrap dharmindo CSS I'm indirectly this link here and then say copy, link address. That's gonna be the actual location off this file. Now I come back to my application now that a couple of ways I can include this into my application Number one. If I have downloaded that, typically we would keep them in the Assets folder and then in the angular Jason. If you go on happen, toe, look at here. There's a set off a sex that you can mention styles you can mention over here. Like Yes, I can probably give a part from my project folder or related toe. Angular. Jason, the location off the CSS file. Since I'm copping a you are, I would not be able to copy and paste the urine over here because this is supposed to be a physical file related to your project. Likewise, you can copy some scripts if you want, but I'm only interested in the CSS on as you can see that there is already a style start. CS is under SRC that is being used. So which is right? Should be here on. I can now include here by using after it import. Ah, you are off and then paste that you are. And make sure that put a semicolon over here and now I have access toe the CSS from Bush watch. So if I go back to my act, component HTML and make something like H one class equals toe alert alert Dash in four. And if I come back to the browser and happened to look at this moving closer, you can see now the background for grown colors off all our elements have changed on. That's because of the bootstrap that we added Just now, let's go back here to make some necessary changes. Let's get off this on our here. One container as a class them from bootstrap. And let's include this at home inside the same thing. So whatever the at home content is there? No, it's going to be indented inside. You can see that there's a gap here on the left of the cap on the right side. If you want to check, you can just click on this at all here in the developer tool on, then move the mouse. You can see that there's a margin on the right and left because off container. Well, it's gone at some useful stuff on the whole component. For example, I want to display a picture of mine displaying that this app is developed by me, my contact details and so on and so forth. So let's go back over here. I'm also going to create a new folder under asset for images. So let's get a images border where all of our static images are going to be kept over here and I'm gonna copy and image from one off my pictures. So I'll goto my picture here. So there is a picture we know. Six Dodge a pig. Let me make it off this. I copied this and then come back over here. Images are right. Click and say, Probably based. I don't see a paste. It's disabled. So what I can do that can say here, revealing finder or revealing exploded in windows. When I click on this, it opens. I'm gonna pace the picture. And the picture is now inside this particular fight. So the picture is there, right here. So I want to make it off this in my home component. Let's go to the home component. Each human Andi make some changes over here. First, let's get rough. Whatever is there inside this and I want to have some image so I can say here I am G SRC equals toe slash a six slash images slash We know six dot jim pick. That's the name of the file on art. Should be an alternative text. I'm gonna die pure my name. We know from our fire. If you want, you can give some additional class names. For example, bootstrap provides a class called I am G Company so I can say classical toe AMG AMG company . So it's gonna give you a small white barter. Let's give some horizontal rule will also forward something like on application. We did the demo application so I can see her angular p w a demo application. I can provide something like developed by I can get my name. We know Kamar attire. If I want this to be surrounded with hyperlink, I can give here the anchor attack with, says https. We know that, Cole. That's what probably I might want to give. I can also give a link toe see my profile. Let's say that and then I face my name over day. Let me also give some basic copyright symbol. So 1% coffee semicolon that's going to give you a copyright symbol. Let's say I want to give a year. Let's in 19 2020 then I say all rights reserved by probably another hyperlink to go to my website and then the that should contain something like my company. So now that we have this very basic home component Letty have, it's gonna look like on. It's very, very big, as you can see. But I want this to be a smaller and center line and so on and so forth. But if you want that one way to do is we can create basically three columns and keep this in the center column. Now let's go on do the same thing. I'm gonna cut everything from here right now, and I take your dot role, which is going to create a a logical roll off elements that can contain three columns. And if you wanted that columns to be off equal size, you can simply say dark call. But I want this to be more responsive, meaning on a mobile, the ways I want this column say, is to be a little bit different than the column size for a laptop screen. So Butcher provides us four types of devices. Extra small corresponds to mobile devices like mobile phones. You also have sm for small devices, which is like tablets, for example, at an iPad. Then you have empty for your laptop screens. If you have a very high resolution, big screens or projectors, you also have something called LG. So what I want to say is that I want for a medium device like, for example, laptop screens. I want this to have four out off 12 grades, so bootstrap has a concept off groups here. One Drew consist off 12 groups, and I say that this column occupies four groups, so you can think off that your screen is divided into oh! Column one off for Greg's column to off orbits Colin. Three or four grades so maximum off 12 grades are alert. Pargo. So I will say here into three. So that means I want three such columns safe. A press enter RIA scored automatically create a deal consisting off three deals on that This is the first column, which I'm not gonna contain anything inside that there's the 2nd 1 Then there's 1/3 1 So I'm gonna explained the 2nd 1 and based everything that I copied earlier in orderto former this court. You can use our shift f on there, actually nicely. Former it your It's demon another. The court is relief. Go back and have a look at that. You can see that the column number one here is four grades. Column number two is four blades column Number three is for kids, and that's how the entire application has been created now. But if I'm going toe select a different device, you will see that automatically it changes its sites. For example, if I select this device toolbar and say that I wanted this on a phone like, say, iPhone 67 or eight against, it is how it's gonna look like, because this is not an extra small device on on extracts. Wonder is a column automatically become Strela greats. So which means this is as good as they call excess 12 as the less called essential. So if you don't mention that, it's gonna be like this and because it is a 12 grid here. This is a dummy column, and it doesn't contain anything you can think off. This is a day with zero pixel height, which is exactly here on the top, on the bottom. There, this again, one on this is again another 12. So this is what makes it as responsive. If I tell you this, you can see that there is a gap. Probably you can see on that gap is because of the padding within this particular color. But if I select a different do is like, for example, iPad, you should not see that this is a four on under for another four. Of course, if I tilt it, you should still C four plus four plus work. In any case, let's switch back toe iPhone. So we want to target two devices here on mobile phone on the desktop screens. 10. Header component: Let's create one more component, which is going to be a header competent. So what we want is on the top here we want a header that displace our application name that is movie browser, followed by an HTML text box, which allows us to search for any movies that we want, so to do so let's go back to the command. Prompt AMR issue a command here called n g g c g for gender, etc. For component component slash header And it's going to create a new folder called Header Under Components, which is under app with four files in it, a CSS and HTML. A test spec file on another component class file. So let's go create the same thing. This also update our at model ts. Let's go and have a look it What is the change in the act model ts first. So if I go to the app model ts, you will see that in the Declaration section. It has added the header component and the head of component of DS is just an empty classify here and it has a selector called app Header on. That represents a header html over here so I can go to my ab component hte Yemen And somewhere in the beginning I can on your app dash trader slash ab slash header on That's gonna bring the header on top off your home component. Let's go to the HTML off the same. So I'm gonna go and say Header html and you can see that I'm typing partial characters and it's actually getting the same thing. Let's get off this. Let's say we want a blue collar background for this. We can make us off something called alert Alert Dash in fourth if you want other colors apart from in four, you have success. You have primary secondary warning on danger. Soto give different colors. You can experiment the same thing. So I'm gonna leave this as in for that. Contains another day with a class off container. Let's press enter and see what happens. So we have a deal with a container. And as you have seen in the past, containers simply adds a margin on the left and right side off. Your do so insert this I'm gonna have on a location off something like, for example, let's in my team start from here from here till yer I want toe limit myself for the header on right next to this. I want the textbook, So probably be know that this is already agreed for here on the remaining eight. I can leave that for the text box. So to do so let's go back here and i dot rope greater than dot call. I can say e m d four and then I can add one more plus dot com dash MD dash eight. So that's gonna be a parent rodeo consisting off to child deals safe a press enter. You can see that it's gonna come like that. And the 1st 1 I'm simply going to have here just like a history. Probably. I can have one hedge to whatever I want and then take your movie, Rosa. Later, we will also add a local answer off a text. But at this time, I think this is OK. And then this is where I want to have an HTML form consisting off and it put off by text. Nothing else. You can also say that the class name your is gonna be form control. So the class name form control comes from both struck on that actually makes this text box nice looking textbooks. So I'm gonna press enter. We have a form. Action is not required, will come back and work with a form later. But for now, we simply add a form. We have an import type physical to text. Name is letter, for example. I call it us. Say quality tone idea is not really required because we're not using any Jake worry or anything like that. So I don't need the I D classes. Fine will also add a couple of things Like, for example, I want this to bring the cursor automatically so I can see your auto focus equals toe auto . Focus are you can just leave it as it is because it's a pseudo attribute. One more thing will also probably is there a place holder when they such movies, Probably by title or something like that. Let's go back and see has how this application looks like. Now let's go toe here and you can see that we have a movie browser title. This is gonna be our link to home page. Eventually there's a search movies I should be able tow type in the text that I was looking for and then press enter and we should work on chroma compressed after all macro issues. As you can press option command I to go to the developer concern on here we have the toggle device tool, but if I kick on that, it's going to switch toe iPhone on iPhone or mobile device. This it's gonna look like some movie brother on. You can see that there is a search movies textbooks where I should be able tow type something. Press enter on. We want the movie to be destroyed over here. 11. MovieList component Part 1: know that we have this header which can accept a text here on then, when people enter, what we want is we want this particular place to be displayed with all the movies that match that quiet. Um, for example, if you take the world spider and press enter, we want the list off movies that have the world spider in their title. Such a Spider Man. Obviously, we want to create a new component over here on the Let's call this as a movie list component. So let's go back toe the line front Onda. Not that I'm in the work directory. That's the project director here. And I let it like you're NGC for generate component and then components is the forger. Wait, I want this new component on the name of the component I'm gonna give is movie dash list. So this is going to create a typescript class called more realist component onda associated four for it to be day and it also updates the at model ts. Let's go back to our cord and see what happened. Let me close all the open text fights now under components. Now you see that there is a header folder. There's a home folder. There is a movie this border. The movie is folder contains a class, and we did not use any of the classes so far. So this time we're gonna create some valuables here so that those variables can be used in the HTML also. Currently, our APP component extreme El is displaying the at home so temporarily just to see the results. Let's commit this out and then type your APP movie list so that we are actually going to see the movie list component over here Now the link between the header component and the moralists component we will establish a bit later because that involves passing the text value from here to a different component. Also, I want to see a different Europe here. So let's go back to your cord and make the necessary changes in the HTML corresponding toe this particular movie list. So the movie list should display the details off the movies on. I should have some movie object in angular. The component class may define a valuable here with some values on the HTML can access the same thing. So, technically speaking, this acts like the controller off the component and this actually the view off the component. For example, if I go back to the tears and declare a variable here called say, type two off some string day and then I can assign this toe movie list here on and I can access this title in the HTML using what is called interpolation operator are simply called handlebars. So I go to the HTML and then get it off. This type probably hitched three. And inside the history, I use a double curly bracket and use the valuable title. So this class defines the variable. We call it a model. Data on this HTML, which is a view, can access the modern later in this fashion. Say, if I go back over here now, you can see it is moving list here. We don't want this title, but instead we want the list off movie. So what we're gonna do is we're gonna define a variable called movies off an array type. And if I don't know the did it, I I can simply say any on then declare on Alec. So we have declared the variable called movies, but it is still undefined. So I may not be able to use them. So to initialize this movies, I can use the constructor because the angular clears an instance off this class. During that time, I can initialize this particular movies Variable, all angular, has a lifecycle function called in G on in it. This minute angular has not only instance hated the class, but it also has made. This is a component now and the component has been loaded onto the U. E. Now we can initialize this over here. Technically speaking, the value off those movies should be dynamically initialized based on the value we have entered in the search box over here so that we will do a bit later. But for the time being, let's say we can initialize the movies valuable using a dummy. So I can say, here this stop movies, all the member variables and member methods you can only access using the Discover equals two. I'm gonna copy and paste a bunch off values over here. So, for example, if you look at this, this is an array off three objects. Each object has a property con title. Your poster with some values over here. Andi know What I want to do is I want toe access this movies in my HTML. So what? I can do it. I can go back over here on Let's get off this temporarily. I can print the title off the movie. For example. It's I want access. The first movie I can see Your traitor is nothing but incoming record. I can say movies off zero because movies is they are a were accessing the first element dot title like this. Make sure that the property names are spelled in appropriate cases like uppercase lowercase combination. I have t capital or here, so I have to use the same thing so likewise I can also use something like you colon movies off zero Don't. If I want toe actually display the image I can type your I am G a class off I m g and then I m g tamponade via score is going to give me an image with SRC equals to all vehicles to Exeter. What I can do is I can use a calibrated just like the same thing over here that also will work. For example, if a copy this one thing and then paste or inside this double course and then type your poster. They should display the actual image as well. I'm gonna copy this title and then put that for art. Andi, I should be able to see the first movie details like this so you can see that I got the title. I got the year I got the poster as well. However, using this double curly brackets inside attributes looks ugly on dancer. Sometimes it's very difficult to understand what we have returned over here. Soto solve this problem. I can just assign the actual JavaScript expression like this. But then to tell angular that this is an expression and another string, you have to use a square bracket over here. So all we're doing here is that we say that the value assigned toe SRC attribute is not a string, but a job was kept expression. And this JavaScript expression happens to be a radar property. Likewise, I can do the same thing for aren't so This is the alternate text in gives it. The movie image is not available at this point in time, so it's gonna be the ultimate text that's gonna be dispute over here. So Now that I have got like this, I can go back. You can still see. The result is the same thing so I can go here and change all the zeros toe once like this on day. Now if a come back here, you should see now the second movie object. But what we also want to do is we want to access on these movies from this particular list because this can be an array off three right now, but it can be an array of 10 later, so we want to dynamically loop through this. For this, we have another option where we can get a variable called Let's Say I Am where m represents a single movie now in orderto loop through and get each off this objects, I'll go to the beginning. I can just put do here on day, then say that this deal should repeat for the actual movies, collection or movies addict and for that angular provide something called the Directive. Ah, Director is something that can be used on any elements that you have like an HTML element, for example, Right now I am using the deal element, but I can actually use this on a u l L I or any other element that each demon supports. So I can simply go here and then say your star n G four equals two, and then I will type an expression that loops through the collection. So the expression goes something like this Let em off movies. So what we're doing here is we're creating a new variable called em. But that is made out off this movie's collection. So M takes a single element first time. So it is going in a sequence. So it takes the first movie, and then I can push this court inside that. So I'm gonna cut this and based over here and now you can see that using this 1st 2 movie were actually processing the whole thing and then go back this, then take the second movie, were displaying the second movie. Then we go back. It takes the third movie, and then we're displaying the third movie, Andi, continuously. It repeats until all the movies has been processed. Right now, I only have three of them safe. Go back over here. I see the 1st 1 over here. 2nd 1 on the 3rd 1 over here. So if you have a collection off movies and this is how you will be able tow display the same thing, how are in orderto make this look nice? Let's use something called a card layout So I can say that this deal happens to be a car so I can say plastic goes to card and a card has something called as a car body. So let's start on all these three in the car bodies. I'm gonna take your card dashed body and push this down somewhere here so that our car body contains all the three elements on inside off title like this, I can change this toe a h five with a class off something called card title. We don't want to say that this is tighter. People will understand this anyways, so this is supposed to be a slash h five. We have the year. I don't have to tell that this is any other. People will realize that it's in here and I haven't. I am. GSR sees nothing but the poster. There's an alternate text class equals toe. We have something called Come Nail, but instead I can use a card specific class name called Card. I am G Top. So we have this card already right now. So if I go back to the browser, you should know, See that there is a card. The car occupies the complete with available, but what I can do is I can actually make all off them flow in a single rope. So if you remember, we have a row column concept in booster. We can say that there is a row that can contain a maximum off three cells so that each SL occupies a grid off four because four into three wastrel onda Rosales eastward. So what I can do is now I can surround the whole thing now with something like role with something called dot call MD. Four. So in a medium device that has laptop screens, it's going to be a three cell or three column layout. But in a small device. I can also say that in a small device, it should only show two cards instead off three of them, so that each column occupies six grapes. I can also be more specific and said dot call excess 12 But if you don't mention in an extra small device. It's always going to be 12 but nonetheless that give this 12 press enter. Now we can see that I have one role here with any number of columns in it and each of these columns, I can just cut this and place that inside. You can see that we can convert these two teams into a same because this still doesn't have anything other than a car. So I'll have to do is tow at this particular class name toe this itself car space, all the column land and this do on the corresponding closing do I don't need this anymore. That's also former the theme. Go back to the Broza, another agency. We have something like this where each of the movies are displayed like this one last thing we will also do is probably we can surround this section the car body using a different color, for example, I can say here dot alert dot alert family s so it's gonna give it a nice little background for the same. So if I go back here now, you should see that there is a different color on together. You can also check it out different color schemes. For example, instead of primary, I can take say, for example, in four, and that's gonna bring the same color as the header like this are. You can change toe say success, warming danger to check it out in different colors. For example, let's say when I use this primary and if I don't like this color combination, I can even change to a different boots. Watch link so I can go toe boots. Watch dot com scrawled on toe a different team. I can see that the primary actually came orange because off this color combination is the one that I have chosen. If you want a different one, for example, let's say I want to take up. Say this darkly. I can select this right click on this bootstrap men dot CSS Copy the Link address. Come back to our style daughter CSS. So I go toe style start CSS changed this Europe from the current one superhero to the one which is darkly. If I come back over here now, you can see that it's totally a different one. I would like you to try out different teaming options using boats, watch 12. Routing and Single Page Application: way have two components home component on the movie list component, but at this point in time, it is only showing the movie list component. However, what we want is when we visit the default your local host for two double zero. We want the home component to be present. But if I type your slash movies and then press enter, of course we may have to search for a particular movie by typing question. Mark something like quieting dumb equal stools. A item. When I press enter, I want this movie's listed to be displayed. So basically what we want is we want a route part here, the Ural part toe identify what component to be displayed. Now. This is what we call it as routing are voting model in angular. So if I go back to the core and have a look at the AP module docked es, you see that there is something called imports and importing. One module here, called AB routing model and the uploading model is not actually a building model like the brother modular engine model, but it's a model that has been defined in our project itself. Now this automatically came up because in the beginning, when we cleared it a new project, there were a couple of questions asked. We said yes when it asked about Do you want a routing? So we go to the APP routing module which have opened over here. You can see her. It defines an array off what we call as the route. Well, each urine pot will be mapped to an appropriate component, and we're just exporting that particular uploading model So we can import over here and then specify that this is going to be part off your model. And all we have to do is tow. Define a bunch off route configurations. So I have toe expand this opening curly bracket to represent a single route, for example, when there is let a slash home. So we want to go to the home component. I can tell you're when the path is home. We want the compliment to mount is the form component like this. Similarly, I can always stay here that if the part is called movies, we want to go to a component called movie list component. So now if I go back to the Roeser changed the urine from the default to slash home. And if a press enter, you see that nothing happens now primarily because in the ab component, HTML were always displaying this movie list component. If I go back to the APP component HTML, you'll see that we have commended this out, and then we have added this one. So instead, whatever this location is that we want this toe dynamically display a component for this. We make it off a directive called as a out of Oakland, and the way you do that is by using a tag name called Rotor Dash Routledge on slash rotor out lit. Now, if I go back over here, you can see slash home displays this. And if it changes toe slash movies, you should know, See that there is a movie list. However, we don't want this to be tied to manually. What we want is when I click on this, it should be the home page, whereas when I type something over here and press enter, this should change to the movies component. Also, we want to pass on the texture that you're ender so that this movie list can be dynamically generated. But for now, Let's go back to our application here. Goto our header component, which is right here. And this is the HTML. We have this hits three over here. We wanted hits three to look like a hyperlink so that when I click on there that should take me toe that home component. To do that, you have to add a directive called Router Link, so that's what we'll be doing. We use a square bracket about a link on, then equals toe in double quotes. We take something, and if you remember, we used the square bracket toe indicate what they were that were given in the double ports . Here is a expression and not a string, and this expression is an array. So we need to supply an IRA here, and our consisting off either strings are numbers a combination off values that can make up a route part. For example, I have to say here slash form. Since I have only one I can view like this. If I have a couple of other parts, I can put a comma here and then give, for example, if a serious slash home slash a slash be like this, for example, this will be evaluated as slash home slash k slash week for no. We just want to goto this because whenever we click on this particular route, part angular is going to go into the voting model and checks. Do we have a match for this particular part? The answer is yes. And it would take me toe that particular component. How about movies when we enter something in the text box and when we press enter, we want to take it toe the movies component. We'll do that in a minute. But if I go back over here now and if I click on this movie browser, you should see that it takes me to the home component. One more thing that we want to do is tow. Make sure that this movie brother is something that is clickable like you there should know that it's something that you can click. So we want a pointer over here. We can add a CSS for the same thing. We go to the header component. HTML. This is the hit three. There is no class name associated over here. We can add our own class like class equals toe, say, for example at clickable, we generally added custom perfect like this so that we can differentiate between the CSS class is coming from booster on our own seizes classes. Since we don't have the CSS class, what we can do is we can create one such class under the CSS corresponding to this component. We started that dot and this is the name all I'm gonna do is to type cursor colon pointed. And this way you have now created a class name that is applicable only for this component. So let's go back to the browser and see. And you can see that when I move the mouse here, it shows me a hyperlink with a pointer. Ultimately, if we want this particular class them to be accessible everywhere, we can cut this from here and then goto Stein, start CSS add an entry over here. So this class now is accessible toe Any component in our application. So if you go back, I should still see that there is a fingertip on the head on over here. Now let's come back to the section where when we press enter over here. So we want toe goto our neighbor get toe a different component to do so. Let's go to the heather component. Tears over here will lead a new function called submit Handler. That is, when you submit the form, we want to go to a different component. For this. We have to depend on a surgery exploded by angular rotor module called Rotor, so we can ask for the dependencies in the constructor. So I have to declare a variable called router or any other name is fine but off type called Router. And you can see that there is a suggestion by the escort saying that auto imports from angular router you can see that we caught it, since angular is the one that instance shoots this component, angular uses this constructor. It finds that we want a variable off this particular class. If it is already instance created, we simply get a reference to that. But if it is not insensitive at angular reliance tension rotor, if router class has a dependency on something else, if that is not available, angular will create the object and then positive. The router constructor and eventually angular, will take care of all the dependency management for us. So we simply say, Give me the router object but that rotor object we want to make yourself that over here. So whereas right now it acts like a local variable on. We have access to the only inside this to make this as a member, variable typescript has a unique way and easy way of doing it. You simply declare this as private, protected or public. Now, this wrote, a reliable becomes a member available not just a local variable, so I can come here and then I can say this start route are got and then makers off its functionalities. One of the function is called navigate and we need to supply the route part perimeters, for example. I want to go to the movies so I can see your slash movies. So this is how we will be able tow programmatically neighbor, get to a different component. So when we say this daughter don't never get toe slash movies, angular is now going to look into our app. Voting model and slash movies corresponds to movie list company, and this movie list component is going to be displayed under this router outlet. So this is how the sequence off events take place. However, we load the function right now called Submit handler. But we haven't used it anyway, So to use that, let's go back to the header component HTML We have the form here, so whenever you press enter on this textbooks, the enter form gets submitted and when the form get submitted, if you want to capture that event typically in an HTML, we would have said on submit Exeter. But in angular we can assign a function to the submit event by typing in round bracket with a submit if, as equal and dust on submit equals toe, execute this function on the function, we're gonna call this as submit handler and we can also supply the even object corresponding toe. The in this case, submit So with a dollar event, this is more like a keyword. So this represents that event object. Otherwise, the event object is not supplied to your function. Since I've passed and even object over here, I can come to my function and then received that as any valuable I want. Let's call it as MBT now, The reason why I'm supplying this particular event object is toe Cancel the default behavior off the event, which is the submitted went. Typically, when a form is submitted, it changes The Ural on then refreshes the whole closer so we don't want that to happen. So we simply say your DVD dot prevent default. And this actually insures that the form submission toe remorse, sir. Where? Except gets canceled. But it inserts the angular to change the component. So now that we have done this, let's go back over here. I'm right now in the home component, as you can see. But if I type anything over here, it doesn't matter what I'm typing. Even if I type spider because they're not supplying this fighter anyways. When I pressed Enter, you can see that we got the movies component right here. Off course. If I click on this and coming back to the home component pressing, enter over here. Changes to movies component. We also want to supply the world that I've typed over here as a quite distinct perimeter over here to do so. Let's go back over here. So the navigate function takes a second perimeter after and ari, which is an object that this is a contradiction object so extra para meters. One of them happens to be something called quiet problems which takes a name value pales on the name value pays here can be anything. Let me do que on. Then I supply something letter, for example. I type your spider just as an example. So if I go back over here Andi, let's go click on the home and then typing here anything that that Ireland doesn't matter what I'm typing here at this time when I pressed Enter, you can see on the top here that along with the movies as the part, we have a question mark because that's what's called quite a perimeters. Q equals two. Spider has come because we're supplying a name value paid off Q and Spider. However, one last thing that we want here is that this is not Spider always, And this is supposed to be what is entered in the text box. So we want toe get the value off the textbooks. Now, This is where we need one more step where we want to include the forms model because we want to work with forms so as and when I'm typing anything in this text wants, I want to access the value from here so the form handling can be done in two ways. There is something called template ruined forms. Andi. There is also something called reactive forms for this demo. Let's stick with something called template driven form. Let's go back to our APP model TS. We want to include here something called forms Modern. So I come here and then type forms Module not that were scored is not helping me out here. Toe automatically importance. So let's go back to the beginning. Some video. They import forms modern from at angular slash forms come back toe our component, which is the other component HTML. We now have toe I one directive. So by importing that particular module, we have access to a new directive here. And the only thing that I have to do here is to say something like scrip record. Remember, this means that whatever we are ascending it an expression we also the round record here to say that this is an event that even is on change event. So we take your in g modern equals toe some variable. This has to be a variable defined in the types of Plus, we don't have that yet. Someone take your something called quiet, just like the name over here. You can give any other name you want, but I given a death squad it dumb, but in the actual class we don't have the variable. Let's define that variable right here. So we say quite a dump is a string, but we haven't assigned any value. But as and when you start typing, quite it will automatically take up that value. And this is the variable. Now I want to supply when I type it. So I go here, I take your distort. Quiet, Tom. Now our application here is complete. When I go back over here, let's say I go to the home. I type your spider and press enter. You can see now it is Spider. But if I go back home, let's changes to say, for example, island man press enter. You can see now it's supplying whatever that expression that I gave Ireland man in a Ural in Cordage string format. So we're able to pass that no matter what I'm typing here. The actual movies are always hard coded here because in the movie list were only working with a hard core data. So the next thing that we want do is tow. Receive this particular movie title or whatever. The search string is there here in our movie, this component on get the actual later corresponding to the quality, um 13. Getting the list of movies based on search term: so we're able to supply the quiet, um, as a choir listing perimeter to the Ural part off our movie list. Component we know have to redo the same in the movie list component and then search for the movies by sending its TTP requests toe for him to be a ph dot com. While the same thing can be done in our movie list, component itself generally, it's not a good idea to do that over here, because if you do the business logic inside a component that is not reusable to put all our business logic in one common location, we create something called services. So to create a service, let's go back to the command front and taking a command N g G four Generate s for sarees And then we will provide a folder called Services Slash Movies. So it's gonna create a class called Movies service and a corresponding test case fight. So this time you can see that there is no update on the APP model dirty s. So let's go back to our core and see that we have something called services over here and there. The movie starts service 30 years and there is a class created which has been decorated with that injectable. Now the at indictable has got a provided in route. So this means that this is automatically become part of the route model, which is the only model that we have right now, just in case. If this is not present like this, then this service is not part of any more. Do Soto explicitly say that this particular services part of our app model we can go to the APP model tortillas. There is a section here called Providers, and we can say that movies service is part of this. However, let's go back to our service class. Andi undo the theme so that it is automatically added to the modern that it is part off. Here. I can rate the function that actually sent its duty very questo, imdb a. B A and get their 11 to data based on our quieter. So let's create a function called search movies, which takes a search term as a perimeter off string type on returns. What's called observable now observable is an object that represents a different execution , meaning the actual job happens later point in time. So This is one we have doing asynchronous and observable If from our ex chase. So I'm gonna say here returned It is observable. We get an auto situation here saying that after import from on its Js, that's okay. And observable is an object that eventually represents a some data type. So I'll say here that it is any because I don't know what is the structure of this particular return time. And I can create my own class representing the movie list. But for this example, we're not going to do the same. So this is the actual function signature. Since I'm mentioning here, the American type is observable and I'm not returning anything. I don't get a warming here saying that we're not return. Any values will just ignore that for a moment. And let's say we want to work with http requests. So to send http requests we may send it where Get request our post request put our village , so we need some additional services. Our class, which itself is called movie sarees, depends on another surveys which exploded by angular. And this is called http client so to include the same to our application first thing we're to do is tow goto at McGill dot es and say that our model depends on a http claim model so you can go here and then put it CTB client model. And we go to the beginning and then imported manually. So this come from a package card at angular slash common slash http. So once this module is part of our model, we can now go to our actual service class, Andi. Then we say that our class has a dependency on hitch to depict point, so I can simply declare a variable off any name I'll call it is. It's TTP off type http client, make sure that we get that from angular common. It's TDP. That's the one that we wanted. Now we got this, Http. We can make use of that over here, provided we mark this as private public are protected. So now this is a member available now I can see here. This start, http dot You can see that there is one function for each of its TTP methods. Like get post put delete on. I want to say dark. Get get request couple of perimeters. The first perimeter happens to be a You're a very want to send the request on the additional options that you can send Such as, for example, is the require listing perimeters Are is there a header editor? So this returns an observable. So there actually is goingto take it off this but we have to supply you are Let's call something called base urine. So the busier there must be a variable off strengthen. Let's declare that over here is a constant. Basically, order off stream type equals two and I have to give the you are so the yodel is going to be something like hits DTP colon double slash www or mdb FBI dot com slash We also have to supply a P a key here now, while a be a key can be supplied on unusual records like this. But since it's a common factor, we can add that right here itself. So I'm gonna put a question mark and then take your A p. A ki equals two and we have to give the a P a key that we got earlier. Which is this? So we have the order in which takes the a p a ki, but We also have to supply a search tone as a perimeter. When you're making this request, we don't have the search term here. But we have the basic model and we have to not supply the search top. So the search term if you go back, toe the browser and look for Oh mdb ap dot com You see that the system has to be sent as a perimeter called s scrawled on over here. There are different parameters. This is I for I am DB i d. Whereas this is for title. So you should actually give the exact title or at least a partial datum. But there is a search option which gives me a different value. So the difference is here you get a single result as a response. But as here we get multiple, actually, with maximum off 10 we get on with the S equals two and then we have the supply. This search string. Soto, send that additional question perimeter. We use an other object over here, and the other object has something called firms. This is like a keyword for the http client a p a. And then I supply an object filled with name value pits. One of the name here is s on the value for that is the search top. So what we're doing is now we're going toe upend this s equals toe. Let's a spider as the quite distinct perimeter for this base. Your Now that our get request is ready, all we have to do is tow Return this from the function so that whatever is the return object from the get function will now be written as return value from the search movies to see if this is working. What we will do is we will goto our movie list component TS and will say that our class depends on this particular movie service as a dependency so we can come here. We can declare a variable and then say that this is supposed to be movies service. Did I? And now we have a dependency injection. We can mark. This s private, so we can use that in N g. On it all. Um, Minuto is toe call this function over here, so let's get off this dummy value. What? We have given a clear and then we will call this function this start service start search movies by supplying a key work. Now the search term that's hardcore for the time being called Spider. And now if you simply leave this as it days, so we are actually calling the function. The function then will be passed on toe here and here. The get function is being called, which returns an observable. But if you go and check at this point in time, there is no request. So let's do one thing. Let's go back to a browser. Let's close this one. Let's open the developer console. Andi, keep an eye on the network time so that we can see. Is there any request sent to the remote server? So if you see that I'm selected here except chart to see only the example http requests. So if a refresh here, you'll see that there is no request in tow. Imdb ap dot com On this is primarily because when we call this function, we got an observable. An observable must be subscribed in order for the actual function toe. Go ahead and get executed. So the way you can do is you can say you're don't subscribe and when you say not subscribe now, the actual http request will be sent on the the response. Of course, we're not dealing with the restaurants at all here. So now if I go back to the browser on if I do a refresh, you should see that there is one example http. Request for your mdb ap dot com So let's click on the same and see that we got some response which consist off search as a key year with an array off, probably 10 titles. So all of this content spider in their title. So if you also happen to look at the actual request that is sent over here, there is a quite a stink perimeter sent at the bottom. You can see there is an A p a key, which is the a p key that I have got. And then there is a S colon spider that has got, Of course, it is not what actually, I'm typing over here, but at least I'm able toe send a hardcore did value, get the response, and the response happens to be a object consisting off search as the key on an array off 10 different values and each of those have title year poster. In addition, we also have the IMDb i d on type, whether it's a movie off cities. In our dummy data, we had Titan, you're and poster. Of course, the same thing now can be passed on toe our actual object over here, and then we should be able to see the data also. So to do that, in the substrate function, we have toe ask for the rest wants. Now the substrate function takes three callbacks as perimeter, so the first callback is executive as and when there is a flow off data, the 2nd 1 is executed whenever there is an error in the stream. And the 3rd 1 is when the observable has no more subscription. So let's do one thing. Let's put the first callback. We're really seeing the actual response so I can say that we get the response. We would like to assign the response toe the movies. I can say you're distort movies equals toe response. In fact, we don't want the restaurants responses. An object consisting of a key value safe. Go back over here. You can see that the response has a key called search. A search is the area that we want so we can see here rest adult search as the property and now the whole thing is a cento distort movies. So if I go back over here, you can see that I already have all the movies which have Spider as the keeper. Of course, it is not coming from here. We still have to map this value. But if I go back over here and I let sit island and then come back over here, I should see all the movies that have island as part of their title. So if you go check it out so we get all of them, I get 10 off them by default. So this is how we cleared a salaries class which is injectable toe another class after the component on that it still has dependency injection makers off the dependency injection, right? Our business logic over here so that the component simply has to call that function and subscribe to order the response that we get. So the next thing that we have to do is tow link the quiet, um entered in the header component and then received that Why other you are part over here and then that our application would be complete 14. MovieList component Part 2: in any component. If you want toe access, the information about the parts, such as the part perimeter, are the quietest ing perimeters. We have an actual service provided by angular called Activated Route. So let's go and make use of the same in our movie list component to get this information about what are the quietest ing perimeters we have. So let's go back to our court. It's close on the open files and then go to the movie list component here. We can say that apart from the services that we have received from movies, the risk class, we can also say we want another object off type. At first declared other private, we call it us a activated route. Variable in can be anything but the tight must be activated route. You can see that we get an auto import sedition, so let's select that on. Make sure that it is from router model. Now, using this activity drought, we can say, Give me the perimeter called Q. Remember, we have a perimeter here called Q. So this is what we are interested in. So to do that I have to first say here this dot activated wrote dot and then you can see that there are few functions. One of the member here is called Problems. Problems represents the part perimeter such as, for example, if I had past something like movies slash spider as if it is part of the Ural. But in this case, I'm supplying out of the question perimeter. We have to specify something called dot quietly bottoms not quite. Abrams is an object. It represents an observable. And, as in our case, we had returned an observable from here. And then we subscribed. Likewise, This being an observable, you can subscribe here by typing dot subscript on. Then when you subscribe, you need to supply a con back on. The callback will deceive on the quietest ing perimeters, so let's right the court in the next line so we can understand it clearly. So the perimeter that we see is a bunch of questing perimeters. You can call it askew problems, for example, on inside that cube problems when we receive the Cubans, what do we want to be? One? Only the que problems off. Q. Because that's what the Quietest Inc perimeter that we want. So let's go back over here. And then we say the whole thing, I can pass it over here, Curtis and paste over here. But instead of Ireland, this is gonna be que problems off Cube. So this is the quietest ing perimeter that I'm looking for. So in other words, what we're doing is we are actually consuming on observable on when the observable starts giving you the data. The data is nothing with the Protestant perimeters. We take this questing perimeter and then pass it on toe dysfunction. As a parameter, We were only interested in a piece off that which is called cute, and then we substrate to the same thing. So if you want to simplify that, so what we can do is we can cut this from here on an open a college bracket and say, Give me the quality string perimeter. So I want a single perimeter from there so I can see your net. Q equals toa que problems off. Q. And then I say this start service, start search movies, and then I can supply que which is the actual value, like spider or Iran or any other value that you were given when we subscribe to this we get the actual response. But from the response, we will use only the respite dot search, which is a key in the restaurants. So the corresponding value, which is another it's faster into this movie's. So let's go back to the browser now, since that's a spider. So we're getting the spider. I click on a movie brother to go to the homepage. Let's look for something else this time. That's a for example, Avengers. I've just enter, and now you can see that we got all the movies with the title off Rangers. It's going to try that one more time. Let's try your Phantom enter so we get on the movies where Phantom is a part of the title. 15. Getting the movie details based on IMDB id: given movie. If I have the A M D V I t. I can get lumps off details about the same to check the same thing. Let's visit the urine or him. Maybe a ph dot com by supplying the a p a ki and then I am deeply I d. Now we have got the IMDb i d. When we actually access the movie. For example, if I go to the developer council here and then send another request, let's do a refresh over here. You can see that for each of the movies. We got something called imdb idea also here so that I am db i d. So let's do one thing. Let's make a request using this particular key as the less this particular I am db i d. So I'm gonna go back toe my postman, which is a tool for sending its TTP request on get the response. So the euro is http Colon www dot full mdb ap dot com Onda We can send parameters so the question perimeter is a P I key. The value for that happens to be something that I can copy from my movie service, which is right here. So this is the one I copy that and that's the value for that. And then I equals two on imdb idea which I get this from here. So we have a small response. I'm gonna copy this, go back to postman and then paste this. So when I send this request now, I will get a single response because there is only one movie with this. I am DB i. D. And that response is an object. So you can see that it's a single object. Over here, it's crawl up. The object has lots and lots off details that I can not display. For example, that the title that year the rating released data runtime. How many minutes are there genre? Who is the director, right Or even the plant is also there. A small paragraph off blood on a poster. I believe the poster is gonna be the same thing. So if I click on this now, I should see the same poster. Probably you can see that it's the same poster. Let's go back over here. Apart from that, we also have ratings meta schools on so many information about the movie. Now we will write a function in our salaries class where we supply and I d just like this and then get a response, which is gonna be a single movie response. Let's call this us get movie details, which receives an I am Devi idee off type string on, then returns an observable again off any because we don't have a day today. How do you create a class representing this entire response? We could actually say that observable Britain's an object off that data type. Generally we do that, but for this example, will not on. All I'm gonna do is tow do the same thing. Let me get it off the side. But typing control be on Windows Command. Be on Mac. So we have more space, but they're done. This Doctor Http, don't get we say base. You are all that remains the same thing which contains the a p a key. And then we have an additional parameters. We said caroms is an object where I represents the I am Libby I d. And then we have the perimeter. I am devi idea. So whatever really see here simply supplying the perimeter called i along with the A p a key which is already over here. Now that dysfunction is ready. What we'll do is we'll go and clear one more component with on clicking on a particular movie car over here. Any off this, I have to pick the corresponding I am. Maybe I d on get the details off that particular movie in a new component. 16. MovieDetails component: way. First, let's go to the command front, are terminal and then create a new component somewhere safe. NGC gendered component Components slash That's colored as movie dash details, and that's gonna create a bunch off fights. CSS html Specter tears and a competent tortillas also has updated our APP model Dirty s so that it has become the part off our model. Let's go back to our core. The first thing that I want to do is whenever I click on any of the movie that is from the movie list, I want to go toe movie details component. First, let's go to the APP routing model. Let's go to our sidebar on Look for a protein Model where we had defined couple of routes will also do one more road this time, which corresponds toe a hole. That means if the user is in local news for two double zero without typing anything right now, you can see we get the head out, but we don't get any homepage, so even this should redirect me toe the home page. So to do that, we will simply add one more route, typically in the beginning. But it doesn't matter they say that the part happens to be an empty string. But if you look at this empty string is part off every single part. So to say that after local photo double zero, the only thing that existed an empty string we say here part match is full. So this means that after locals for two double zero, there is nothing other than this empty string. Then we can say Lord, the component called home component by typing component home component. Ultimately, we can say redirected toe this whole saying that hey changed the Ural from an empty string toe home. So if I go back over here now, you can see that no matter I arrested and press enter, it will always redirect me toe slash home. So we go back here, let's have one more route. The road. This time I want to correspond to a part called movie Dash details. But let's say instead of supplying this the IMDb idea as a twisting perimeter, let's make it part of the pot, such as like, for example, more details slash one of the IMDb i d. So to send imdb idee or any additional perimeters as a part Calumet, and not as a question perimeter. You simply have to use a colon and some kind of a variable. The variable in can be anything I'm gonna take. I am Devi idee, something like this. So in the part, this part is a hardcore did constant pot. But as this is considered as a very in part, so this can be any movie I D that we want to supply. We can still access this using the activated vote. So let's put a comma and then say the component for this happens to be movie details component. Let's go to the movie list component html Once on, then we provide a hyperlink. So when we click on this, we want to go to that particular route on. Remember, the unusual movie has an IMDB idea as a property, along with the title year poster as well. So first, let's at a class card applicable. Remember, we created one CSS class after clickable that gives us a fingertip when we're moving the most on the movie, for example, let's look for a spider and pressed enter and you can see now when I move the most on this card I get this fingertips. So when I'm outside, I don't see. But here I see that so that it gives him an indication that the user can click on this. Of course, we're not added any click event for that to do so. All I have to do is tow. Add one additional director here called out early equals stoop, and then really want to go Now, since we use the square record for rotor link, whatever is given here is an expression, and the expression is an array off part entries. So the 1st 1 I'm gonna give it as slash movie details. The 2nd 1 is m dot i am DB Ivy. Eventually the under part will be constructed a slash more riddles slash the value off this variable MDR IMDb i d. So to check the same thing, let's go here and click on one of the movie. When I click on that, you will see that it says movie detail works. The component has been loaded, but it can also see that the more details slash on the I. D. Has been placed over here. So if I go back, I click on this. We see a different idea. So every time I click on that, the IMDb idea corresponding to the movie details has come up over here. The only thing that I have to do now is toe make this presentable sister. I see a poster and I see the details of that. I also should have one back, but and so that I can click that Go back to the previous page to do so. Let's go to the HTML corresponding toe our movie Detailed speech. First, let's go to the movie details ts So this is the class corresponding to your component. Here we can ask for dependency and I need to. Dependence is number one dependency to get the movie details from the remote, sir, where we need our salaries object the movie theories on. We also need the activity wrote, because from the route we need to get this particular part so that we can send it to our service object. So let's do that first. So we're gonna declare two variables. Private service movie service. That's number one second. Let me get it up. The sidewalk control be or command be is something that introduced, but also their private activated, wrote That's a variable on the data type is activated, wrote it did not import. You can always stay command dot off control dot and you can see we get that import statement and we got the import over here, So we got two variables and in the n g on in it, we have toe make use of this particular activity drought to get the parameters. And the way you do is you see here this door activated, dropped out this time. Is that parents? Because it's a part perimeter not acquire listing perimeters. I'm gonna save bottoms, which actually is an observable. So you say here dot subscript and what you get is a bunch off all the perimeters. But in the routing model that we have, let's go up rooting model. You see that? We gave a name here called I am DB idee. So the parents here receives all the perimeters, but I'm only interested in this one. I am baby idea. So I'm gonna go and type your give me all the perimeters. That's color. That's forums. Now from that, what I'm interested in is only parents off. I am db Heidi on this is basically let's say I d equals two. So I'm gonna assigned this year variable Now, using this idea, I can now make use off my service function that we wrote in the previous lesson. So we say this start surveys don't get more illegals. I supply i d. Once again, this returns an observable observable must be subscribed in orderto consumed the later so well said dot subscribe. Whatever the restaurants we get, we would like toa assign toe a member variable called movie. So let's take your a variable called movie off. Any said has been undefined over here. Let's just assign this dark movie equals toe the response coming from the remote server. So we do have the movie. We will see whether we got the details of the movie or not. Toe, check this out. Temporarily, we go to the HTML corresponding to this, which is here. Andi will simply display movie, which is the member variable there and then use something called pipe on type Jason. So in other words, this object passes through this pipe gets transformed into a Jason string, So let's go and give it a try. When we go here, you can see that we are getting the movie for Spiderman two. Let's go back toe the previous request. Let's take Ireland this time and check for an island man. So there's Iron Man three here. When I click on this, you'll see that we got either elementary details the entire object were able to see. All that I have to do now is toe display this in a nice fashion. So let's go back to the HTML. Get it off all these court. And now let's display the entire DDS. So what we'll do is we'll make our screen into two columns. The first column is supposed to display an image. The second column is supposed to display the rest of the Beatles in a tabular fashion. So what I'm gonna do is I'm gonna go create a don't roll, which is gonna give me a deal Class off room consisting off a column. Let's go and say for medium device. I want four Greeks for this particular column. Plus, the remaining eight off them will be in another one. So let's type here something like this. So we got two columns. One is four groups. The other one is eight grids. Let's go and type something like an image, So I think I am g with. I am G. I am J hum day. This is going to give me an image. I need the SRC, but the SSC comes from our movie objects. So we have something called movie Dark Forster. Remember, this is an expression. So in order to say that it's an expression we have the surroundings with a square bracket. Otherwise angular will simply think that this itself with the name of a file which is not so I have to surrender to the square bracket on alternate takes again I wonder Title of the movie. I can see your movie tart Tater, Let's go and check if we are able to see that you can see we got this on by slapping these two. You can see if I cut this from here and then paste it. You'll see the image will go on to the other side. If that is okay with you, can just leave it as it is. But I think I will undo that so that I see the image first. The details on the right side. So that's what I want this section is going to display the movie title. Maybe I can use something like Hits three where I can say movie thought and now the rest of them I want in a tabular format that's at a table with a class off table, you can have additional CSS classes for table like, for example, if you want an alternate local or combination, you can say table stripes if you want to give a Howard effect, like when you move the months on the road, you want that to be highlighted. You can say table over. You also can give a border, but I think that is not really required on this table is gonna have a T body so that the body consists off multiple rows. Let's put around 10 off them, and if I don't want a can always do it on each row has something like TD. Let's say to off them one for the label, one for the value, so that's going press enter. This is gonna give me tea body with so many rows and columns over here. So let's say the 1st 1 I want to give is director on the value for that come from movie dog director. Let's go give the next one we want to give a plot. So let's take your lot. This is again movie dot plot Andi Likewise, I'm gonna give the rest of the details. And now that we have tied all these details, let's go and see how this is gonna look like. And now we have a movie with all the details over here, you can see that this is striped. And when I also move the cursor, I should say some highlighting over here. But if I don't want these special effects, I can get it off that and simply keep this as table a school non see how it's gonna look like on. I believe this is much better than the previous one. So let's go and check some more. So it's going type Spider first enter. So we got tests. I click on this, details on I got the Spiderman details Also, One other thing that we also want to do is to provide the back. But another ways the user has to click the movie browser and Onda click your and type the movie again and are at least you have to come here and then first enter to get the rest of them instead, what we can do is we can actually provide a button over here so that we can click on that to go back. So to do that, let's add a button right below the table. When safe button on add two Seasons classes Bt in on Bt in primary from Busta Press. Enter on Let's type your back now we want toe assign a function toe this when we click on this particular bottom. So 200 the clicky went. You simply have to write round bracket. Click equals toe. A function on one of the function I right here should exist in the corresponding DS. Let's do one thing that's college does go back. We don't have this function that's create a function in the movie details. Component es somewhere here, and I'll have to do here is to simply say, window dot history dot back now let's go and try the same thing. Let's go here so we take some movie Let's type your Avengers on first enter, we got The Avengers that's click on the 1st 1 when I click on the 1st 1 You see a little bit of late. Agency will handle that. Also, when I click the back button, it takes me back right to the previous speech. We click on back, it's going. But if I come to the same way because this data has been cached already, it is Foster. But if I go to a new movie, which I'm not visited yet, you'll see that for a brief amount of time, it is actually a blank right? So let's go back. We want to say, Here in the movie details component, we can say hey displayed his entire rule only if the movie object is defined on not an undefined. So there is a director called N G if, and we use something called store N G. If equals do and the direct condition. Now, if you simply type your movie if movie is defined, that's considered as true. If movies undefined, it is. Controllers falls so initially, the movie is undefined, and we don't see this particular road itself. Ultimately, we can answer that one more on here, I can say, for example, hits three. Please wait while loading something like this and then you can add your star N G if and they say when movie is not undefined. So that means that whenever movies undefined, this is goingto be false. Not off all this. True, that means when the movie's undefined, you'll see that please wait while loading will appear. We can also give you some CSS class, such as it should be in the center so I can see a class takes the center. Probably you can also say, takes the danger takes warning, So that's gonna change the color like this. So if I go back or here now, let's click the back button with the movie that we haven't loaded yet. Let's click on this and you will see that it is Please wait while loading for a brief moment. But after that it changes to this. Go back Go a movie that we have only visited. You can see that it's quite fast, so you see that even for a smaller moment. But after that, it is the movie leaders being displayed over here. So let's click on this to see for a brief moment. Now, instead of this it three. You can also add an animated GIF So remember, we have an assets folder over here. Andi images. We can copy and paste an image so you can search for a lot of images here on Google. So, for example, if I take images google dot com on, then type your animated loading Jeff file, you will get lots off them. You can just say one off these to your folder. I only have that in my computer. So I'm gonna copy that from my computer. It's called loading Jif. So I'm gonna come back over here. I'm going to right click and save based Andi. That's the loading Jeff on. This is an animated GIF that show some kind of a progress. So on I have to do is instead off. This are along with this. I can also are an image. So what Under there, Get off this and then I'll type I m g s r c calls toe assets from my route off my project images loading dock just And then the ultimate text probably continue to say, loading like this. I don't need the warming anymore because there's no color scheme in order for this on Now. If I go back over here. Let's look for some movie which we haven't loaded yet. Let's say weed killer. We got this. I haven't loaded this movie. So when I click on this, you can see that we got the animated GIF in action. So I click on this click on another one. I get a animated GIF for the time being. 17. Adding PWA to our project: Now that our application you ready? Let's go on. Stop the war and add the credibly features toe our application to do so. All we have to do is to issue one command, which is N g ad that angular slash pw. What this is going to do is it's gonna add a couple of dependencies. It gendered few artifacts and then updates our application. So let's go and see that again. This may take more time on windows, depending on your configuration off your machine. Okay, so in my case, it has done in couple of minutes adding 21 packages. But if I see in the beginning, I see what are the files that have been generated? One of the most important one is the N G s W. Conflict. Jason. There's also manifest file. This is the one that consists off certain information for mobile devices. A lot off icons. They're all angular icons. We may have to gender all the necessary icons. Most importantly, the 1 92 by 1 90 to fight will buy fight well, So these are the two important ones. There is also a Nikon for apple touch. There's also a couple of fights being updated over here, you can see that there's an angular Jason back. His Georgeson, of course, is updated with all the new dependence is at Model. TS has been updated, indexed or extreme, and also has been updated over here So forth. Let's go and have a look at What are the updates that have been done? Let's go to our application folder. Let's close all the open files first. That's going to have a look at angular Jason on in angular Jason. If you go to the configurations for production. If his deeds crawled on a bit, yer you can see it's a service worker is true and then Engy service worker conflict Part is in G s W conflict are Jason's that this was not there earlier. Now it has been updated. The second find that we can look at is our package Georgeson. The dependence is have been updated in the packaged or Jason. This is the one that has new living installed. So at Angulo's last Saturday's worker, then you have the app module doctor years. So the app model dirty s is under SRC have modeled our tears. You'll see that it has imported probably couple off modules so that the service worker model so you can see it has added to our import section. Service worker model dot register a file called NGS really worker dot Js has been added over here. And of course, the the final one is the index dot html itself has been updated. Where you see some information about the manifest, this one is required for mobile devices. So when you open this application in the mobile phone, it will say at the home screen on when you Acto home screen, what is that I can tow be displayed on the home screen on those information will be there in the manifest our web manifest. 18. Walk through of the generated artifacts: way off. All the files that have generated to off them are important. Number one is the N. G s w config dot Jason. This is the angular service worker configuration. Here, you can see that it is what is a fine that needs to be cashed, which is the index average demon. What are the assets for your application that needs to be cached on these? The files that are going to be cashed Favorite Condor. I see well that an index storage female manifest our web manifest all the CSS and JavaScript gets cached. I think it if you want toe, add more. For example, if you want to cash the network resources such as the response of its TTP get request, you can also add that, just like the asset group, you can add one more called data groups and then at the same thing over here. The next one that you can see is under SRC, which is manifest our red manifest. And this is the fire that is used by mobile devices for adding to home screen are one of the icons that are supposed to be specified. Now here is the name that's gonna appear when you're trying to install movie browser with the shark name as a less the longer name on both of them. I'm gonna change this toe movie space browser. The team color. That's let's live toe default background a bit off gray here, a display standalone scope is the route starting oral slash. Everything is fine. A lot of icons over here. I think the icons that are were only interested in is the 1 92 by 1 92 3 84 by 34. Fight will buy Fight well, so not all of them are required. I believe only this on this is required. So let's see that when we gendered our own icons. But apart from that, there is nothing much that you can do over here in this particular file. 19. Creating and updating icons: So one of the most important aspect off any application would be toe have proper logos and icons on our manifest. That Web manifest currently refers toe assets icons on a bunch of icons. So if you look at the assets folder icons, all these icons, basically all from angular, so that says E. But in my case, I want tohave icon specific toe my application, which is called Moving Closer. Soto create a new icon. What I do is I select the biggest size here, which is Fight Will buy fight Well, I want to create an image off my own. In case if you want a professional looking icons, you can ask some freelance designers to create one for you from online platforms like fibre dot com. However, for my application, I'm gonna create a very simple one using a keynote, which is like Power point in Microsoft Windows. So I'm gonna go here and then open keynote and then cleared a new document. I select the default white one. The first thing I want to do is tow change the size of the document. I goto the slide size instead of standard. I select the custom and I see your 412 by fine and 12 pixels are points is what I want When I select that I got this. I don't need this text placeholders I'll goto format and as they change the monster toe the blank one. So I have here a blank fight will buy. Fight will slide now I can create anything I want, so I'm going to select a shape Let's elect the circular one. I'm gonna make it a little bit bigger like this. And then I duplicate the same toe Have one more. But this time the color I will choose a different one, probably for this filled with white Andi. I have here something like this. So now I can reduce the height off the same something that looks like this Lee around. Keep it wherever you want. And then I had a couple off characters. Let's say I want one as capital them on the capital and let's increase the size of this text toe. Say, for example, 500. I find it is too big. Let's make it as 400 maybe 350. They should be okay, so I'll place that somewhere here. Maybe some more. Don't. Maybe 300 pixels or big points should be fine on another one for Be. So let's give the letter B a different color. That's changes to read. Probably I can make it overlapping a bit like this. I can have the same color for both of these, like the blue one on that. This would be also blue. In fact, what I do, they keep this in the same and say Am on then be so like this instead off probably 300. So let's make it a smaller letter 250. I think they should be okay for me. Now. I have a slight that I can export as an image. So what do they go here? File export toe images. All these options are dead in Microsoft ballpoint as well. I goto export images. I would like to export this to on my desktop. I call this as movie browser. I can't on export. It's gonna create a folder and then you'll see that I got the movie pros and cons and this is the image that we got. It's a J pick fight. Now that I have this one single J. Pic file whose dimension is vital by fight Well, I can use the same thing to gender it, my icons, so that ended the favor. Icons off different dimensions that are required for browsers and mobile devices with it. This website called Really save icon generator dot net All you do is you select your icon image, so I select this on I go to my desktop movie brother Icons select this geopark file open. Now it is generating one for each type off platforms. So this is how it's gonna look like on, and I always device on this how it's going to look like on an android or Crume on a Microsoft windows. You can get this done like this. So at the bottom, I should have one generate option. Generate your fair icons on Die html Court. So when I click on this, it's going toe. Don't load me a zip file. I think it's giving me a linker. Download your packet. It's gender dinner. I think it is really no I. All I have to do is to click on this Onda download This probably on my desktop again until the same ones that has come up. So when I unzipped, we have all the icons that are required for our application. So let's go back to our desktop on DSI that there is a fair icon package. There are 10 items. When I opened this, you can see that I got one for each one off them. So fight. Well, 1 92 Those are the two important one apple touch. I conduct PNG favor icon 16. 30 Dubuffet work under icy will. All the fights are they which we can now use in our application. So I'm gonna select these images. Copy that. So I'm gonna just paste over here inside this SRC as its I can't. I'm gonna based inside this so I can't see a based option. It's disabled open in the reveal in Finder on. But then I'm gonna based right here basics items Try to give your SRC sizes and the type I just have to change the assesses off some of them. For example, the 1st 1 here, the 1 90 to 1 92 each year instead of icon 1 92 by 1 92 It's actually called on dried crumbs and say, here on droid Crume Then we have here for fight Well, we have the same thing. So Android Crume Then we also are gonna have one apple touch. So I don't have this three very force. I'll remove this and type your apple touch. The size happens to be 1 80 by 1 80 over here. So these are the tree I'm using. I believe the other ones I think I don't really require. So let's go get it off this and set. Now you can leave that as the default where there is an angular icon, so I don't need them. I can also get it up the other icons which are originated over here. So this is something that I got off my own. Nb That's to one thing that select all these fights which we don't need anymore. I'm gonna get it off the same thing. So now application is ready on day we have made all the necessary changes so we can now do a build on, then deploy 20. New Firebase hosting for our application: No, the application is ready on. We want to deploy it on fire base. I've logged into fire based on google dot com, using one off my Gmail account on the link your toe goto console. When I click on this chord cancel button, it takes me toe the Fire based council where I can create a project, manage project or delete if I want. Let's click on the Create Project on Let's type the movie browser as the name and it's giving me some default name as a suggestion. I don't want this. I want to change this store. Something else. Let's give this, as in G eight Dash Mori browsers. I don't need this part. And if this is unique in the interview, the community this is gonna be mine. I'm gonna click on Safe On That is done. Let's click on Continue and it's asking for Do you want to enable the Google Analytics? I don't want Google Analytics to be enabled. I click on Create the project. All right, so now that the project is really let's click on the continue button, you have this project the project called Moving Closer. We have few options that we can do. Let's say if you look at this that an authentication database storage hosting So this is what we are interested in? What we want to do now is to push our cord over here. Before this. We have to initialize five based on our project location, so I go back to the command prompt. We are already in the movie brother directory. All I have to do is tow, say, five dates. Locking on this is going toe. Open the browser. It says You're firebase optionally collect cli usage. It's a truck. Do you want to do that? I'll say Yes, I said, Okay, now it's asking me Toe sign in. I want to sign in with this account. It's basically allowing the firebase Eli toe publish on Alter my Projects. That's okay. And it is. Logging is successful. I can click on this close. Come back to the command front. It is lot Dennis quieter that we know at gmail dot com. The next thing that I have to do is a issue. A command called file based in it on. This must be given in your project locations. If you're not sure, so give a credibility. Make sure that you're in the product directory. This is our angular project on I'll say You're firebase minute. When I pressed Enter, it's gonna ask you a few questions. Answered them carefully. First, it is which other five CLF feature you want to use. We have to choose them by using a donor here and then press space bar. So the one that I'm interested in right now is the hosting. So once it is done, press enter another. It says, Do you want to use an existing project or create a new project? So, we just know created a new project on the fire breast console using the browser. So we would like to use that existing project. So this is going to give me a list of all of them. I have only one N G eight movie browser. That's what I want. I press enter on. Then it's gonna ask you, which is your director that you want. Oh, publish toe five. Best posting. Now when you do an n g build, which we'll do in the next to listen, we get a folder called Dissed Onda inside that you will have a folder called movie browser . So we're going to specify that saying this slash movie dash browser. If you're not sure whether this is the actual folder or not, you can go to your actual applications. Angular dot Jason You'll see that it says whenever you're doing a build, this is the folder that it's gonna be dumping so distance slash movie browser. So I'll go back to my terminal. That is the name I pressed. Enter. It'll ask you configure as a single page application. Yes, we want to do that. So you say Yes, your press enter. Now, if you look at the dist. Folder here, let's minus l slash movie Dash browser firebase has added one index dot html which is not really required for us right now. We're gonna build our angular project on that is going to sit in that location. So that's do that by typing in g build on. We want the production will weaken simply out here. That's just fraud on this is automatically create a production really application. So it was Enter. This is gonna take a couple of minutes, and at the end of this you will have all the artifacts that are required to be published on your remote server. On this include index are HTML, CSS Files and JavaScript finds, along with the Assets folder, such as icons and Images. So finally, we have got all the artifacts, really. So if I just clear the screen and then go and like three dist slash movie browser press enter, you can take these other files that have been generated. So there's 1/3 party license and start next the asset, consisting off icons and images. Then there is a favorite Kander. I see well that an index HTML and all other JavaScript files which are required for our application to run. 21. Deploying our Angular application to Firebase hosting: now that our application has been built on ready to deploy. Let's do the same. Make sure that you're issuing all these comments in your movie Brother Angular Applications folder, where we have also initialized fire base. So the way you can deploy to your fireplace posting is very simple type firebase deployed, and it's going to take the content off this to slash movie browser and publish that to other remote hosting. When I press enter, this will take a bit off time, but eventually this will be done on. We will be able to access our application at the Ural N. G eight movie brother dot fire based app dot com. So here is the urine. It says the hosting Ural is this. If I copy this goto chrome and then open and you tab face this u R L press enter, you should see our application deployed on coming up from here. Let's if we are able toe access the actual movies, let's take iron. Best enter and obviously we did not get the output. Now let's do one thing. Let's go toe developer concern by pressing after when I pressed after all Goto console. You see that there are some others. One of the other that I can see right away is that it's a mixed to content. It's because your page is accessed from https. But as the William D. B. A. B A is not secured. So it said that you are loading an insecure AP I from a secure FBI on. This is one of the reason why we did not get this working toe solve this problem. Since we don't have any control on oil, maybe a ph dot com, but I still want to access that. We can add a meta information in our index html. So let's go to the index html. Over here we can add a meta attack to say that upgrade insecure yours. And the tag here is Metta. Http equal equals toe content. Security policy on the continent for this happens to be upgrade insecure requests on that this time will ensure that if it all, you're trying to make yourself an insecure http requests they will be upgraded toe a secure requests since we made some changes over here. So we'll have to do a build on the deploy. Let's clear the stream. Let's tow n g build dash dash brought, followed by another command fire based reply When I pressed Enter first, enjoyable Dash Dash abroad will be executed on successful completion off that command. Five. Best reply will do the job off deploying. It deploys the content off distance slash movie ProServ folder onto our remote firebase hosting, and it is done. Let's go back to the brother and see if we can refresh once on, then access the same thing so we're able to see the home fish. Let's look for a movie that's a spider pressed. Enter on. We should be able to see the Spider Man movies. I click on one of those vitamin movie here. I get the rest of the details for the same movie. Click the back button. I am able to never get back toe my application. Take here to go to the homepage as well, so application is now successfully running from a remote. Applications are work 22. Accessing the MovieBrowser PWA site on Chrome: one of the characteristics off a progressive application is on Google Chrome. When you open the application or website, you would see a small plus icon here initially, lots of flash toe install. But if you click on this, you'll see that we have a dialogue box that says Install app movie pros and this is the U. N. From where it is going toe install on. When I click on Install, it is going toe. Make a copy after application as if it's a standalone application. And he conceded, also opening that application. It has been detached from Crow. Let's close this and let's close this as well. Also, if you happen, toe goto chrome colon. Perhaps you should be able to see an icon correspondent or moving closer, taking on which it will launch the actual application as an independent window. And they should work just like our application on the browser. For example, if I'm gonna search for a movie here, I should be able to get the details of that movie as well. In fact, you can close the application, close the browser, close the chrome instance itself on a macro is you can use command spaceport, lunch the spotlight and then look for the at movie. Broza and I should be able to launch that from there as well. On Windows, you can just press the start button and start typing movie browser on. You should be able to launch the application as well about from this. Let's also see some of the other Syrian features off repeatedly. Application. Let me open chrome again and then visit the N G eight movie brother 80.5 base after come being a beautifully, our obligation should also be running offline. For example, if I kowtow my WiFi and then say tone WiFi off. If I refresh, my application is still there. There is no Adama sitting. There's no Internet connection. For example, if I opened another tab and then let's a youtube dot com, you should see that there is another seeing no Internet. But if I opened another tab and then I n g eight movie brother, don't five best after cause I am able to still see my application running. Of course, if I am searching for a movie, I may not be able to get the actual movie evidence. For example, if a type a spider and press enter. Now you see that there is no response, and that's primarily because the competent movie list has been loaded. But since there is no result were not able to see any data over here. Off course, this could be easily handled. When we're subscribing to the observable, we could say when there is an other display that you don't have an Internet connection or some kind of a custom message. Let me put my wife I back. And if I refresh, I should be able to see the actual details off the search results. Google Chrome also comes with an audit tool. Caldas Lighthouse. Let's go and have a look at this for this. Let's open the developer consumed by pressing F one. If you see there a few tabs here elements console source network. Also, if you click on this, you see other types on one off that you can see is called audit. When I click on this, you should be able to see some details as what do you want to audit? You can see. Are you interested in testing your application against the mobile or that stopped the West ? Let's keep it as mobile. What are the artists that you want to run? You can select performance beautifully. A best practices. Accessibility. Aceval Now, since we are only looking at the PW aspect so I can unpick each other and you can see what kind of Internet connection you want toe simulate. It's a simulated slow 40 are applied slow for G. R. No startling. You can leave that as it is. It's also giving me an Adam, assisting that multiple times are being controlled by the same service. Worker Service worker is the component of the browser that controls the PW on Since the same service worker is controlling this time as well as this time, it's asking me toe close one off them somewhere close the other one, and I will see that is no problem. It is run audit. When I click on this, your application will be tested, whether between a progressive of application or not animal body ways. So I'm gonna click on the run Audit on this will take a while, and finally, it is giving me a result as whether the PW a features are enabled on this application or not, as you can see that my application has passed all the requirements off a paid every application. It is forced under level. It is. Install a bill. That's what we saw when we clicked on the plus icon. It uses the https, which is secure socket layer. Register the salaries worker that controls the page and start your own. That's what actually the service workers job is about manifest meets the install ability requirements such as icons and sharp name, long name etcetera, whether indisputably optimized or not. So there's a bunch of checks one off. The thing that I also see here is does not provide a valid happen. Touch icon. If you see your manifest file, we have mentioned an Apple touch icon. If you see what is the actual error, it gives me that for ideal appearance on IOS. When uses at a progressive about to the home screen, define an apple touch icon, so it must point to a non transparent 1 92 are 1 80 pixel square. PNG. We do have this. If you follow this link, it is gonna explain the same thing. However, Crume Lighthouse is unable to recognize that Let's ignore for this time And then there are a few more details about the same. There is also another tab here called application. And if you go over there, you should be able to see details off sevens worker. Apart from sarees workers, you also see that they can story. So if you click on that, you may see a few You, Lawrence. Andi. This is where it gives you a list off all the files that have been cashed. In this case, you can see favorite on index html all the JavaScript files such as main Jace, Polypill Jay's that have been cashed as well. We haven't cashed any network a resource. But if you do, it will be available under this link, such as the Jason data corresponding to our movie details. 23. PWApp on a mobile phone: This is my android phone where I've got chrome I'm gonna click on the chrome toe, open a new tab and in the new tab, I'm gonna search for N G eight dash movie browser dot firebase after come. So since they're already searched one city state here, I'm gonna press search and the first thing that you can notice is at the bottom. You have this ad movie Broza toe home screen when I select that it will confirm whether should I add or not so at the home screen ad, and then it is adding toe the home screen and on the top you can see here that it is. It's downloading, and it's adding it's basically treating my Web application as if it is a mobile application . My phone is scanning for viruses and stuff like that, but if I come out of that now, we can see I have an icon here called movie browser Icon. Let me exit the chrome and then click on this movie browser on. We should be able tow open the APP search for movies letter, for example. I'm gonna look for super on, then search. We should be able to see movies with title Super in it, and we should be also able to get the details of the movie just like beats it in our Web browsers. And not only that, once your application is done, and if you don't want that anymore, you can long hold the same and then do an uninstall just like you would do on uninstalling off any android applications.