Loopback, Angular 5, Ionic 3: Build Web and Mobile Apps | Baljeet Singh | Skillshare

Loopback, Angular 5, Ionic 3: Build Web and Mobile Apps

Baljeet Singh, Freelance Full Stack Developer, Instruct

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
42 Lessons (4h 4m)
    • 1. Welcome To The Course

      1:43
    • 2. Course Topics Outline

      3:41
    • 3. Setup Development Environment

      2:35
    • 4. Installing Loopback

      1:07
    • 5. Creating project with LoopBack CLI

      3:18
    • 6. Creating New Model Via CLI

      2:45
    • 7. Using Loopback Explorer

      2:15
    • 8. Adding New Property To Existing LoopBack Model

      2:15
    • 9. Connecting LoopBack to MongoDB

      3:23
    • 10. Adding Model Relationships

      5:10
    • 11. ACL (Access Control List) and Authentication

      3:31
    • 12. Filtering Data

      5:38
    • 13. Adding Remote Method

      4:50
    • 14. Validating Data

      4:31
    • 15. Installing Angular CLI and Creating New Project

      2:30
    • 16. Installing Angular Material

      6:13
    • 17. Creating Components using CLI

      2:58
    • 18. Creating Header UI and Navigating to Routes

      8:08
    • 19. Creating Quotes Component UI

      11:10
    • 20. Fetching Quotes From The Server

      7:36
    • 21. Adding Server Side Pagination to Quotes Component

      8:30
    • 22. Creating new Quote and Saving to Database

      12:49
    • 23. Validating Create Quote with Server Side Validation

      5:46
    • 24. Editing Quote and Saving to Database

      9:11
    • 25. Deleting a Specifc Quote

      4:40
    • 26. Adding User Login Functionality (part1)

      11:00
    • 27. Adding User Login Functionality (part2)

      7:51
    • 28. Adding User Login Functionality (part3)

      10:30
    • 29. Using AuthGuard to Restrict User From Access a Route

      4:10
    • 30. Making Requests as Logged in User

      5:04
    • 31. Installing Ionic CLI and Creating New Project

      4:51
    • 32. Creating and Lazy Loading Pages

      4:30
    • 33. Creating Quotes Page UI

      5:42
    • 34. Fetching Quotes From The Server

      8:05
    • 35. Adding Ionic Infinite Scroll To Get More Data

      4:17
    • 36. Adding Create Quote Page UI

      4:47
    • 37. Creating and Saving a Quote to the Database

      6:56
    • 38. Validating Create Quote with Server Side Validation

      5:49
    • 39. Editing Quote and Saving to Database

      13:28
    • 40. Deleting a Specifc Quote

      3:48
    • 41. Adding User Login Functionality

      14:49
    • 42. Changing Toolbar Color By Overriding Sass Variable

      2:26

About This Class

This course is based on Loopback 3, Angular 5, Ionic.

Create Full Stack Web and Mobile Applications with Angular, Ionic and NodeJS Loopback

You will learn how to:

LoopBack

  • Using CLI
  • Creating Models
  • Using Explorer
  • Adding New Properties to existing Models
  • Connecting to MongoDB / Datasource
  • Adding Relationships 
  • Authentication / ACL
  • Filtering Data
  • Adding Custom Endpoints with Remote Methods
  • Validating Data

Angular

  • Using CLI
  • Installing Angular Material
  • Creating Components/Services
  • Server-Side Pagination
  • Mobile Compatible UI with Flex Layout
  • Making HTTP requests
  • CRUD operations
  • JWT Authentication
  • Using Local Storage
  • Server Side Validation
  • Guards

Ionic

  • Using CLI
  • Creating Pages
  • Creating Providers
  • Lazy Loading Pages
  • Infinite Scroll / Sever-Side Pagination
  • Making HTTP requests
  • CRUD operations
  • JWT Authentication
  • Using Local Storage
  • Server-Side Validation
  • Theming Application

much more ...!

Transcripts

1. Welcome To The Course: Hello. My name is Bulgy Sing and welcome to my course, creating Web unmovable applications with Lubeck angular and Ionic framework. In this course, you will see how African juice nor drew back on the back end and angler as the less ironic framework on the front. First, we will use move back to create the A pay for of replication. Here we will see how we can use through back to create a new application and how we can air new mortals to of replication. And how can we aired new relationships to open model and we will look into authentication as well as validation. Then we will see how we can make our AP requests using AP explorer that is provided by the Lubeck. Then we will move on toe our angular replication, and we will see how we can create components, services, guards. And we can make STP requests to over Lubeck silver for over angular Web applications. You we will be using angular material and here we will see how we can use values. Angry, motivated components, toe makeover, you in the application, we will also see how we can make the USA off of a replication the while competitive ill using the flex box layout. Then we will use Ionic Favor toe create about the while application. And here we will try to make a replication similar to over an angry replication. So without further ado, their sketch starter 2. Course Topics Outline: Now let's see what topics we will cover in the scores. So we start with Lubet. Lubeck is a Norges forever, and it is based on very popular, nor just favor called expressed. Yes, and Lubeck is maintained by IBM. We will see how we will use Lubeck CLI, and then we will see how we can create new moral issues in the loop back Seeley. And then we will see how we can use the AP explorer in the Lubeck to interact with the other models. And then we will see how we can add new properties to over existing models. Then we will see how we can use go back to connect to mobile device ever so that we can persist over data. Then we will see how we can add relationships to our models. For example, want to one want to many and many to many. Then we even see how we can add authentication to over mortals. Then we will see how we can filter river data, and then we will see how we can add custom and points in other application using the remote , massive sin Lubeck. Then we will see how we can vary it over data. Then we will move on to our angular application. Andrew is a single page application flavor. It is maintained by Google. So in every angle replication we will see how we can use the angular Seeley. And then we will see how we can in Seoul. Angular, materially, never application. We wish you Cingular material to create the your you off of replication. And then we will see how we can create components and services using the angler C. L. A. And then we will see how we can add server side imagination to over replication. We will also see how we can make the USA off of replication responsive or more competitors using their flex layered. We will also see how we can make that two TPD quest to over a server. And we will perform card operations, create, read, update and delete using angular toe over Lubeck AP, and we will see how we can handle authentication using over angry replication. And then we will see how we can add server side validation over application. We will also use guards toe, restrict user from assessing hours at the beach. Then we will move on toe Ionics, Remember? Ironic is a very popular flavor used for creating a moral applications, and it is based own angular, so we will see how we can use anglers one line interface. Then we will see how we can use Iron Xia late to create new pages in other application. Then we will see how we can add providers for services in never Ionic application. And then we will see how we can lazy load over pages so that we're only loading the pages that were quiet. We will also see how we can add in finer screw or pagination in never application, and we will see how we can make a stupid question. Then we will see how we can make read operations in other Ionic application. Then we will see how we can tackle authentication in never Ionic moral application. Then we will barcos harborside evaluation, and then we will see how we can take our application so that it looks similar to our angry replication 3. Setup Development Environment: before getting started with Lupe. First we need to install Norges Fortis weakened go to North Chester Orgy and a stall LTs or the card version. After very successfully and solid, we can confirm it by going to over a month from and at a Nord hyphen V. After that, we need to install manga TV. For this, we can go to mongo db dot com and click on download button and after that freaking click on community Server and don't know this version and click on dollars and messy. So after we install it, we need to goto over environment variables, the most system settings and then environment rivers. We need to add Mangala Devi bin directory to over part here. So if you see here, I have already entered that see problem fais Mangala Devi server treatment forbid so Wherever even stole Mangala Devi you need toe provide the been part in the environment for Revis toe after via stall that we can confirm it by learning more goody So here it is, saying motive is starting so that mean Mongo DB has successfully in store. So after that you need to install Robo Mongo so we will be using this application for managing over database graphically. So if we down with this and and soul it, it will look something like this. No, If I run mongo D to start over Mumba Devi server and then click on this I have already created a connection. So if he if you first open it, you can click can create and type that connection name then local host that before port is booze have indeed over seven. You can confirm it by looking here 4 to 72 oneself. So after that, you can click save. So I have already created that I can click Connect so here it is connected to the mobile TV . 4. Installing Loopback: now, after installing Norges Mangala Devi and drove along Go, we can go about the stalling Lupe, So we can go to loop back toward Io. And when we click on getting certain here we can see a command for installing Lubeck Cli so we can copy this. Come on and open, Overcome on front and then based disc one and press enter all I have already installed it, so I won't run this. Come on, after you successfully done this. Come on, You can confirm it by LV hyphen V so you can see you have installed the latest version off Luke Taxila. We have used hyphen D to a stole that cli globally and it provides us with this commode land utility cold LV. So we will be using this quite a lot for creating our project and for some of the tests. 5. Creating project with LoopBack CLI: for creating new application. We can go to a directory off over choice. I will be using my desktop here so we can go to my home on my desk. Straw and run L B No. After that, it will ask us a series of questions. So what's the name of your application? So I can say courts and the name off directory to contain the project than coats, which was, you know, Luke back. Would you like to use currently there toward shins to protects and three protects. So we will be using the conversion. And after that, what kind of application do you have in mind? So we will be using Lubeck only for the a p A. So we really using a P server Were different phase we can use through back. I won't get into that. So let's select pieces. So it protects sometime? No, absolutely. Successfully installed, we can takeover directive toe over course project and then run No doubt. So it will start of a server. So here you can see we have to yours. One is for we have server and one is for browsing. There s J p A. So if he opened our brother at Port 3000. We can see object. So from where it is coming. So if he open over project in the agitator off of a truck. So I'm using PHP Strom here. So if we go to server and boot and root or chairs So this is a file. This is a statement that is executing our first row. So iffy Create a new wrote. If you are familiar with express, you wouldn't know what I'm doing. Sophie. Right Function, request response. Then I did this post or send Hello. So no, we fail. You start my server. Learn. Run it again. You can see Hello here. All right. So I will go back to this. No. The other road that we have here is this Explorer wrote here we can see all over a B and person shortly We were creating new mortals. So currently we have that use this model here. So here we have all the different routes that we can use. We can create custom roads so that we will see in the coming videos 6. Creating New Model Via CLI: In other application, we will creating two mortars, similar toe user model gods and authors model. So let's see how you create new mortar so we can run healthy and model no hay. It will ask us, Enter the modeling. We can use God here. It is a good practice to store mortal names in a singular manner. So if we need to save course, we will use court. So when we need to save authors, we can use motor. So play center, select the data source started. So by default we're using the member idiot of it so it will store all the values that will save in the room. So when we re sort of a servant, all the daughter will be gone. So in the coming videos we will see how we can persisted data and using mobile TV. So for now let's like daily memory and then we want to use persistent model no exposed court where escapee? Yes, we want to, and custom poor form. It will by default records. So if you want to write some custom name, we can use that. So if no 1% so common mortal or seven only we will use common. So if you use server, it will only be used by the server Carbon So naughty asking us to enter the properties. So for court model, we will be using no political content. And then we can select the type off this property we can select string. If it is a quiet or not, we can see maybe. No. Then for the fourth value, we can press, enter and we don't want to add another property for now, so we can just present. So I also want to create one other mortal cold author so I can see oughta. And for data sources, like memory persisted Model? Yes, we want to expose it. Where s T p? A custom Goldman and for property name. Plus we can you string name and no before? Well, you know, and for no neighbors. Oh, Katie. 7. Using Loopback Explorer: now if he started a server again and go to Explorer, we can see our coat and ultra model here to if he expanded, we can see all the different loads and all the different actions that we can perform. So if they go to get courts and try it out because he can't lead is empty. Now, if I goto post court and for daughter Wiggins, click here and then entered the content like this is my first goat and they don't now if you go back to get courts and click died out, we can see this is my first call. The idea will be generated automatically. So when we used Mongo Devi then that I didn't look somewhat different. So no, let's create one more cold second coat and so you can see responsibility. Greater new coat. And now, if I try it out and get codes, you can see good courts. So if I copy this Ural and opening a different there as it is a get court, I will see all the courts so that we can use another replication. No, If we go toe or curse, we can do the same here. So if I goto Post, then authors. I can, for example, name we can see for starter. And if they go to get what does, we can see the first alter. 8. Adding New Property To Existing LoopBack Model: So when we don't l b moral command, it creates two new files in the common directory. So author George es author, Georgeson Court or GS Code Georgeson. So let's say we want to add new property to over out a smarter. So what we can do is we can go toe author, torch Jason, We can change the properties here or we can Jews overcome oddly So let's see empty property . And then it will ask which mortal we want to select. So we we will say water and the property name. We want to read description and it will be off type string not acquired it for value. No. So if you go back to over authored or Jason, we can see description here so we can add that manually, or we can use overcome Ardley for this. Now, if fail on the server again and go back to our explorer, I can see post authors so you can see description property here So I can say maybe second alter second description. All right, so now if they don't get authors, you can see the second or third. So if you're wondering why the first author that immigrated is not here. So as I told you before, Currently we're using the Devi memory data source memory. So when very sort of a server that that I will go. So So in the next lecture, we will see how we can use Mongo devi toe persist over data. 9. Connecting LoopBack to MongoDB: So let's first start Mongo db Server in one tab so we can do logo t. And then here we can do L B data source Lube exports many databases. So for this, them or application were using mobile TV so we can see mobility. Is he just the name? Now we have many options, so we can use over a Rockies and select mongo DB. And no, it will ask us to and our US string so we can say mogul leaving and local host and to 7017 slash then the name off our database. So for this demo on this, of course, correctly viewed on the local machine. So we don't have user name and password, so we can set their But for now, let's just go without it. So, no, for roast weekend escape, that skip skip and for details you already defined in the urine. So now it will ask us toe install a mogul TV connected. So by default, Lubeck doesn't come with all the different connectors, toe sport, different services, how to confirm that we can go to server and data sources know Jason. And what I will do is I can remove that David data source and change that name too deep. So the reason is it is being used in various places in the conflict files. So we contain the name just here. So know if I run north dot and go back to explode and let's click great out so correctly, an author's the knife A posed new water. Maybe it was footer and then first. But the description. And now if I go back here and it says for started So now I can confirm it by going to our application, uh, robo Mongo and connected out ofhis. And here you can see coats and in the collections we can see over New York. So if I were the document, you can see the first artery. 10. Adding Model Relationships: Now we know that author can have many courts and a court belongs to on leave another. So how we can define in this relationship with Lupe so we can go to overcome online and I l b and then coalition no weekend selector model to create the relationship from. So let's first say water and author and has many and court and to the property name for relation by the Ford. It will, of course, I'm OK with it, Awfully entered a custom foreign key and they say no for this. And I can create another relation for court. So court belongs to and auto so foreign key. I will say no, no, after that, if Frieden our sort of it again and I go back to our explorer, I can see different routes. So, for example, you can see auto and courts and the similar will be available here, and goat belongs to author. So now if I create new goat with the author, So let's see, let's first create the author. So for both that I can see a new both foot and then never say new description. And let's create another author and another author description so know if I diet out, I have three. Otis. So, actually, what I can do is let's open it here. So no to create new court with the author. What we can do is we can go toe post author slash i d slash courts four i d. We have to enter authority. Let's say we want to create new court as a first daughter so we can select this I d. And based here and for data and for content, I can see, uh, new court. So if I try Tote, you can see a new court. Let's create another court with this author, a new court, another new court. So let's create another court with some other author. So if I go to this new I d, I can say some new court, some new course Oh, no. If a go to get courts who get and courts so here you can see we have content and then idea off the court and then we have authority. So now let's say if we want to fetch, uh, let's see Goard's why certain order. So what we can do is get we have to get author I d And then we can see that author Scots so that I d so here we can see toe course way the first order. So no iffy. Select another I d. And then tryto you can slay see one court by the new author for another author. We haven't added any course. So if we used that authority, we can see empty here. Now if you go back to Goard's And if you want to see author for a given court. So what we can do is we know we have thes three courts here. So now if it copy a court I and then based two tier and then right, we can see the first off. 11. ACL (Access Control List) and Authentication: in the current state off over application, any use, it can perform any oppression on over a p a. So if you want to restrict I user toe, perform only read or write oppressions. We can make use off Lubeck a cell controls and provide authorization. So let's see how we can do it so we can go to overcome our line and type LV is here. No, it will ask us to selector models. So let's say both immortal and then I can select old methods and old match types any unauthenticated user and explicitly deny access. So no, what I can do is I can goto authors. Then we could get ready to start a server first. So no Daut. So now if I go toe, get out authors and try it out, you can see I'm getting a message called authorization required. So know what they can do is I need to authenticate this request. So four days first I can create new user so I can go to ah boss users. And then here I can define our first use it for use the name, maybe a conflict at Bill for email. I can select that peanut head mean, not gold. We have to specify Vossler and password is possible. So if it's right out, I have created a new user. And then after that, we can go toe user slash log in and here I can pass, came in and boss work. No. If a trait haute, you can see the usually successfully logged in. And we have this idea and we can use this idea that token and we can use this token way putting it here and set excess. Took it. Now, if you try to access the authors, we can see because we have passing Gladys String called Exist Okun. And it is passing that token that we have got from Logan while other users. So what it actually does is so if we go back, Author Jason, we can see all over this year's rules to find here so we can define more rules here, or like manually, or we can use modeling for this purpose 12. Filtering Data: In this lecture, we will see how we can filter our epi data. So first, let's remove in seal ruse that would make it easy to filter data so we don't need to pass excess token every time. So after that, we can move token from here. And then let's just you start a settler now. If we go toe Explorer, I have a did. Some new author sent some new course, so if I try it out, you can see I have under some coats. So, no, let's open this year or early, never browser. So you can see there are many course, so the Fort Met for filters is like filter, and then we're then no party. And then we have value. So four property we can use content I D. Roth ready. So let's say we want to see all, of course, by this authority. So what we can do is, uh, we can see property is authority and then for value weaken past. It's so apparently you can see we have courts, like all authorities, very different. And then again, it is different. So if I end to this so now you can see all the courts by authority. This one? No, let's say we only want the goat with the I d off this. So what I can do is were I d? It could do this. So now it will only return this fun court. So if we go back to Gore's vice, certain auto, we can also do maybe like greater Then then some value. Currently, we don't have like, any number here, so it may not work, but you can apply filters like this So they're too then and then we have less than so. They're similar filters that we can use to filter our data. The other filter we can use is we can select which fails, Do we want to show? So let's say if we only want to show the content feared we can use fears then content he could too. True. So no, you will only see the content from the courts If we want to show the i d to. Then we can use fields first. We would say filter than fields that I d like a little do now if you want will clear the authors mortal along with. Of course, we can do Ferriter include and then we can see. Okay, No, we can see we have author along with our courts. Now, if you want to limit of records to show only five course, then we can do filter limit. And could you flight? So now we will only see five course 1234 and five next week in order the goats by some property. So if you say filter that order, then we can pass a property, solar, say content. And then we have to specify ascending or descending solar. Say the year, See for dissenting. It's no. It will solve the posts Way Descending order. No. If he change it to Yes, See? Then we thought the posts. Why ascending order? We can order the courts. Play two or more properties for this. First we need to pass index with each property. And then we can specify You know the property like order. Then we have to pass index one first 0123 years old. So no, we can pass. Maybe. Let's see Heidi. And also we can specify that's handy. Go descending Then we have a filter to skip number off records. So if let's say we're using filled limit ical too five. And then we can specify futile Skip equal to Buster Seijiro. And then we can say skip 1st 5 and then 10. So, like that feel very healthful in doing pagination. 13. Adding Remote Method: Lubeck makes it very easy to create a custom and point. So let's say if you want to create and point toe, give us that an imposed his time we hear that endpoint. So four days we can use a loop back remote matter. So let's see how we can do it. So we will go to overcome our lane and type healthy remote let it and then we reflect more court. And for the method namely respect random. It started yes, for description put anything and for then point we can use slash random and for the street IPI world because liked get I don't want another end point So I will press center I don't want anything for a SEPs argument. This will be used if you want to put something in the registry So four return I can use result and for type I can use object. Is this argument full responsibility? Yes. Okay. And presenter, I don't have another argument. So I would breast center. No, it will just later method that we can use in other mortals fight. So let's copy that. No, we can go toe court or chairs and based it here. What it actually has done. If we go to over court door Jason, it has. I did this wild, great in hours matters property. So now we feel never server again. We can go to over explorer and if we go toe coat, we can see a random matter here. Now if you click on, try it out. So currently there is no content, so we will urge some logic. Then we will get a random court with So let's go back to where editors What we can do is here in this met Third, we can do court Don't get data source, then dot connector. Then we can do connect. Then we can pass the function with ADDers and DVR months. No, we can get a believer for our collection of course collection. So we will do tv dot collection Then we can pass court here because this is a collection. Now we can use mobile to be mattered aggregate correction dot You get and in here we can pass an airy And here we can do simple and sighs It could have won And for the second better mittens we can pass function with editors and data So if you get other, then you can return call back. And if not, then we will return. Called back? No. Did you know this should be called back? No, we can move this. No. If it is sort of a server again and we go toe random court, we can see our court here. I think. Let's just open in the browser. So if you go to rent So it is a person. Saperstein. Cool. 10 leafy. I want to see another court. Every time we hit Refresh, there will be random court. 14. Validating Data: you might remember from the previous videos when we were trying to add new property to our mortal, we were asked whether we want to make that property required or not. This year. Type of basic validation. So let's see how we can do that now. So if we go back to over it, go door Jason file in the properties for content. Weaken right required true so we can set it where come on night. So if you already have a property, we can just set their value. So now if you start of a server and go back to Explorer and try to create new coat and put nothing so we can see the error messages is content cannot be blank. So if we want, we can use that message in or front end. So that way we have, ah, service side validation for our application. But Loubet provides various other Beltane validation matters, and we can also create double custom matter. So let's see how we can do validation using one of these methods. So let's go back to her coordinator and we can go toe over court torchy s five and for let's say we want to check. If our content length is less than 10 we will show the message. Quote is too short. So let's see how we can do that. We can do court Dordt the lead. It's then off. Then we need to specify the property. In that case, we're saving court in Contra properties of every use content. And then we can write an object and then we can pass men. And here we can pass the minimum length and for the message we can do for men messy, it is. Court is too short. So now if we say they tend restarted a server and we go back to our explorer and let's try to add a court so currently there, like six tractor. So if you take it out, then you can see the message. Court is too short. We can go one step further. We can create custom valuation, soldiers say, if you want, Accord shouldn't contain our testing. So let's see how we can do that so we can do court dot validate matter and for property were using content. And here we can paulist like callback function. Did that added argument at this store content don't index off, uh, testing no tickle toe minus one. So that means if there is jesting, then we can gold added a message. And when we call that hair, we can pass the message as a turnout image. And in that messy we can write can not contained in the world. All right, so now I feel you started a settler, and we go back to explorer and try to create a new court. Let's see, new good district sonority is continue the world testing. So now if it right out, you can see the messages content can contain the word testing. All right, So now I feel moved their word and then Trey dote. You can see the new court has been creature. 15. Installing Angular CLI and Creating New Project: know that our beckoned is working so we can start working on the angle front end. So for that first we need to install Anglo Seeley so we can open, overcome online and die and PM install hyphen gee at Angola Ciolek Now to confirm the installation we can take and G hyphen v. So after it was successfully installed, we can go toe directory off over choice to create new angler projects. So currently I am moved the court server toe the course directory on my desktop So I would create new regular project in this directory so we can open about it from online here and we can type n g nu and the name of our project. So we will say cores, iPhone, angular and then four of a styling. We will use a thesis and we'll also pass a flag for profit so it will create a boy prepared forever loving. Now, after it has successfully creator our project, we can go toe or protected factory. So we will do city and four Cingular and then weaken type nd self. Now it feels start of a server and then we can see it is starting on port 4200. So we can open this year. Elinor was browsers. So if you go back to your browser and type local host for 200 so we can see what application here, there is one more short hurt. So instead of your striking and deserve So if we right, Andy served with the flag there, trash open, so it will open our brother automatically so we don't need toe the You're a winnable problem. So here you can see we have just passed that flag and it opened our application in the browser. 16. Installing Angular Material: to install angler material in our project, we can follow the getting started guide on material dot angler dot io. So if I click on get starter, we can see we have put on the falling commands to install a green material. So let's do that. So in the product directory, if we run and PM installed, that's just save at anglo slash material. Then angular Celeste decay. Then we can also install angular slash and emissions. This is required for some of the material components. So after that weekend, run this. Come on. No. We also need to install hemorrhages so we can run and PM stall that they're safe. Ham Burges So it wouldn't soul the hammer jeers dependency in Beckley Georgeson. Now we can open this project in our editor and we can go toe angler See Laid or Jason. And in the scripts, Harry, we can type the part to hammer years so daughter slash note More deals. Celeste amadiyah slash hammer dot men door Just now, if you're wondering how we note spot, we can go to over normal news folder and then we can go toe hemorrhages. And here inside the hammered years, we can see hemorrhages than hammered Orteman dodges Now all the good that we will be right taking over Angler rap will be in the sore subject. So first we need to create a new, more do so we can go to overcome our line and die and G generate and then more do. And for more deal name, we can use material. Also, we will pass a flag for flat so that won't create a new folder. So no, we will go to our APP directory. Now we can see material model here so the system or do very evil like import all the angler material dependencies. So first, let's import that more guilt. Tow our AB models directory so we can go toe here. Imports and type material model. Just make sure to import. So far, slurs import that more dearly. Never after more than 30 years so we can write material more. Do just make sure to add this import statement. No, After that, angry material comes with various models so we can use the models only which were quite so Let's say if you want to use the buttons morning so we can write Mac part of Mordor. Also, we need toe Pass it into the exports, Eddie, so that other more news can use it. So we have to by the same name here. No off. We cannot ask many more use that are provided by angle material here so that we can use it throughout over Replicate. Now we can import the people team in total product. So if you go back to the getting started page on the materia Lord Angler Door Toyo, we can see the stuff for here. We need to copy that import statement and we can paste that in the style study ceases. So if you go back to our sources rectory, we can see the style starts here says here and we can based the import here. Also, we need to add the material, Aikens so we can go to step six and copy this style sheet urine and we will go to our indexed or HTML and we can paste it here. Now the interim deal has successfully in store toe confirm that we can go toe over after components start as chairman and here we can remove all the boilerplate and let's create two bottles, one without material and the other button will use and will Emmitt. So if he used a directive here, Matt Button. And now if you start over server, get right and you serve dead fish opened. So here you can see two buttons. One is without using angry material and one a using emblem t so you can see the ripple effect here Eclipse. It won't be that visible here. So if we change the directive toe, maybe let's say met it is written, so you will be able to see it clearly. Also, you might notice that whenever we change anything never called the server refreshes that browser itself so we don't need toe restarted, severed each and every time we change our court also, we need to check over console to see if there is any error. 17. Creating Components using CLI: Now let's create some components. So we we use anger. See life for this Who first let's create course component. So we will use this component for showing all the course so they can do and g generate. And then the name off the component. We can say courts and we also need to pass the name off model where we want toe like import that component. So we will say more do good to so it will add course component. So the declaration airy off after model. So I was sure that Sophie Sorry, it should be anti generate component, then courts. Then we can do more delicate too. Yep, no, it has successfully created of a component. So if we go back to over after modeled or TS, we can see that courts component here in the Declaration Ceri and we can see this folder in the source and AB directory, which contains have a component. Now let's create somewhat components. So if he same, we can create new component for creating a court, create good component, and then we can create component for editing. A good then seem we can do for order. So if we can say authors. Then we can see 38. Then we can do and you don't. So we have greater some components that we will use toe do specific tasks in nova replication. So if you want to confirm that our components are working, we can go back to over Abdur component or esteem, ill. We can see at the course component here so we can do yep and then go both study. And then, of course. So if he that I never saw her again so we can see court work so similarly, we can use the components in the template like this. 18. Creating Header UI and Navigating to Routes: Now let's start with creating the you you off of replication. So let's go back to angler needed website. So if I click on components so we can see all the components that we can use, So we want to use kunwar. And if I click on examples here, we want to use something like that on the top of Herbert Education. So similarly, if you want to use any component, you can goto the component from the side bar and then click on examples and then you can click on the court here. So here you can see all the court that we can use toe create. Our new tools were so let's do it. So if we go back to agitators and you go to our actor components file, we can write, Met doing what? And in this we can use smacked cool by a little. Now let's give the name of her replication here so we can use a sprint dead and we can write course and then Angula No, we can create to witness that we can use for showing all the course and all the outer solar say button and then for this weaken right courts This with text off the button and we convince. Met. Then what? Don't directly for it. Also, we can go, Pete. And then we can write Autissier. No, if we saved that and we go back to our problems because see that it Here, this is goes and William Period doesn't come with all the more deuce by default. So when you may remember when we created material model, we have important met but in here so we can import all the components that we need in that fire Solar's import, the tumor model. So if you go back to material, not more deal and then we can import Met tool. But more news so you can import it from angry material. So we also need to add it to the export serie. So no, uh, let's see double rose again. Now you can see the courts here. Don't bury the toolbar. No, it's We change color to let's say primary. So if you go back to after component and in matter, but we can write color equals two Now you can see it looking similar to that. Now you can see some margin and betting on top off here we can do to move that so we can go toe over global stays here in the States, started CSS file, and then we can write s chairman and body and four margin. We could like Joe and for betting we can also write judo. Now, if you say that and we go back to a browser poor margin, we can deal. And for reading it can again. Right, Cheeto? No, a fee. Save our files and we go back to your brother. We can see there is no margin and petty. Now, if you want to move over course and or transport into the right, we can use new glass. So if you go back over that good components started chiming we can create a spend the class off. Let's see, we name it QE and then spacer. I used to a prefix because the name off our project is go segment. It is good practice to use a prefix for the class. So now if we go toe after component of SCS says you can use this class and then we can write property flex 11 and then orto Now if you save it and we go back to a browser, we can see the core sent out. A sporting are on the right. You can find a similar gold with the space a class on the angler materially getting certain pitch. So we can also use hikers in front of the but in text here. So we can use Met Aiken directive and for course, I want to use for good and then food authors. I want to use person Now. If you say over file and we go back to a browser, there's one more thing we need to do. We need to add mad. I can more do and the imitated more do. So we'd I met more deal. And then now if you say that and you go back to her brothers that we can see that I can see now let's point Coursen orthez button So the respective loves so we can go toe our at then at routing model 30 years in the the old Scott Stern. And then we can rate. But for course, we will use course component and then four or cursed baby use. Just make sure to import thes components at the top off your files So if you directed, does there are vertically? It is good then if no, then you need to add that many, buddy. So now if you go back to over the afterward component or s chairman, we can add a directive. Gold, Dr Link. And then here we can for us courts here and then for first author speaker, right With others? No, if you save about five and we go back to the Broza when we click on auto courts were going toe course space and when via taking on authors were going to the author speed also, we need to make a slight change here. We need a Dr off. Let here. So it was sure all the data from the whichever template V go to. So if you go back here and click macular source saved so actually started with silver. Now, if you go back to her browser, we can see when we click on courts. It says court works that Weekly called Authors it is out other work. So if we go to our courts and you're such human here, we can see court works. And if you go toe authors, we can see what works 19. Creating Quotes Component UI: No. Let us work on the USA Off over course component. But first, we need to install one more package called Angler Flex Layer. So if we go toe and gonna flex Leo, get her page so we can see it. He used to make over, um, a while compatible or responsive. So we can go toe integration with Andrew Sealy, and then we can install this package. Now, after waste all this back A, we can import angler flex layout, more duel over half court, more useful file so we can see flex plate model. Also, in the beginning, we forgot to add, but I was there Any mission? More do. So we can addict. Here it was installed when we installed angered material. No, I also want to include Met guard model. So I can say Matt God more do. And then we need to add their through exports city. I also want to wrap our out droplet in some container so we can say maybe this container and then we can create this glass in afterward. Component Jordan s CSS. We can create it at a tall make sure to add dort in the beginning and then we could write maybe reading off, but five pixel here and then for verite we can use 70%. Then also, I want to use margin zero and photo. No, it will center the container that is off 70% width. Ah, in the very centre off the application. No. If he started to sell it again and then we go back to the browser, we can see the courts. Works is centered here. Now let's work on the course. Pay you I So if we go toe over course, start component, daughter html and we can use Met guard. No, we can use Met God title. Then we can use courts. Then in the next line, we can put horizontal line and then we can use Met Matt guard and then use content. Now, if you go back to a browser, we can see the card here. I also want to wear some spacing at the top off the card so we can create a global class in States. Sort of ceases. So let's say maybe my 20 so we can see Martin Top keeping still here and now we can use this class wherever we like, So if We aired that class here at Empty 20 and Novi Saver File and we go back to the brother. We can see the space here. Now, let's create our lives using the Flex Leo. So in the Emory card content, we can create a new division. And then in here we can use a property cold FX, Leo and Weaken. Set it food through and we want effects. Leo. No excess acquittal going on. So that means when we opened the bid, they never brother, we will see the Leo in the form of fruit. So But when we opened it, they never more while browser. Then Louisville's seed, Elliot, as I call him, you received in a minute. So now we also need to add one more property effects, play out, then wrap equal to strip. No, we need to add another day. That will be about repeating days where we will show all the courts. So here we can write effects. Flex dot duty meets greater than access. Then we want to make it 50%. That means here we can see two columns. No, If he aired affects flex door treaty dot MD So he fitted a medium screen. Then we will use 25%. That means weevils show four columns here. And no, we will add content here. Life. I mean, let's say Lottum now. After that, we can add another div four with a glass off action buttons. So we will add two buttons here, 14 editing the court and one Ford leading the court so we can write but done, then addict and then another one girl before the late so we can write and yet faced water and then for color we will use. But I'm very here for the edit and for the lead we can use, uh, for all right. Now, if you open number Broza, I think we first need to restart our server. So if you start over server and go back to your browser, All right, we can say we have ah, closing division so we can go back here and fix set division this division and then this one, so we have one extra division him. So if he maybe lead this, I think we will be OK. So if we go back now, we can see we have a court here. So now let's say, if we copy that and basted like seven times and no, if you go back, we can see all the courts here. But no if he go back to the boil view and maybe select iPhone seven, you can see now this is like showing in the column. We also want to air some properties toe action buttons. So if he copied this class and we go two hours Styler at satisfied, then we can't right margin dog off every 20 pixel. And then we can use float and then right. No, it feel moved of election buttons to the right off the court occluded. One more issue we have defined here. If you use medium devices, we want to show four corners Simon 25% than four columns. So I think there is one issue here, So if we change it to hi, fun instead of thought and let's call it again now, if you save it, we can see on the medium races. It shows four columns now if we decrease the device. Faith now is two columns, and now it's fun column. All right, do Now it's four columns. We also want to add new What now? At the bottom, right toe. Create new court. So if you remove these and then outside M D card, we can create a new clothes, create goat and then fair. Now we can create new button and inside that foot and we can use Met Aiken. And for this we can use I can circle And here we can use the button Mad put in soul I couldn't Should we met fat? And then if we create this close and for fair plus we can use the patient off fixed and then for both Then we can say during tip Ixil and for right. We can also say 20 picks up and put color. We can see white now if you save it and we go back to her, Broza, we can see and I can at the bottom, right? We will use it to create new courts. 20. Fetching Quotes From The Server: Now let's see how we can fetch the data from the server. So first we need to go to our core select tree and began open over Said reforming. Like Marley. Actually, first we need to start over server with more body, and then we can start over repetitious, ever nor dot No, let's go to our application code and we can go toe environments folder and under environmental two years, we can add near property fort ap a U. N. And for that, we can use as TTP local host and then Ford 3000. We know that from this urine when we run, never server No. Let's create a service to fetch other data so we can close over silver. And then we can the day to service using the commode n g generate all short g and service and for short s And we can Naval service data. No. After that, we can go to over data service. And then here we can, right met good cold, get data. And then here in this matter began like the Logic four getting the data from the server. So first we need to import s two TB model for this weekend, right? Brave it as to TP Then that will be off type as TTP client And make sure to import that No , Under this matter, we can do return this daughters TTP dot Get and then the other and we will pass that you're too Get determinative now. After that, make sure toe inject that TTP more do in the atma dues fight. So we will goto the import serie And then we can write as TTP Glenn Moore do now. After that, we can go toe course toward component RTs and here we can inject our service and we can write private later service and then Duda service. And now we can create a new property cold courts which will contain all over course that we will fetch from the server. We can pass a interface here toe Exactly. Make sure what that of year like passing to this variable. But I won't be doing that. So maybe you can do something like this. If God, then you can create a court interface. But I want to doing that. So if we go back to Andy own it matter, we can do this. Thought leaders a restart get data, then we need to pass the urine for that. We can do environment not. And we need to import that moment file and then environment dot ap your urine. Also, we will use these tactics so that we can use the variable like this. No, we don't need toe getting need the very evil and sinks with the plus operator. No, we can use slash Then we know a p a slash, then courts and then we need to subscribe. Dripped If it's a script would Then we will have data. We can name it anything. Now. After that, first people love it to the council. Now, if we do that and the I think start over server. But he said, and we go back to her brother and refresh it. Okay, so here is an adult. It says, All right, we still have to inject the service to over there. Poor do. So we have to go to the airport models. And then here in the providers had Avery will data and then service. Now, if we save it, everything should be okay. Now, if you go there and then this is a whole page. Now, if you go to the courts, you can see this is fetching course from the seven. Now we can use thes course in every way. Now, if you go back to ever course component orders demon here we can use and before and then here. Good off. Of course. And this is a very evil that we're using here. No, we can go back to Goto test email, and then here we can use interpellation for four Dordt content. No, we have to make sure the give of course video ever and passed the data to, of course, Videla. And now, if I save it and we go back to a browser, we can see all the courts here. You know what? Actually, I want to give some padding toe each element. So if we go back to go start esteem a began give this two billion that glass off good container and then here in this glass maybe I can add bedding off. Let's see 30 pixel. Now if he I go back to her brother, you can see all the course here. That's changed to 50 21. Adding Server Side Pagination to Quotes Component: Now we will see how we can hair pagination toe over course component. Now if we go back to materia dot angler that I website we can goto page in itr and then we can add this type of imagination toe replication, solar. See how we can do that. So we go to the example here and then view the source here we can see began. We can use this directive. We can go, Pete. And then we can go back to our application. And here in the course component, we can edit here. So we need to change food for Lent. I will use every every call paid length and then here I will use. And then And then we can pass the airy directly. Here, maybe five, then 25. So for paid here we will use a meditate big event. And then I can fast went to you. So no, I can create this method. So if they go back to my course toward component RTs and then I can create this matter e v then Then I can create two properties paid land and pay size and I complete them here, baby, and then be age site. I will give it a default value off. Well, let's say five and four page length. We want this to be a number. So currently, if we're like getting course from the server and we want to pass, get outta state of it, it we might have to use filters. So what we can do is we can add filter, and then include, then we could right author here. So now if I save it, Okay. Mad pay dignitaries and Rick apart. All right. So actually, first we need to and include it in the material or moral dot, dear. So we can see I met paginated more do. And then we need to pass it in the export serie. And now, if you go back to the browsers, you can see we have imagination imagination here, but it won't work currently. So let's see here. We have edgier than clear here. And so we will have altered along with what? A lot of dead along with the court. So now if we go back to ever Gorsuch demon, we can add it here like maybe till day. Then I tagged. Then we can see good dog outer door name. Now, if we save it, then go back to the browser. You can see we're getting the good here. Now, if you're wondering about this error here, can it really appropriate? Name off one defying. What you can do is you can add caution back after daughter. Now, if you save it, you won't see this air. All right? No, for pagination we can go back to Overcoat and first we need to go toe our course component DS and first weaken rage here food. And then we can pass and limit than it could too. And then limit for starting limited should be able to pay size. So if we're passing five year, it should only fetch 1st 5 records. So if you go back to her blouse that now you can see it's only fetching the five record. See, it's similar to this 15 So you featuring that too, then And here you could see 10 course and then here in the pagination, it will be dead. No, they're standing toe fight. Begin now for the paid event. If he about the event do the console. Let's see what we get now. If you go back And then let's change it to 10. You can see we're getting an object here Page index and based sites and lent so we can make use off these properties and then do the imagination. No, let's create a constant full big index and then we can use every door pH index. Oh, let's clear the constant food big, tight. We can use Bayside here and let's create another constant for homemade regards we want to skip. So here we can do a index and do bed sites. It will give us a value off how Maney records were currently displaying and home any we need to skip. So no, if you call over seven again, he was in this. You are also we need to pass the skip faded here, rekindles and then skip equal to then skip Sanofi. Go back to the server and we can see here currently were fetching five records. Actually, there is one more problem. Geo and Geo. We just need toe identify the president's for this. We can go toe this, um, get data and then we can use their scope of this and me up to this so course slash Then we can use count. So now every subscribe to this. And then we passed that here and open the stated look also so know if really started with silver again. So no, I feel the fresh it you can see the count. 30. So what we can do is we can do this. Start Playland, take her to data, and then we can pass count here. So now if we save it and we go back to your browser so we can see five course here. Now, if you Shane item self paced to tell. All right, there seems to be some problem. So if we go back to record, uh, all right, so instead, off base this start Bayside, we have to use the spaces. Change that and then save the file and we go back to the Rosa. No. If I changed at 10 you can see there. 10 course here. So if I click on next fish, then it shows the next 10 22. Creating new Quote and Saving to Database: Now let's see how we can create New post and save it to the studies. We already have created a button at the bottom right. When we click on that button, we will goto create court pays and then there we will and the record and then say that goat . So let's see how we can do that. So if we go back to our court and here we go toe Abdur shouting, got more dildo, Yes. Then we can do but courts slash create And here for component We can use good here, its core component and similarly, we can do 14 for us create took or third component. Also, we can specify one more part. So if we do can then the less too sick and then we want to personally direct True then, of course. So that means if we pass anything except that our speed to find here we will automatically very rejected toe the course wrote. So let's see how that works. So if we go here and we click on, maybe hello would so we will automatically redirected to Gore space. All right, so now let's add the link toe that brought a plate with him. So if we go to our course component, we can go to over. But then, Dr Link and then here, we can use courts left. Create. So now if we say that and then we click on their part in we we can say we are redirected to create court pace. So if you go to court and then again click on that so create court case. No, no. Let's sir the temperate off create court pay. So what we will do is we will go pay this mad card that active you and then we will open create goat page its chairman. And then we'll be faced you to hear here. Instead of coats, we can see scored create court and then under mad card content We can't believe this and here we can see FX Silly Article two column No left, said new Met phone field. So we can see met for field. And here we can add deck stadia, Matt, input and placeholders. We can share center court and no, we can give it a name to let's see content. And here we canary and immortal for two reminding and we're giving kitta name of content. So, no, we can add another mad phone field. Porter was select books to select daughters. So here we can. I smacked Select it. And then here we cannot placeholder, maybe select auto full name we can use or to lady, you can add and immortal here. Authority. No, you can admit office in here. And option one on value will be one. So we can duplicate it. Maybe two. And see here now if we save that and we create a new Britain for saving over court. So if he had button, it is written color can be play Marie. And when we click on that button, we want toe save court function. And yeah, the textile button will be circled. No, if we save it. And also we need to goto over material more Dool foil. And we need to add Met in foot model and I met Select model. So now if you say that we can go back to our problems is all right. We have that added cannot bind to any motors since it isn't unknown. Property of text area. All right, so forth is we actually need toe a port forms more dealing the abhorred models So we can do from Smallville. I think this should fix it. So if we go back, Holick so you can see our form create code. Here we have Ah, exterior. And here we can select different authors. So know what we can do is we can see how we can ah, get the authors from the database. Also, I can see, uh, we're not able to see the button. We will fix it in a minute. So let's first see how we can fetch the authors from the uterus so we can go toe create court component dot Yes. So here, what we can do is began injectable that service. And here we can create a new variable authors, and then here begin get data from the U. L. So I think we can pass environment. And then we need to import this environment fight and then dot ap a urine. And after that we can pass it the a slash voters and now we need to subscribe to it. For that, we can do data console nor clothes little. So let's see fear getting all loaders. So if you go back here in the browser vacancy. We're getting three authors here, so, no, If I assigned this later, toe the voters variable now we can use it in the template. So what we can do is here in the Met option. We can use Andy food, and then we conduce lead, water off or purse. And here for option, we can use photo dot name and then here for value we can use. I got a daughter so we can use property when the here So we can say authored out like me. So if they move these options now, if I go back to the browser, you can see we have three authors here, all right? And we have saved court again. Now, we need to create the same court. Better That will save the court in the database. So let's create that. So if you go back here and we copy this name and we go here and the here, we can create a new constant, maybe cool strata. And here we can false content and all right, so first really to create to board variables, the one for content and one for authority. So we can see going to about ready and then for content. We can fast content content. So this is similar to this and for. And this should be this store content. And then we can pass. Heidi, they should be distort. Now let's first create a poor state of service. So we will go toe data door service tortillas. So we will hit pulled data and it will expect to our rumors. You are and ditto. So first weekend consulate to check. If we get any data, you would have ended up. No, no, we need We're headers here. So we can say girls header secret Too new as to DP headers. And then here we conveyed. Go on then and then we can pass application. So let's Kison and no at the end, we can tell this thought tp don't post. You're a real data, and then we can force had those headers. This should veto. All right, so now if you go back toe over, create court or component off PS and then we call over matter for this dot data service toward full strata, then this expects you well committed. So you will will be, uh I think let's copy debt and instead off authors weakened right courts. And then we need to subscribe to it and then go on so long. Okay, So, actually, we need to pass a second argument here, and that will be a lot. Post did a constant. So, no. If he open in my browser and try to create new court so we can do a new boat here, and then we can select the auto. So maybe Albert Einstein. So if you save it, we can see the court has been saved. So to confirm it, If we go back to a course wrote and we go to the end here, we can see a new court here. 23. Validating Create Quote with Server Side Validation: No, let's see how we can very readable data. So in other application, we can either do my side validation or we can do service side validation or we can do both . But here way will only do a server, said validation, so it never create goods page. So if he don't enter any court and then save it, you might remember from very getting date up video from the Lubeck VI editor requires it could do for others going to property. So if we save that, you can see we're getting in others. So if you go toe over at a subject and then again here in the details and then here in the messy you can see here, we can see content cannot be blank. So we will use the angle material component cold snack. But so if we go toe this component documentation, So let's say if you click here, we can see a message so we will use this component to show over every message, and we will also use component if we successfully create a new post. So let's see how we can do that. So first we need to go to ever material don't Mordor tortillas and in the imports weekend day met snack bar, more do. And then we have read their toe the sport. Serie? No. After that, um, we can go toe a word, create gold component duty, and then we can add a property for snick. But and here we have to use Mac snake book. Make sure to import that here. No, we have to. I heard the second perimeter here in this A scrape and we can see better here. And if there is an edit, we want to show the snake. But this door snake open so we can diet about a messy. Here it is a matter. And for the second argument, we can pass a button here. So maybe let's say close this with text. When you click on that, we can close their snake work. So if there is a native people see the snake work, So all right, we have some error minute to let's try to restart a server. All right, so, no, If you try to click on save good. So you can see there is some errors. Messy. So if you could come close so we can close that. So now if it console that and first click on save court, nobody can see that data. No, we can select the messages by If it right added note editors. The Thetis don't messages. Then on 10 then forced index. So if you got a debt and instead off this is a metal we can like goat and then plus then we can rate at a dot and this properties, we go up it. So if you say that and now we go back to Broza, we will see that and a message. So if you say that so we can see gold cannot replace. So now if we successfully greed a good what we want to do is you can sure snack but not open good. Create successfully. We also want to redirect a use it to the courts. Look So what we can do is we can do no good then can include that out. No, What we can do is after the cynic. But we can do this store. I don't never get Eddie God component. Now if you say that and go back to the browser now, if I physically conceived good, you see, God can arguably Now if they enter some good, some good and select any order and then click save good, you could see God created successfully and you're redirected back to the core space. 24. Editing Quote and Saving to Database: Now let's hear the functionality toe and it does Pacific cook. So first we need to ed a new route. So we have to go to AARP routing dot morial tortillas so we can add a new road, food, everything your court. So here we're using Golden 90. So that would be dynamic I d. And then for component we can use at court component. Now, if you say that and go back to the browser now, if you date anything after good and then at it, we should be redirected to adult court works. Or that it could page so No, What we can do is we can go toe over core store component or that's chamber Here. We can add that up, turning over at Britain and here recondite goods slash and then could get you need good boat I d. And then we can write slash edit. Now if I say we didn't go back to the browser and if they go toe Ghost wrote and click on Edit and I am in the it could be with the specific code 80. So now you're fake. Click on another court, you can see the sea. Different idea Now let's see how we can use this. I d toe get the good daughter and then how we can update that coat. No, let's school be the court throw, create go door component or the statement and based it in the and it go toward component or estimate because the phone Willoughby's very similar. So here we can update the title. Do it good and then if we need toe past of a useful content and the orders No, let's say see how we can do that. So instead of safe, good should be a good no if they go back to added coder component RTs here First we need to inject activities component So we will do good old, then activated and then here create a new property. No, we can do this North road. No, but aims doors of scrape and then data so we can do first. Let's check you get you get back. Now if we save over Fine. All right, so if I click on add it we can see the idea here and know what we can do is began Pause this data dot i d two of that i d property. No, we need to get the data. According Toa decided. So what we can do is in the NGO Newt. First, we need to inject our data service so we can do driving service and data service and then another ngoni admit that we can do this store data service dot You got data. And here we can pass environment no tape, EU era and and slash Then we can say its be slash courts slash this I d. So we can do the start idea now, after that weakens of scraper, that and this should be data. And here began off to the council to see fair getting never save it. And when I click on edit All right, I think that's you startled server. So now think Lincoln addict, you can see I'm getting the Comintern bulls that i d. And it's likely corn, another court edit. I'm getting your Scott so we can use that content here and populate over fears here So far . Strike Think ah, we can select although toast similar toe how we did that in a world create good place so we can copy that so we can go toe create court toward component So if they go piece this, I can go. I corrects also ed or thirst property there so I can do that. And then I can say Waters also four. And I think his can urge, uh, this start content. I have a pair that good old data dot confident and this thought I d couldn't locate on. So I even let that now content and ready after this should be like this and for authority, this will be like that. So if I say that and know where you open the browser, you can see the court here. No, let's see vo putting another goat. Maybe you buy a word I'm saying so. If a that you can see slept about three overtimes stain And here's here's his goat. So now we have to add the logic toe update of court. So but we can do now is in other at it goaded component or a steam ill. Uh, here we have a matter. Gold safeguard. Let's change that to update goat. And here we can add that matter. It will be very similar to save course so we can copy that phone. Create goat. Good component. Odious. So if you copy that. Great. I don't need the snack bar code. So first, let's copy net. So no, I would base that here, and I can't believe that same here and there's head, maybe it over here, Breivik. And then And then what we can do is we can change that matter to up their data. We also need to add that. Then we also need to pass idea so we can do this door and then we can keep up, will start also creating lips. Change that to at the data and let's create a metal code, updated their own over service. So if we go over service and be copied this and we taste that you can do that up their data and here instead, off post, we can do put. So I suppose that will be it. So let's see if it works. So if I go back over course, who leads straight to edit their first court and let's and update here and I click on a bit So here you can see the opportunity. So they're straight to change out to do so. If they did it, you can see the authorities a libertarian strain 25. Deleting a Specifc Quote: Now let's see how we can add the lead court functionally to two over application. So let's go to the court. No, it's the open gore start component daughters TML and he is in a Fleetwood and we can, ah, click and we can call a function late court. And then here we will fossa i d off the court 31 lead. So you say go goat I d So now let's create this met to So if we go toe Gorsuch component RTs And let's create that at the end and we pause the i d No, we need toe gold. Ismet it there Skopje's we can see believe data and here we can pass Cordes and then slash i d. Now we can create that matter Leak Tater in our data service. So what we can do is let's just copy that, I think let's copy this one. So it started off everyone boss que instead of get we can see delete. So now if you go back to a browsers and be click on maybe there see the lead to sleep the last goat movies, some court. So if I clicked late Okay, so we're getting one No Sure way. Let's Signet s 42 what you do if you're slash But let's for C. If we have that quoting numbers, I will open a probable. And when I goto collection, and then courts hit it and they can see okay, that God is not there. So let's say let's try to remove a new court here from there. So if I click delete, So Okay, here I am getting count one. Okay, so, bleach request It returns with how many records they had need to. So their side is going to cut of one. So no, if they go back here and that he fresh it, so if they see the last court so tight. So this had been treater. So what also we can do is we may need a way toe lead, that coat from our indexes. So let's see how we can do that. So first we will go to over its chairman, and then here in the end, before we can pass. Let I go to FedEx, then here, pick a bus. I This is over, indexed, and then we can do this door courts north the place that we can do I d here? We could both index. Then we can do index coma. This should do it. So no. If you go back and let's go back to the last page and try to remove, this is a quote. Let's move this one on it. So it's removed. Now, if you go back to over database and fresh so you can see this court is not there. 26. Adding User Login Functionality (part1): No. Let's see how we can at Logan and Logan. Fortunately, Dean of replication. So first we have the lead, Ah, menu on the top, right off of replication. When weekly conduct, Burton and that operate will open a menu which will have logging and local presence. So let's see how we can do that. So first we will go to over abhorred component George Demon. Here, let's duplicate this Wharton and for the I can we will use more. What? And let's remove that out. The link here, here we connected Directive Met Menu Trigger four. And here we can pass. Let's say owt. No, let's create a menu met, made new. And then you can write or ethical to Matt menu. No, we can add buttons. I met menu item uh, Logan and the second Reconnect logo. No, we need to goto material. What more do tortillas and we can import Met menu More do and then we have had it in the Export city. Man knew more do So now if I say that and go back to the browser, you can see a vertical button here. If I click on it, you can see two buttons slogging and low vote. So know what we need to do is when we click on log in level, open lobbying for and then we will conduct. So now let's go to our command line and let's create a new component for I would log in page So we will say N g c lock in and then for more deals, baby pass at no. We can edge about four of it component so we can go toe after routing more do. And then here we can add a new Route four. Lock in and then here's in the component. We can write Logan component, so no, What we can do is we can go toe a component or test Eamon and we can have dropped the link here and we could say Log it. So now if we go back toward Broza and we click gone all right, we need to the start of a server. Now if we go back to a, grabs it and refresh the page and then quickly can log in the year the attractor to the loving page. So let's for conduct. Now let's open log in pages. Tamil and I think we can copy the create court component html here. So if we copy that in the log in component esteem in and here we can at lock in and here we can see and the email. And actually, we don't need to use tech stadia so we can just use and put and then we can remove it from here. Should be email. And here we can, like, maybe he made. And then, second, we can use the phone field for Boss Word. Exactly. We don't need that too. So we can use input here and here. We can use that type equals password and for the name and the model we can use bus with. Then for matter, we can use Logan and the text should also the log in. Now, if we saved that, we can go back to the browser. And although we have retained the placeholder here and to prosper, Okay, so, no, If I say which you can see and email and enter passport no, we will create the logging matter. So what we can do is we can go toe flowing component or ts making clothes, other ones. And here we can't write a matter for Logan. Let's first create a new service so we will create a new or service or what we can do it and G s for service. And we can write off here. We can go toe over off service tortillas, and here we can add two methods. Log in and the 2nd 1 is logo. So first, let's work on logging. So first, let's inject as to tp service way will do. Favorite as to dp then STP late glint No, no, we can go pee the court from data service. We can copy this one bulls data and actually, we will copy only the intern impart. So if you copy that and here we expect Ural and data a bit past you are out there and data . Actually, what we can do is we can't specify the U. N here, so we don't need to specify the so What we can do is we can do environment dot k p a urine and then we can do user slash Logan And no, I would love in met. We'll only expect data. So know what we can do is we can go back to over long and component. And here's we can add two properties e mail and bus food. No, we can injectable data service here. Brave it. Data service and NATO service. Now we can go toe over Logan method and at cost poor state sticker, too. You met. Should be with this story, man and bustle. Er well, we could start possible and know what we can do is we can do this. Or data service Note. Oh, sorry. Actually, we need to import the old service so we can do about service. And then what service here. Then we can move their import from the press service. And then we can look what service start, Logan. And then we can fast this full street, and then we can subscribe. Quit and see what is the result. So we can love it to the council. And now I think this should work. So let's see if the start of a server and we go back to our application. Oh, date. We need toe area ourselves to a model so we can go toe ATM ordeal tortillas. Sew up. Not more. You'll tortillas and we can never service here. All service. Now we can go back to our application. And now I click on looking. And if we enter my email, I think yet that may not sure and password. So now if I click on Logan. All right. Okay. So let's see what that is. So maybe I think it waas maybe users. So let's straight one more time. So if we add at the net that men don't fall and that's where it is password and click on Logan. All right. Oh, okay. This is posting to slash user slash hoping this should be eight p slash Use a stretch. Logging now. This should work. No, you played a at me slash admin. Dakhil and password. No, you can see we're getting there talking back. 27. Adding User Login Functionality (part2): no. After successful Logan, we can save the token that we got back in the local stories so we can do local stories dot said Datum. Then we need to Bosque so it can be anything so we can see courts and Ghoula dopkin And then we will use Jason door string if I and then we see the data that we go back after logging. So no wonder Stavis again. So if it'll mean that it at me dot com then boss word Now if I hit log in and now we go back to a replication and then local stood it. You can see the courts angler joking here so we can check for the token. If it is there, then if the uses goes to the Logan route then we will reject the user automatically due course space. Also, if you use this talker to check if we want to show, let's say maybe Eddie told lead wouldn't or create course with them. So let's see how we could do that. So here we can see in the Logan constrictor. We can check if local story dot get datum, then course Angola. Then we can direct the uses toe the course pay directly. So maybe this Lord doctor, we would create that navigate. Then we can pass course complex. So what we can do is in every constructor we can do Foca. And then look, you can afford that. Now it should go back to our log in page actually ordered the director. So if we go, let's let's try it once again, if you try to go to log in and let's refresh it, So let's check what is happening. So if we quickly the console is loved in and as click and right cause so no north. So now if they go back to my log in tow, okay, so you can see I'm getting is logging. So if I go back to log in so you could see em oddity rejecting back toe the course space. So this is that fine? So, know what we can do is I think this really good practice If we move this court toe the service. So in the service, all store service tortillas we can check if they use it is looking okay. Based on the value of local story, we can your, uh, do board force so know what you can do is instead off checking the token each and every time here, we can see if or service dot is loving. Then we can distort your never get course component. This should work the same V. So no there. See if it is working. I think it is working. So maybe there's once again so you can see we had rejecting back to a poor state. So this seems to be working. So know what we need to do is we have to conditionally show and hide the elements. Own certain peso on the course paid. We don't want to show a detained the lead, but to the user who is not locking and similarly the create so there. See how we can do that. So let's open Gore stored component or rest Yemen and come born in tortillas. No weak, No, we can inject that. All said Miss here and here we conclude of it. Evil is logging and before value really falls and here we can check if their use it is blogging. If our service thought is loading began said is logged in very to true. So now what we can do is we can go here and conditionally. Sure, high this button. So if we do and you've and here we can do is love it. And I think this is right. Confirm it by this also, we needed here. And also we can addict here, so no, let's straight once again. So currently you can see I'm blogging because we have a token here. So if I'd lead this broken and I'll be fresh the speech you could see I can no longer see And you can live with it. And also the I could eat good wooden. So no, but we need to do with we care, Logan. And here. What we can do is at me dot com Pen bus would now, if a logging Okay, so I actually have to air that you take path here too. So what I can do is click and use the same court here. So now you can see straight one more plus more. So it's very efficient. We cannot see any total eat with them. No. If a Trayvon's again and I log in No, I'm redirected back and I can see these ones 28. Adding User Login Functionality (part3): Now let's see how we can conditionally shore high double log in and Lagos many items. So let's use the same method that we you'll see never gore scum Boehner. So we can goby the gold off the constructor here in the course component and we can base it toe of it, have component. So also, we don't be there, does it? It is so we can remove that we have based on the court here because of a long in a load button cell here in AB component orders Chairman. Now, if we say that and we go back to her brother, you can see currently it is not working because we also need to add Andy if statement. So if we go here and the head and if and here we can add if not loved him. Note is loving and four logo tweaking use it is locked in. Now if you say that and we go back to Roser, you can see currently we're getting logo course we're currently looking So if you go back to over application here, you can see currently we have a broken so that means we're loaded now. There is the problem So if I move this token and no way the fresh it now complete, you can see we had not logged him. And now if I log in again with my credentials so I can see administered at mit dot com and for pasta, we can say possible. And again I'm looking. And now if I go back to our menu items you can still see there is logging. So there should feel of him. Sorry, logo. The problem here is at your component. Tortilla scored, will fire or Levens when we start of replication. But when we like opening Andy Doubt. So here we're running the code again and again. So we need to find a way to check vendor out changes. So we want to find if and it'll changes. We want food on some court in our apple component duties. Actually, there is a very simple event. So if we say in the throat slit, we use activated Vint and then we can pass it some matter, maybe without days. And now if I create that mattered here, never have component. And the let's console your club working. So no, If I run this and now, if it change any, though You can see we're getting working again and again. So no, we can addle gold here. So? So that it works. So if a got this court here and again basted here so no, we have Where'd this year? So now if I save it and I go back to our browser So currently you can see there is a local put Um, So now if we try that again, if I delete that broken and refresh our application And now if I log in again I mean that ATM edotco and password is bustard. Now you can see we're getting low boat here. Actually, we can define it for the soul instead of using the if statement. But we can do is they can directly assigned Never mattered here. So if we can do, is loading equal toe the start Officer distort Islam. So this will also work. So now we don't need toe ad false here too. Now, if I save it, you can see we're getting low out here. Also, we can define our cord in the Gold Star ts file. So if I go here and instead off this if condition we can base that good. This should work also, I remember I I did it in logging, not component or tears. So actually, there it is. Fine, because we're not assigning it to something. So now if we go back to over after camp, we can hear the logo functionality. So if we air mattered here, click on local. So no, we will create this matter. And no, if I go back here and create that method, so what we can do is we can call over law goat method here. So what we can do is this start what service dot longboat and then But we can do is you can subscribe to that method and here we can fast data. And currently we haven't been that matter. So their sway. We're getting this now let's to inject laughter here. So what? We can do it. And then So what we need to do when we love what we can redirect the user to the log in page so we can do this. Start routed door navigate and then began bus Eddie spread the word components so we can say logging component. So now if you say that also, we need to create the logo. Matalin ever off toward service tortillas so we can go toe over off towards service 30 years. And here we can't right over method. First, we need to fetch other talking from the local story. So what we can do is we can create a constant food, maybe access token. And no, we can use if local stories don't get datum and cords angular. Okay, then we can do access token. It could do just birds. And then we can pastors get datum sing, and after we get that, we know we have I d field, which has a token. So then we can pass it. Actually, we need to use left here. So know what we can do is we cannot put it to the council and see if it is working. So no. If you go back to your brother and we click on low goat, you can see we're getting the access. Tokcan, would the i d. Here? No. We can send the boast progressed through of a logo drove so we can do Stotz post. Then we can go pretty throat and we can change it. Do logo. Also, we need to pass the access token here. Enough very street So we can do exist, Okun equal to then we can use over variable and for data we can purse empty object Now if we save it also we need to make one more change. So if we go back here, they never Abdullah component duties. We also I need to remove that open from the local story own successful low. So what we can do is then we subscribe to our local method. We can do local story does remove item Then we can pass the i d from here. So this should be course Cingular token. So also, sometimes dr dot navigate poses some problems. So let's Jews another method never get where you wouldn't. So then we can part slash flocking here And now if you say the fight and go back to our Broza, we can log in again. And in course now if I click on blow goat, you can see we are re elected to the logon page And if we see here, there is no token 29. Using AuthGuard to Restrict User From Access a Route: No. We will see how African allow or disallow the user from navigating to assert a note. Now you can see can't leave yet nor clothing because we cannot see adequate nutrition and also the creator. But if they like that part in the those that you can see, we can never get toe that your So if you won't do disallow that we need to use about cigars . So let's see how we could do that. So first we will go to overcome art line and we can day nd generate God and guard name can be the old So now we can go toe. Ah, good. Both guard duty. Yes. What? God has various methods or God has remitted. So in this example we will be using Ganic different method. So we will see if you want to use is to and to certain job. So currently, fee use that route. It will allow the user because fear turning through him. So know what we can do is we can injectable or service here so we can have a constructive here and Breivik about service and service. No, What we can do is you can check. Is we start Our service dot is locking. It's the first figure jacket nor clothing. So here we can. It doesn't close. No, What we can do is we can go to our without files app. Drafting moral duty is and here a never vote. We can use Ganic, David and then here we could foster God. So if you see off guard here So now if I save it and then I can restart a server now if they go back to the browser and the fresh the application and now if it take to go to create wrote it won't allow it so actually couldn't leave. There is one more problem. First, we need to inject oven off guard in the Act model file so we can go in app, more duties. And here in the providers, they could see both cord. Also, I can make one more change in the old guard, so if they use it is not logged in. We care detector, user toe, the logging pace so they can injector after here. And then we can see this thought Now their daughter never get value it and then we can go toe slash Look. So now If I say we then go back to the browser now If I tried to go toe get your throat, you can see I am rejected toe the logon page. So this way on whichever wrote we about where this guard we can added way going to a protein moral duty is and then we can add this can activity. 30. Making Requests as Logged in User: Now we even see how we can make a a pair quests using logged in jersey. So now if you try to log in and we try to create a new court and save court, then gored, great to successfully. But what we have to do is we need to go back to over loop exit and we can define a sealed room for, like, the only allow writing over a p a. If the user is locked in. No Vivas, then see how we can add exist Okun similar toe we added in the load matter and then make a successful a pickle. So let's see how we can do that. So if I go back to my blue back application that is running in the background and I stopped the service and now I can do l. B is here and now it is asking us to select the mortal. So we want to use for more than a long and old matter Sen Properties and then right any unauthenticated users and explicitly denying access. Nine. Theory Start of a servant again and the any special bait here and left straight to create new coat again. A new court, please you. And now, if I click on save, you can see I'm getting in. Edit. Unauthorized user. So no, What we have to is we need to pass the excess Tokcan. Similar to how we bastard with local wrote. So let's see how we can do that. So now if you go back to my court, I can go to good, good. And here I need to pass the excess token. So first we need to get Texas token. So, actually, what I'm thinking is we can create a new method in the or service which will get us tax stroking. So what we can do is here's we can see get taxes total. So here we can copy this court, and we can do this then, actually, we can change the court here toe, if you like. So we can actually do goes Texas Tokcan equal to get this. Don't get extra, actually. See? Miracle. So now if they go back to my create code component Doughty s, What I can do is I can inject overs or service here and we can import it. No, I can t consent here for exist Article two. Then we can just this sort out service start get Texas token and then here we can fall so excess spoken equal toe. Then we can use Techsystems, so this should work fine. So if we save it and they go back to Brazil active, let's your street sort of replication. So now if we go back to Broza and currently we're looking So let's try to create a new post a new post or court after this year. And now I can select the altar and I can save it so you can see the gold held in pewter successfully. And we can confront me play going to the last page. A new go off this year. So now if a logo because I made some changes there, so I click on logo. You can see we are reflected back to loving. So this is working, Frank. 31. Installing Ionic CLI and Creating New Project: now let's work over Ionic Mobile application for this. First, we need to install a couple of packages. So let's open over smiling. And then we can install two packages Gordo and I only so we can under falling month and GM and stole I Cindy to install the packages globally. And then we can write Cordova and then space. Ironic. So this villain stole both the Pakis with the same part and the same. Now it will take a couple of minutes, so sit back and legs. I will be very planted Finishes now to confirm this mission we can run. I only hyphens e and to confirm the Cordova insulation we condone Gorda movie. Now we can create ever ionic projects. So we will go toe over courts folder again and we will open up my lane here. And then we can day unique stucked and then the name off replication. So this will be course ironic. And then we can use a template. I, like, comes to it. I think three redefined templates. So if we go toe any framework dot com and click on get started here, we can see we have offshoot does like three templates, so you can select blank Debs or side menu. In this application, we will use the side menu template. So now if you go back with my lane, we can take save menu and placenta. Now it will ask us cities of questions. Would you like to integrate toward me? A pit Cordova toe target 80 i wason entered for No, I would use No. And now it will install the dependencies. No, it will ask us to install the free ironing press ticket for no, We will say no. And now our project has been cleared to successfully. So we can they never directly to our new project. So we will say Cordes ironic. And then we can run. I only now it feels start of a server and it will open the browser automatically for us. So here you can see our I only application with the site menu. So if I click here, you can see the side menu. And here there are two items terrifically. Analyst, we can see the list difficult. Call a list item. You can but does the list. Right? So if you go back to home here, you can see the homepage. No, the best way would be to open over Developer council and then we can click this cycle mobile device tool were And here we can select our device, whichever we want to target. So let's say if you want to get next to six p, then we can target that. And now it's very fresh that no, you can see more than now my view. So now if you go here, you can see it will look something like this own over mobile. So now if you open our project and never edit this and here you can see our director structure is quite similar toe the every great with anger silly. So it by default to uses a CSS. So there will be a CSS files that we have created in Anglesey later so and start off components here we're using pages, but they're very similar. So as serc or sources, a main directory where we will be changing or creating all the oil. So if we go to our pages, then we can see our home page here. So if we open home northwest Yemen and let's try to change hold up dick and if they save it now. If they go back to our browser, you can see the Jane has been created automatically. So I annex Ely comes with lively Lord, similar toe anger. Silly. So we don't need toe refresh our webpage each and every time we want to see the change. 32. Creating and Lazy Loading Pages: No, let's create some new pages for that. We can go to overcome our line and we can stop the set of it. And ironic also comes with generated utility similar to the anger Seeley. So we can use this toe. Create new pages. So let's first create a page Forever Court's list. So we will do ironic T or generate. Then we'll save Paige than the name of paid. Of course, the next spirit we need is create goat. Then we can add at it good and we can there log in pitch. No, we can go back to a predator and we can delete over home and list pages. We don't need them. No. And now we can go toe over at more useful, and we can delete whole Mentalist pages from the declarations airy and also from our entry components. And also we can delete the imports here. So now we can inject over pages here in the Declaration Eri or and and Trickle Boehner's. It will work, but the problem with that is ironic will try to load all the pages before we see anything in a replication protected. This we can use lady lording in angular, so we don't need to import each and every page here in the F model. So what we can do is we can lazy load them whenever we need toe you certain page. We will only be loading that page so forth. This we can go to overact component tortillas. We can remove these imports here and then but lazy learning our page. What we can do is instead of importing the page, we can use single course and then the name off our page. We want to use court spade here so we can go toe course tortillas and then we can copy this glass here and then we can paste it here. Also, we don't need to import it. So no, we can commented out because we don't have home page and respect here with Blair that later and no weekend start over several again with I only so no. If you go back to our problems, you can see over. I only kept in the beginning. It is loading the course paid because we have defined it here in a app that component tortillas and root paid equal to coarse fish. No weekend populate herbal Reggie Seri. And here we can use courts. And then instead of writing component, we can use a property. Maybe, let's say page and then we convey course. Pay here, lock in and then for page reveal use Logan bitch looking pitch. Also, we need to changeover data typing toe page. And also we can use ever set true toe days dot bitch. No, If I save it, we can see, of course, paid here. No efface wife from the left. You can see the menu here. And if I click on looking, you can see the log in page. And now if I swipe again and click on course, you can see the course space in the coming lectures. I will add Aiken at the top left in the header. And when we click on that, I can. Then it will open the menu. 33. Creating Quotes Page UI: Now let's work on our course. Pay you it. So let's go back to editor and we can open course toward its chairman. And here first we can add a new button that when we click on that button, we want toe open, the many on the left. So what we can do is we can add a button here, and then we can add I unbutton directive here and in that we can add Aiken, I am making, and the Eiken that you want to use is menu. So now if I say that and go back to the browser, you can see the many waking here. But now when we click on that, nothing happens. So no, we What we can do is we can go back to your editor and in button, we can add a new directive called Menu Double. So now if I saved that and go back to the frozen, you can see some styling going over. Many awaken and manically conduct taken. You can see the menu here. So know what we can do is we can add a lion list or Ionic list to show over course. So let's see how we can add that so first we can do is in our eye. On phone 10 we can use our list and in that we can use on item component. And in here we can use, let's see as tutor. And here we will use over her name that we will get form of the server. And after that we can use a paragraph. And here I am used Emmett. So it regionally text for us. And now if we save it and go back to the browser, you can see right in here also, What I want is I want to show the whole paragraph instead off clipping the texts. So what I can do is you never tonight Weaken aired another director deck stripped. So now if I say that and go back to the brother, you can see the whole text also, let's try to go Pete two or three times. And now if I say that you can see the three course here that we will fetch from seven. Oh, sure I want is I want to create a new Aiken on the top right off overhead. And when we click on that, I can I want to go toe create court based solar CEO. We can hear that. So first we will go below the entitles and in here we can use I am bottles component and then we can pass And here so it will add likens at the end off head. So after that, we can use over button and then I want to pass. I am but in directive here and in head, we can use the Iron Aiken with the name off head. So now if I say that and go back to the browser, you could see that Bless. I can hear No when I click on that. Plus, Aiken, I want to go toe create court pace. So what I can do is in never button. We can add a click event and here we can pass a medic. So let's say own good to could he ate garbage. Now let's create that matter. We can open our course toward PS and here we can add that matter. And now what we can do is we can make use off over nap controller toe, push this page on the stake. So let's see this store now. Controller dot Bush, then what we can do is could you get good? So if you're wondering how we know this, you can go toe create court 40 years and GOP this class and then you can base your to you. All right. Now, if it saved that can go back to the brother and I click on Plus, Aiken, you can see we have navigated so that create good page. So here you can see we have used a push matter. So we're getting the backward here. There is one more method. So instead of bush, if we use set fruit, then it will set the root off our page to the page. We're navigating soul now if you go back and we click on Plus, you can see we're navigated toe the create court page. But we're not getting the back side, so we will stick to old push matter. Here, hold. Let's again check If everything is working now we go back over course space, and when we click a plus sign, we're never getting to create court page. And when we click on back with him, we are again back whenever course space 34. Fetching Quotes From The Server: No. Let's see how we can fetch the data from the server. This will very similar toe how we did it in the anger application. So let's see how we can do that. So first we need to open those start over more good TV set, so we will go to ever course server replication. Unless to oh, goody, you can start more goody from any of you. And then we can open this tab again and start over Server application server No, with no dot and now over. Several is running. No, What we can do is we can open, are projecting some other edited, and we can use the same service that we created in our angry application. So if we go there and see our data service of a gored will be very similar to this. So first, let's create a service. Or in Ionic, we call them providers. So what we can do is we can close of a service, and then we can run our Nick G or generate, but away did. And then they provided me. We can use the same name. Let's say data. Now, if you go back to your editor, you can see a new providers folder And here in data you can see our provider here. No, let's first create the environment file for adding of ah, base a pay urine. So we will go Dover source directory here. And then we can add a new folder for environments and then we connect and environment is no . Here we can export a constant similar to one we did in the angry replication ghost and then environment. And then we can use a pure you. And here we can possible AP urine. And it is Sgtp local horse. And then So if we try to look in other angry replication and environments environmental ts you can see our final is very similar. Also, we were trying to keep a replication very similar toe What we did. You never angry application? No, they're Skopje. They get better from over data service. Actually, we will use all this method. So first, let's stick to over. Get matter. So here we can go to our data service here and then began. Best us here and now we can go back to over courts dot ts fight and here we can inject our data service over here. We say it provided its option. So data. But what he did here. And no, we cannot A new variable called courts. And then here we can do this. Talk data provided dot Get data. And here we can pass the U S. We can use environment dot take a urine, make sure to important environment file here, and then we can you slash ap slash goat No weakens of scrap toe this matter. And here, let's use data, and then we can pass this the courts and a sign over data tricked. So, actually, let's first out put it to the council. Now, if I saved that and I go back to the browser, correct? I need to start a server so I can do, I think self No, I can t fish it. All right. So you can see we have a better here. So if you remember from the angler application we need to import this is due tp klein More do. So we will go back to over Abdullah mortal fight. And here in the imports, we can see s to Tippi client more do So. Now we face a that you can see of course here. So currently we're fetching all the course. So in the next lectures we will add page emission and our replication toe. So now, instead of damage text, lest use our code content. So we will go back to over gold stories demon and no, we can remove these extra on items and here we can use over and the food and then go off course. And here in the paragraph, you can use gored door content. So let's say that now. If you go back here, we can see all over course here. All right. Now, if you can see that output in the council currently, we're only fetching a coat here. We also want to fetch the author with the court so we can use the filter here. What we can do is we can add, and then we can use include the nickel of adult immortal. So no, If I save that and go back here and I see the council, you can see the artery. Now we can use this author. So let's go back to our editor. And then here in the court started html No, instead, off her name, we can use court door alta dot name. Now we're save it and go back to the browser. All right. You can see the editor. Can it really property? Name of fun. Define so similar to over anglo replication. Know if we question mark here? No, it should work. Fine. All right. Let's also make que in the courts capital here. Never had. So we can do course. No, Everything is looking fine. So in the next lecture, we will see how we can add in finance scroll toe over Ionic application. 35. Adding Ionic Infinite Scroll To Get More Data: No. Let's see how we can had in Finer Scroll over Ionic application. So first, instead of floating all the courts from the server, let's try to lure only 10 courts. Then we will use in Finance Scroll and then we be lured the data in the inclement manage. So let's go to over court store ts. And here we can define two properties limit and then skip. Let's give the initial value off limits then and for Skip. Let's see do now we can change the Yuelin of get data met and we can add three to then parliament. We connect limit and then should with this start limit and for of Ah, skip, we can add another filter. Skip eager to North Cheeto. Actually, this should be this door Skip. Now, if we saved that and go back to Brazil, you can see we're only fetching 10 course. No, no. What we can do is we can go toe I only documentation and then we click on a p a. And then we go toe in fine art school. No, we can use their know If you see here, it re shows something like that. No, we can copy this or we can like this. Let's copy that. Now we will go here in never court started. Steam it and we blow over. I only list we can't use this matter. No, he can add that matter. They never court store tears. No, if I do it large side, maybe you hear. So know what taken do ways. Let's first try toe long something for council here in a finite growth. But so no, if we go back to the browser And now if I go to the end of the page, you can see in finance school is working all right? No, What we can do is let's assign our skip value This dog skip classical too this store limit . So this means whatever the current value off skip variable is, we're adding over limit to that. Now we can copy the court from a constructor here, and then beer stood here and at the end we can call if you don't complete. So this field close of function also here, instead of in signing the data we need to upend the data. So first we can check if they did, and then we can use foreign law for let die data. Then we can use this door. Quotes don't push and then do top. And that Ivan Evil. Now if they saved that and go back to the browser. So currently, we're loading 10 courts now, if it go here. All right, Now you can see we're getting another 10 cords. No. If we scroll, we get either another 10 courts. 36. Adding Create Quote Page UI: before working on the create good page. I have found one problem with the scrolling, so let's fix that. Actually, we have used Flitter instead off Inter. So they're saying that no, it should work fine. And now let's circle never create court pitch. No when we click Cone Plus Aiken the page that no, you're seeing people led the form here and then every Vulcan so we can save that. Go to certain. So let's go back to your editor. And no, we can close all other times and we can open, create code and create Courtis chairman first. That's saying that I do. Can you go now? Let's Adam form so we can go toe. I'm content and begin a list here. And then we can hurt i n Aktham. And in here we can add I am living And then we were used offloading level and for liver. People say content and then we can use by an input with type. Oh, next. And then we can see that now if we go back to our problems of you can see we have a contract here bread with click on and item or input. You see other literally floating. So if you're wanting, where can we find which in port old with tax we can use? We can go toe I look documentation and here in boots we can go toe floating levels. And then here you can see how we can use affording livers. There are other matters to whichever you prefer. All right. Also, we will be using Select Forever artist list from which weakens, like author. Solar said that now. So what we can do is we would create new I an item and and fourth level we can use or let's say it's wrecked. And then we can use I in select and in here we can use I am auction and then option one so similarly weak, unaired other options. Also, we can give over in person a so Orion input we can maybe use contact. And also let's give it a and the mortal oh contract. And similarly, for select, you can use some name KFC authority and for any model we can use authority. Now we can go back to over treat gold. Yes, and here we can I content. And then now if you say there can go back to the Brazil and click on Plus sign. We can see your content here and our auto select books. Also, we can add the floating directive to over slack daughter so we can do for looking Oh, so we can add a button that save court level. And then here we connect I in Britain directive and then also we can a block you. So if you say that you can see we have a court here also, we can wrap of Roberton inside of the region and you can add Oh, padding directive years. So if I say that now you can see it looks much better. 37. Creating and Saving a Quote to the Database: Now let's first fetch other authors toe popular towers like daughter field. And for that we can go toe, create goto tears. And here we can add new property For what? This and no, we can injectable service provider. And here what we can do is this golden provided dot get data and then we can pause of it. And what makes people and then slash this And no, if ice of striped with that here we can have dinner and then we can do this store about this equal to did Also began output the letter to the council. No, If I save that can go back to the Broza. You could see about three authors from the database and now I can goto create court orders , Jamil And here in the an option they can add and you four and then a little authors And then what I can do is here instead off option one I can use author got me and I can Blaine , though value property off I an option. Do author dog Heidi? No, If I say that and go back to the browser ironically, conflict daughter, you can see we have three daughters and we can select anyone off them now, even see how we can say over court when we click on the favor. So we will go back to your editor and then here it never safe court with him. We can add a public event, and then here we can call a matter, don't save court and no create that method. And let's goal, uh, content And this dog look, today we're seeing working. So no, If they go back to the blows it and tight over new court and then we select the author will be a libertarian strain and no, it click will see, you can see over content. And then the idea thought, Now we will see how we can save that data So they will go toe over data service or data provider. And here we can add the Bull Street omitted. So for this, we can go toe over angry because and here we can copy the whole stadium it informative surface. And now we can copy that in other data provider, we also need to import as to tp headers from angler communist you tippy and know what we can do is here first Let's create a constant four, maybe posted and we can see going 10 This story content and authority the stone or training . We will pass it. Data toe our ball state omitted in the do double. So a left school over post data methods in the data provided for this boat It up away, the dog posted emitted. So nobody expecting urine and data for data Hollywood bus. It's bolster the constant. And for Julia David Hughes, if you had it slash gay slash course. And no weekends off script quit and every false data. And here we can put the data to the council. All right, Now you say that. Then go back to the Broza and we try to create a new poll store court. So, new court, I think. And we select any OTA her breasts. Okay. And say good. All right. So we're getting in, Adam. So you're getting in a not very gentle. This is due to event. Were working on our angular application. We added up a sealed rule to overlook back application. So for testing, we would remove that there, and we will add that on the latest image. So what? We can do is began open our course server and here in the coma mortals and then under gold or Jason we can remove this year. So now if you say that and now we need to restart a server. And now if you go back to the browser and I tried to save it again So let's state again. New court unique and then select OTA Press OK and said What now? You can see the quote has been published successfully, so if we go back to over course speech and now if it's screwed, you can see our new court here. 38. Validating Create Quote with Server Side Validation: Now let's see how we can very late over data before saving into the database. No, if you remember when in a blue plaque application we have rated at a quiet field. Oh, never court content. So if you go to over Cordy, never server. And here, Post, if we don't add anything for the court content for the court and straight out, you can see you're getting an editor. The content can be playing. And similarly, if you close that and cyclical save court, you can see the editor here. So if you see here, you can see the other and then detail and messages content cannot be playing. So what we can do, is we? We sure toast similar to snack what we used in over the blue replication, so show this message cannot be blank. So then users don't put anything in the content and click on save. We sure toast message. So to see how the toast messy looks like we will go toe our nick frameworks slash talks. And here in the a p a. We can click on toast controller And then when we click on anybody in here, you can see we will see us message similar to this. So how we can use it First we will A or injected tau escandalo inner its constructor and then we can use this method. Toast Controller, Don't create. Let's go back to readyto and interval Create goto ts We can inject those control a raped make sure to imported here. No, we can go back here and here. We connected the second pedometer for at a and then here we can pass headed here the look on so and know what we can do is we can use this store cost control dot Could he admitted and then we conduce to properties message. There is some error and then we can pass direction. Let's use 3000. That means 3000 milliseconds and three seconds. And after the create method, we can use present. So now invasive that and they go back. And now if I click on save good, you can see the editor here and you can see there is some edit and it goes of a in three seconds. Instead, off editor here we can use hate us And then if you save that frankly, Kansi So here you can see the other. And then we can use this contract message here. So what we can do is we can do edit. We have done that in the angry replication toe. So it is messages, start content and then Joe. So now if it copy that and instead off, this is a matter I can see quote, and then I can come get in it. And here I can see headed dot Then the statement that we could be. So now if I say that and click on save court, you can see gold. Can it be plank And no, If I put anything here, I mean anything who select author and then save good. You can see the cold has been created successfully. We also want to show that most message the vendor Courtis creators successfully. So we can copy this and based or two. And here we can see goat creator successfully. And also, what we can do is we can erect the user to the court space so we can do this. Start never controller here. We want to use said True And they showed you earlier in the reduce set fruit and we can see gold bitch I think it is Gore space. Let's confirm its core speech. So we will see port speech. And now, if I save that and go back to the browser first traffic click on save court. You can see court tended to blame and know if they enter some content. This is another gold and then select the altar press. Okay. And I click on save court. You can see gold creatures successfully and you're director toe the course page. So now if I scroll down, you can see this is another court, right? 39. Editing Quote and Saving to Database: No, let's see how we can add the redcoat functionality. So Fortis NV click on anyway, the state and we want to open action ship. So if we go back to over our nick documentation and click on components and Actions shoots so here you can see if I click on show action Shit, you can see a menu like this will pop up and then we can add added and the lead items here And from there we can go for So let's see how we can add that. So first, let's go back to our editor. So here, a never core store T s file. We will inject, execute controller, Actually, if you controller and know what we can do is we can create a method, then actually shoot. And here we can do this. Start actually shipped controller door, could it? And then for title, you can use model plane. Good. We can add a bottles here, but first relayed the edit button. So for text so we can see headed. Then we can add a handler. And here we can see Ed cool the next object or the next wouldn't be village is the lead. We can see text baker toe delete So there are some pretty defined through to so we can use route through destructive and similarly we can add handler function and console Look low lead court And for the turd item, we could use text over cancer and then the whole is cancer and then for handler we can use against alike should be handled And at the end we can pause present here. So what we can do is and never good story champion Whenever we click on any item so we can They're the public event here so we will see present re check once again So present action shipped So this will be is en execute And now if I save that and go back to the browser Never click on any Aito You can see we have a execute So if Italy can addict, you can see that it court perfectly complete You can see it lead court And if I click on cancel you can see cancer No, Let's see how we can edit a court So we will go back to overrated And here on the click event We can also pass the court here and no in numbers, but the interaction shoot met began. And court argument here and here in the edit handler. We can do this note never controlling door to Bush, and then we can see addict gored, bitch. No, For the second argument, we can pass a data so we can do coat and then goat. So this is a variable that we will use another adult court fish. So now if I say that and we go toe over arid code tortillas and here we can use over Napa ramps and here I can create a new, believable called court. And then what I can do is this door port picker toe this store. Grams don't get cool, so no, I cannot put it to the council. So now if you go back to the browser and the click on edit Good, you can see the court that cyclic canary because he it in the council. No, If you try to select another court, you can see the school to you. All right. No, let's straight Where? The form Here. So what we can do is we can copy that. Create code html data so we can copy this and no. In the edit court testimony, we can paste it. Also, let's change that title toe edit goat and know what we need to do is we need to fetch the author's first. So we can copy the court from here so we can cope it. And here we can do first place inject facilities and we will add a property here called authors. We also need toe properties for content can over. I think the court I d. It waas authority that we can confirm by going here in number eight, court authority and content. All right. Sorry. It should be data provided it should work, but let's be consistent. All right? No. Begin the sign the data to over variables here so we can do this. Thought content. We could do this. Start, go vote content and this thought. But variety taker too. This dot Good dog. All right, so now if I say that and go back to the browser and let's try to edit the 1st 1 and I click on addict All right, so you can see the outer here, but you can see the content. So let's see what could be the issue so Let's go back to the editor. All right, so here we have to say content. So now if I say that So we have to close that and we have to go back to over course speech and no, ethically canete it so you can see of it. Edit court based the ever do to because we're passing the goat here. But when we directly access this page, we don't have this perimeters. So we have to make sure we're going to our edit page from the court page at the verse, we would get there. So know what we can do is here in never added kowtowed esteem in we can change it to It's good. And here we can see born up food And no, we can add that method. We can copy the same metal form record RTs So let's copy that. And now we can go to a vote added co tortillas and then based you too. And instead of phone safe court we're using on update coat. Then here we can see update data. Who had it, Peter? And here we can say go updated successfully. And also we need to inject does control the heat for this candy 20 closed concern or it So we can use a pole state of metro for data provider here. So we have to add a new method. He never data thought ds provider. So we will go to over angry application and now we can go toe over data service and here we can Copia would update did omitted. So there's copy that and no, we can pay set here. So if we say that when we goto our Jared court and instead of poor state of the real news update data and now if I save that, then you go back over. But I was a Now I click on this at it and now I can change that too. There to see I will moved up. Did here. No way can click One upped it so you can see the court operated successfully message. But I can see it is not up Tater. So let's try to refresh the pay So it really fresh it correct. There is some problem. So let's see. Let's go back over that it does So actually we for goto ad i d here of envy air using the foot mattered. We have to pass the idea off the model. So what we can do is we can do this. Thought God does I d No, they should work. Fine. Now if we try to save it again and we click on edit and then we go back to the start and let's try to remove the delete and now weekly kidnapped it so you can see it is a pretty successfully. Also, I think, and start off input type text forever create and edit bay. We can use the text 80 there. So what we can do is here. He never carried code. We can't change it. Toe I index Sadiyah and we have continued here too. And also we have to change it here. So now if we saved that and go back to the browser. So when I click on the court and the neck, click on edit so you can see the entire court here. So now it's great, right? Located. So you can see update update here. Now, this is more clear. So let's remove that. I would know. All right, 40. Deleting a Specifc Quote: Now let's see how African leaders specific code. So when we click on this lead item, we're getting the lead court. So let's see how we can the lead actual code. So if you go back to the editor, let's close all the tapes. So if I goto court start, it's demon and let's go tortillas. So here, first, we need to add or inject our data service. And before that, we need toe create a matter in never data provider for deleting a court. So we will say the league data and here you buzz user, and then we can see it. Distort. Http door delete. Can you eat it? Correct. So, no, we go back to a word, Gord store tears. And here we can inject overly to service your soldier the injection. So no, what we can do is we can do this. Thought later, service or data provider thought the data and then for the Ural, what we can do is we can do AP urine. Ah, then a p a slash gold's slash. Now we need to pass over court, i d. So as we already have our good injected here so we can do good idea. So after their chickens have scraped with and here we can output with the council Gord successfully. Now let's check in the browser. So let's go to the last court and let's try to leave this one. So if Italy complete, you can see the gold deleted successfully. But it is there in ever list, so also really do remove the court from here. So what we can do is let's go to a predator and then in the good start its Gmail here, similar boarding the application. We can pass index here and also in the present court. We can pass scored and the index. So no, you never scored 30 years. We will have index and what we can do is this thought Gold's daughter. We can use the placement and then we can pass index and then what? Also, if you want instead of consoled or claw, you can use a toast controller and then show court polluted successfully. So let's go back to the browser. So now if I goto last court and let's try to relate this one new court, Ionic and I click on delete. You can see it is later from here. And it is all totally to from the server. They're straight to delete the 1st 1 Maybe so. Let's plead it substituted here and from the service, so fairly fresh it you can receive. All right. 41. Adding User Login Functionality: Now let's see how we can their uses Logan functionality to a replication. So let's go to a record later. And we can go toe over at British General here and begin at, uh, to new buttons one bill before Logan and the bill before no vote. And no, we can remove these. Also, we need to goto over Appert component tortillas and began the move This object from our pages Every now, if you say the application and go back to the brother, you could see logging and lover currently ethically contempt. Nothing happened. No, we can add Glick events here so we can their own Logan. And here we can directly key event. Oh, lover. So now let's create these methods. So here we can see on Logan. And no, another one week unclear tone logo correct? No, it never logging method. We can see this start no dot set crew and then we can see loading pitch. And now if I say that and we go back to the brother and we click on Logan were reject to the log in page. So let's for connect. So if I click on logging first, we can change the title to Logan. And no, we can add the menu I can here, so we can copy it from over course. Dorte. Chairman. So we can add that so we can go to a log in the rest schimmel, and they start here. So now if I saved that, you can see we have a when you waken here and no like n at the form here so we can copy create good form so we can go toe create court or the steam it And we can cope with this phone. And no, they can be astute here. And let's change the label. Cool. Amen. And here we revealed you, sire. Input with the type off. Next and name men and immortal will be email. And we can copy that again. And we set here we will use possible, and they will be possible. And name men and immortal will be password. So here we can use Logan, and then we can create method on look. So now if I say that and go back to the browser, you can see we have, ah, evil and possible fears here and Logan. But so now let's create on Logan method so I can go to Logan 30 years. And here I can add on Logan Method No, let's first create a provider for of us. What medication? So let's goto command line and we can see Miami get a real but a waiter. There's a boat, and now we can go toe over what's provided, and we can use a similar betters that we using over and your application. So if we go toe over angler application and then we go toe over post service tortillas, we can copy logging and logoed methods so I can pay. Start here. We also need to import Esther. Tippi had this and about in no admit site. So for no, let's just focus on over. Logan mattered. So if we go to Logan Dirty a snow first week in ahead, amen, and fostered fears here and first on logging began confirmed, We're getting the email password values. No, Ever see of that and a late class for you to the Stratus ever we'll start the civil so we would say an excerpt. Now let's re fish it. So no wife. If I heard at the neck I mean God common, then password and click on lobbying. You can see we're getting their values from the phone. So what we can do know is we can inject over or service here you can do, crave it both the weight addicted Let's put a waiter and then we need to be important. So know what we can do is we can create a constant forever data. That's a pull straight up. And then we can do. He built this 40 minutes and password This store bus word. No, we can call it start off parada dot log in, Then we can see Paul Strata so over Logan Method is expecting only the data, and then we can subscribe to this matter, and then we can add data here and console your club to see if they're getting any date of it. So now, if I save it and I go back to the browser, let's try toe logging again. And now you click on Logan. You can see the I. D. Has been the neutral successfully so were successfully loading. But now, to use this, uh, began publish application void events. Now, if we go toe, I like dogs, ironic dogs, and then we can go toe a p a and then events. So with events we can send and respond to application level events. So what we can do is we can inject over events here and then we can publish event, and then we can subscribe to that event any very never application. So let's see how we can do that. So we will go to over Logan tortillas, and here we can inject, You won't see it. And now what we can do is own successful Logan. We can see this dot events start publish. Then we can say any name that lets a user log in and then began pass as many parameters as well, like so in that case, data. So this is ever use it later. So, no, if I say that and let's go back to over after component tortillas and here it never constructor, we can inject Breivik events events and here we never initial Is that mattered. We can do this thought events Dort subscribe, and then the name of over. Even then this was the door clogging. And then we can pass a pedometer so that was ever used. The reader. So know what we can do is we can create two properties here is love in and then they use the property. So here we can do this. Start. He was a good crew. Use it and then this start is loading. Go to true. So initially we can set is logged into false and no, but we can do is we can go to over after arrest, human. And here we can check with the eighth statement if not logged me then we want to show the log in Britain. And if the user is logged in, then we want to show the local so no other straight once again, no. Currently you can see we're here saying look. Logging. So now if I do at me at liberated me dot com and then password. So now, Perfectly calm, Logan. You can see we had long been successfully and here you can see the Love Boat. So now what we can do is when we click on logging, we want the user to be redirected to the core space. So what we can do now is we can go to log in tortillas here and here. We can do this. Thought never control the DOT said Fruit, and then we can pass court speech. So now if you drive once again, we can add our conventions here. So currently you will see log in here. You know, if we add at at that window and password and I click on Logan, you can see I am a detector toe, the course spit. And here you can see the logo so currently difficult go low about. Nothing happens. So now let's try to will conduct. So if you go back to your call editor and here it never afterward, component or TS. But we can do no ways we can pass of a user very ever toe over lower function. So now if you go there, it can see use it. No, What we can do is we can inject overall service here. David Waas Both provide executive and know what we can do. No, we can call the load method. They start operator dog logo and we can pass data predict, and then we can subscribe. And let's so good something to the council. Let's see now We also need to update ever loved matter in the air service so we can say use it and know what we can do is so instead, off the start access token, we can say Use a thought i d. So this is a field that is, they're turned when we log in and it contains Alexis Tokcan. And no, we should be allowed successfully, So let's try it again. So first we can log in with the liquidation and click on Logan. All right, so here it is I d that we were passing in the bloat page. So here, when we click on logo so you can see soldiers see what is happening online. 56. Let's publish a new event here so we can copy this and accurate. There's a subscribe so we can go to log in here and then we can copy this and we can go toe effort, component or tears. And here we can pace that. So here we will say no boat. And then we're not posse any data? So no weekend subscribe to that mattered. And for that we can do use that logo tears, and we're not passing anything. So here Rayvon this store to use a loving Toby force. So let's see if it works So currently we're not loading. So if you log in, All right. So now if I click on low vote and I see here, you can see currently here is logging. 42. Changing Toolbar Color By Overriding Sass Variable: No. Let's see how we can change the color off the tool. Worry never Ionic application. We want to make the tools were the same color off over and replication. So let's copy Discovery in the over. So I am using an exchange in here cold Godzilla. You can download it from the growing Web store, and when I click oh, this you can hover over an ankle and then you click on it and then this color will be copied to the clipboard. Now, if I go back to the editor and I can go toe team and then very ever stood SCS is and I can based this color here in the primary colors now to change the whole world. Bagram killer we can choose the Ionic sauce very was that we can overwrite to see the list of sauce variables that we can use. We can go to our documentation, and there we can go toe overrating ionic very of us, and the very evil that we want to use is cool but and MD and then back down. So let's see how we can use that so we can go back to a predator and then here we can write You'll what? MD should be cool. What? MD and then bacon on. And here we can use the matter colors. And here we can use the word colors medieval And for second perimeter we can pass the color name. So here we're using family. So now if I start the server and no here you can see the color here also here When we opened the main new you can see the color here too. Similarly, we can use the Sospiri vis if we want to override like ours. Men knew all over the state. Um so now with this simple change, this app looks quite similar to over angler application.