Angular and NgRx - Building Real Project From Scratch | Oleksandr Kocherhin | Skillshare

Playback Speed


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

Angular and NgRx - Building Real Project From Scratch

teacher avatar Oleksandr Kocherhin

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

49 Lessons (14h 20m)
    • 1. Preview

      1:12
    • 2. Bootstrapping the project

      7:10
    • 3. Why NgRx?

      5:40
    • 4. Project structure

      10:18
    • 5. Prettier

      7:40
    • 6. Language server

      4:44
    • 7. Register module

      19:48
    • 8. Register layout

      20:48
    • 9. Installing NgRx

      20:48
    • 10. Installing Redux Devtools

      9:20
    • 11. Creating auth interfaces

      11:29
    • 12. Adding auth reducer

      16:26
    • 13. Creating selectors

      20:54
    • 14. Register service

      15:34
    • 15. Register effect

      24:23
    • 16. Updating auth reducers

      11:36
    • 17. Backend error messages

      18:06
    • 18. Persistence service

      13:31
    • 19. Login store

      16:49
    • 20. Login component

      6:05
    • 21. Topbar

      21:59
    • 22. Fetching current user

      21:09
    • 23. Auth interceptor

      12:16
    • 24. Planning the feed

      4:46
    • 25. Creating feed module

      8:00
    • 26. Preparing feed store

      27:31
    • 27. Getting feed data

      22:26
    • 28. Helper components

      13:02
    • 29. Creating pagination

      16:28
    • 30. Creating pagination part 2

      19:23
    • 31. Refetching feed

      24:04
    • 32. Implementing tag list

      8:15
    • 33. Implementing popular tags

      35:24
    • 34. Adding feed toggler

      13:32
    • 35. Creating other feeds

      16:05
    • 36. Creating article page

      19:16
    • 37. Rendering article page

      37:10
    • 38. Deleting article

      16:50
    • 39. Create article

      17:32
    • 40. Creating article form

      14:06
    • 41. Create article store

      27:18
    • 42. Update article

      40:11
    • 43. Settings page

      28:00
    • 44. Settings page view part

      28:12
    • 45. Add to favorites

      18:42
    • 46. Creating store for favorites

      16:42
    • 47. Creating user profile

      22:19
    • 48. Rendering user profile

      42:53
    • 49. Homework

      3:46
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

154

Students

--

Projects

About This Class

In this course we will build a Medium clone using Angular and NgRx. This course is fully focused on fast and deep dive into creation of real application with Angular and NgRx. We will start from scratch and step by step you will get close to finished real application. You will deeply understand how to structure your application, build reusable and understandable modules and components and split code into smaller chunks of code. We will write code together in efficient way to make it pure and avoid data complexity. 

For each lesson you'll get source code of the lesson, so it's easy to see the progress and get a working app on any lesson you want. 

What you will learn in this course:

  • Structure and configure project

  • Write high quality code with Angular and NgRx on real project

  • Create reusable modules and components

  • Implementing authentication

  • Cover everything with Typescript interfaces

If you are feeling like you learned Angular but you still still missing knowledge of how to build your own real application this course is what you need. This course is fully focused on creating the application without getting deep into basic knowledge of Angular!

Meet Your Teacher

I am a full-stack developer with a passion for learning and teaching what I know. I have been programming for around 10 years and teaching for almost 6 years.

I believe in learning through doing and this philosophy is present in every course that I teach. I love exploring new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry.

See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Preview: welcome to my course angular and in jail rigs built in direct project from scratch. In this course, we will create a completely Israel application from scratch. Rebel Implement All features the typical project need such a cell syndication, pagination, fishing data managing posts like and orders like and articles and much, much more AWS angular within generics, which is basically the most popular solution to manage state and to create scalable architectures. Off course. Old pieces of our code will be completely dry, reusable and easy to understand. By the end of this course, you will be able to build your own projects off any complexity using Angular and NGO Ricks , Who am I? My name is Alexander Kahin and I'm a Web developer was more than 10 years of experience, as well as a professional instructor with various courses about Web technologies. I did my best to put all my knowledge in this course, and they want to share. It was you so welcome on board and let's get started 2. Bootstrapping the project: in this video. I want to talk about things that we need to install in order to start developing our project. First thing that you need to install in your machine is known Jess, maybe you already hair it and to check if you have it or not, you can just write in the console node minus version. And as you can see, I have known version 12. And also we can check with NPM. I haven'T PM Version six. It actually doesn't matter What No question do you have if it is, for example, greater than at least 10? So basically, we need an old version where we can start running and gloves and Angeles, your light and Angeles Eli is a tool to start generating new project and to run some angle commands. And basically here this is official website. See alli dot Angela dot io And here I can click on get hub. And if you will open this link, this is the get hobbling for Angeles here live. And here in the description you can see we have an installation and here says that make sure that you haven't least no 10 or later, so, basically you can just check this page and know what version do you need to Ron Angula. So if you don't have known yes on your machine just simply jumped unknown just dot orig And don't Lord version. I prefer to use always LTC version, which means long term support because it's most table than current. And it is still supported, for example, by angular. And this is the only thing that we need for now. So after your node is installed and you can see the version off the note in the console, you need to install Angeles, Eli. So basically, here you can check how to install Angeles. You rely on your machine, you can basically copy here. And Pam, install miners G, which means global. And if I will run this command, it will install this package globally. After these, I can check if I have angular or not. If I will just write and G and then minus minus version, so basically is you can see I already have installed N g. Angela Angus here lie because here you can see the output after the command in G minus, minus passion. So here it says that they have version and Galicia light eight and they have no 12 and so on. And they have some angular packages which are already installed, which basically mean if you run this command and you get something like thes after running in GE minus minus Persian, this means that you are on the safe side and you successfully installed and glacial I. Now it is time to generate new project. I will name my Project Medium Clone because this is exactly what we're going to. Don't. This is the clone off the medium dot com, which will have, like post pagination authentication, likes dislikes, following users comments and song. So basically, here you can see the next command to generate. New project is in Gene you and the name. So basically here I can simply copy paste engine you and then the name will be, for example, medium clone And then that England after run in this command. As you can see, Angela asks us several questions, and the first question is, Do we need angular routing or not? And of course, we do, because we're born to create trowels and toe switch between pages. So basically here, where concert Yes, And then which style sheet format do we want to use? I prefer to use a CSS because basically we need at least nested rules sometimes. And some things, like variables from a CSS is also quite sufficient. So I am using s your says and now and global install old packages and prepare the empty project After Angola generated a project farce. We can just go to this directory medium clone and glad and start the project and the command to start of observer for angler is inju serve so basically here. And we just started The first drunk can take quite some time But now it's compelled successfully and as you can see, we can open it on local Horst 4200 So basically, here it is local host for 1000 as you can see, this is the default page which was generated by angler. So here is medium clone angler Israeli in and hear us 100 sources and next steps, which means if you see this page, everything was installed correctly and you're good to go. So let's clean a little bit now the code so we don't have thes generated stuff because we don't need it in any case. So here is the project. This is millions Clone Angela. And this is everything. What? Anglo generated fast. And basically, we want to change everything in source folder and in the EP. So here you can see index html. This is not interested for us For now and inept folder, we have app component html CIA says spec and app component. Yes, Basically, this is their first component which is rendered here, and we want toe empty. So basically, if we're open here, html you can see that here. There are some comments that this content is a placeholder and it can be replaced here. You can see some in line CSS and after these at the end would have router outlet where our route use rendered. Basically, let's just delete everything in this file and just open right, something like Hello, Angula because we don't need any other cold. And basically, if we're looking browser, everything is is already removed. And now we also want to remove this back file because we won't write tests and also in ab component SCS says this is already empty and now we need to clean up component or tears. It is actually really clean and the only thing that is here is titled property, which we don't need, so basically we can remove it and now we have simply the empty component. Now our project is completely clean and we can start developing. If you have any comments or questions, feel free to ask them in comments and I will answer them for sure. 3. Why NgRx?: in this video. I want to talk about tools that we will use with angular additionally, and we have a lot of stuff in Angola for us, like components, services, dependence, injections, also routing and scope styles and so on. But basically what is not in Angula? He's managing estate. Basically, we need to store somehow the data in front end and structure them and use them in some way . And Angela doesn't have something like this. Basically, the only thing that Angola has use services and components. And basically, if we open just documentation with http and basically the most often we're working with http. So we fished some data from some acai and we render them. And as you can see here, this is the basic example off working in Angola. So here we have some service, like AP Conflict and Conflict Service. And here is some configurable and this is just a car. Your l where we fetch our data and we have some get conflict method where we have these each duty beget and then the euro. So basically, this is just get request for some data and the point is that we can only get the data through this service in our component. So basically, we have a component, like AP conflict, conflict component and inside we have a method, something like show conflict and basically here. We just said some data inside our component through these these conflicts service and subscribe, which basically means the only thing how we can fetch data and save them our services. And this is really low level where we just have services, that we just throw some data in services or we just get the data through the services in components. And this is of course, not enough for us if we're born to build big and scalable applications where all code is looking in the same way and is easily supported. The most common solution to this problem east to use rid X and baby. You already know about three decks. If you worked, for example, with react because there is the most popular and basically relax. It's just a predictable state container for all GIs applications. Basically, it doesn't have anything to do with react or Angula or some other framework. This is just a way like a high level way to structure applications and to say how our data will change our state. Basically, why do we need it? We want our components toe not know anything about, like services or getting data and so on. We want components to communicate with our state containers and then to subscribe to some changes in this state. So Redox is just a library and we won't use exactly eat but an angle of rapper for this library, and it is called n G. Reeks. So basically, this is exactly the implementation off Redox in Angola, which means we can just install it here. The reason official website in JIA reeks dot io And here is an introduction which basically injury. Riggs is a framework, actually. Just library which wraps, relax, toe, make it work with angular and here we will use it for state management. It is type safe because it has type crypt inside it is isn't a testable and here we will install it and use it. So this is basically the only huge dependency which we will use except Angula. And with NJ Eriks, we will ride like 90% off our code so basically off course, but will use it like routing from Angela and Components. But basically all business logic and all structure off our application will be within generics. This is really the scalable and good solution which a lot of people are using in a huge application, which means all people are writing code in the same in the same way, and this code is easily maintainable and supportable. But off course it's not a silver bullet. And as you remember in Angola, you will ride a lot of cold just because it's Angula. So basically in comparison to, for example, react. You need to write a lot more because you use typescript and you need to describe all type ins. Then you need to describe your dependency injection between modules and within Jerry X, you will ride much more boilerplate, which means you also need to describe everything with your business logic within share rigs . And yes, we will write a lot. But this code will be easily maintainable and easily understandable. So, basically, angler, it's not about right in less cold. It's about right and understandable code, and maybe sometimes quite a lot like morning job away. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure. 4. Project structure: in this video, I want roughly talk about our project structure. Maybe you already sore a lot off applications with angular in Internet and basically all of them or most of them are written in a very simple way. So basically a lot of applications are simple, like to do least or some small block with several pages and so on. And, of course, we don't want to build something like this. I want to show you the structure that is scalable, which means it won't work on Lee ways like five pages, for example, like authentication single page than the least and so on. But it will scale toe work with the team. So basically, you can make with this structure small applications like maybe 10 or 15 modules and then scale ito hundreds or even thousands modules. And it will be easy because with our structure bubble plan, where we need to put what so basically angler as a framework doesn't give us any structure , and they just say you can just structure your application whatever you want. And the problem is, of course, that all people are structured in their applications differently, which means you just come in a team and you get a new project and you can't say how the structure will look like a tall because basically, you can put modules and modules and modules. Or you can just group all components inside one model and so on. And also you can share services are not share, and we want to have a structure which will be easily maintainable and easily adjustable. So let's check roughly what it will look like and why it is so so basically inside our angular app, we're starting inside sores and APP folder and inside we have our APP module and also near . We have our APP component, which is our A route component, and inside these components, with start to render all our other components with routing and so on. I prefer to create a model for each page, which means I just create a model, for example, for Article Page, and they put it directly inside EP. I don't create some additional folder like pages or maybe folding modules, because this will just give us additional step toe go through the folder, which we don't need. So basically we have several pages like, for example, 10 of them. And then this means that we just create 10 folders inside our APP folder, and we just simply name them as the page, for example, like article or else indication, or Global food and so on. Now the question is, what do we have inside single model? Let's talk, for example, about article model. So basically we know Okay, Article model means that we have Article Page, which means a single article which were under there and off course. Every Mario is starting with article dot model dot es, and this is another important moment, as you can see from the name. And we have really strict naming. And Angela doesn't say anything about naming off all files and especially like entities, for example, which are not specified in Angula. And we want to name everything really strictly so we can know how we need to name things and how we need to create new things. So basically, if we have a model, we just name need as a name off the folder, for example, article and then thought model dot com tears. Then inside, our article would have a Components folder and basically there we will throw all components which we need to render on this page. For example, let's say we need to render an article which is obviously our route component for article page. Then we put new folder article inside our components and the name in off the files will be article that component of TS component a CSS for Stylin end off course html. Just this is important to understand that all name in with all entities is going in the name. Which means, for example, if we create service, then it will be the name off their service than dot service dot yes, And with such name and we can easily understand, was what this file is doing at all. So we created a bunch of components, for example, article and comments inside our article model. Then we want to fetch some data or do some business logic. And for these, we need services normally 99% off the code. Inside our services is just a pie calls, which means we name our services normally starting with the name off the model, which means in this case our name will be article dot service dot yes. This doesn't of course, mean that we need to always name things like this. Basically, if our model is really big, then off course. We have, like several big services with difficult logic inside. But if our model is not a big one, service is enough for us and we just pack everything inside it, and we name it with the name off the model. After that, we have a folder, which is called Store. I won't go deep inside now because they want toe talk more about NJ Eriks later. But basically all stuff which is related to manage and state and INGE Eric's things will go in this folder, and they will belong exactly to this model. The last thing that we have inside Model East types inside types folder with store all interfaces or types which were using Onley inside this model. For example, if we store article interface and we use it only inside this model, it makes sense to start inside this folder types. Basically, all our models for pages will look exactly like we discussed inside article. Now let's talk what we should do if we have some terrible stuff. Normally we haven't least some components which are terrible for example, some follow button, which we can use in several pages, is terrible. So this means that we can just put it inside one page because we need toe split it between two pages, for example, article and global feed. For these, we create inside APP Folder Special folder, which is called Shared and all shared stuff will store. They're basically the main a shared stuff, our models. And, as you know, in ankle, you can't just talk components without manuals. Basically, components are just part off the models, and you need to declare them somewhere. Which means either you create some magic shared model where you just throw inside everything that you have. And this is really bad approach, because then it's not really terrible, but some huge good model where you have all components. Basically, exactly. For these, we create inside shared modules. Our model, for example. Let's say we have a model feed where we have the least of items which were rendering like, for example, their articles that we created, and this feud would want to share between different pages. This is exactly the case inside Shelton memorials. We create new folder, which is called feed and this is food model, which we want to share everywhere it can have different things inside. For example, the most basic thing is off course components. And we make inside this more dio the same structure like, for example, inside pages. Basically, we have also inside components, services, store types and, of course, the name off the model to register this memorial at the beginning, we have, for example, for food Onley component, which means we just render some plain stuff. And we used this component through the model everywhere. But then off course, later, we can make this model smart and add services inside with logic within generics and some types if we need toe the last thing what we want to share is services and types. Basically, services should not be exactly injected in some terrible model. We can just say okay, we have terrible services. For example, we have some article service which we use between several models. For example, article model need an article service and exactly the same methods we need in our global feed. For these, we can throw the service inside shared services and then with simply register in two places like, for example, in article model and in global fit model the service. So basically, this services are just lying there, but they are unregistered and off course. At the end, we have types, which means if we have terrible types or interfaces between several models, we just throw them inside shared types. This is my scalable version off file structure for angular applications. It works really well with the small projects, and I already checked it with the teams, like 10 or 15 people where the structure shines also really well because you can scale it almost indefinitely. Do you have any comments or questions? Feel free to ask them in comments, and I will answer them for sure. 5. Prettier: in thesis media. I want to talk about prettier. Off course. You can ride chalice, crypt or typescript code, or she assists, for example, without prettier. But basically I can't imagine right in fast and efficient code without eat a tall and basically I'm using it for everyday life almost every time. So, basically, what is pretty? Um, it's option ated cold for Mata, which means this tool just for months cold, nothing more why it is so popular. And why do you need to use it basically before prettier, for example, people for mounted code with Linton tools like here slimmed, for example. But the problem was always that different people have different opinions, and the point off Pretty, is that you almost can't configure it, which means you can't say Okay, I want break. It's to look like this and to be formatted in this way, which means all cold in all project is looking exactly the same, which means, for example, you're working alone or in the team off five or 10 people, and you don't need even to speak about code for my teen. You speak about code itself, but not about intonation or some rules which just should work out off the box. Let's check how it is look like on the example. So here I am in our falter source app. And here I am, for example, in app component. Yes. And here everything is formatted somehow. And for example, I'm just given some incorrect inundation in my file and then I'm just saving it. As you can see, everything jumped exactly in the place where it should be. So intimidation inside our object is correct. And let's say that for example, here I put also not correct intimidation, some strange spaces or, for example, here inside brackets. I just put some empty space and some intonation here. So basically this I This file is looking completely broken that we just save and as you can see here, it was fixed. But here it is not because this is invalid code and basically invented cold protect can't fix. Which means if the code is valid, it will be intended. And it's not working on Lee here in typescript. But basically, in almost all popular, we have languages. So here on the main website, you can see that pretty air works with a lot off different things for us. It is important that we can work with typescript off course. JavaScript, CIA says SCS says html Angula markup and so on. There are also other community plug ins, for example, for PHP or Elmore. Other languages like Ruby. Basically, you can use prettier from console, but it doesn't make that much sense. What we want to do is we want to implement pretty in editor. So when we just save files, they will be corrected for mounted, which means we don't need to think about inundation, and everything will be working out off the box. So here is usage, and in this link, you can check how you can install it in your editor. So here you can read about it if you want. And here agrees. Configuring, prettier and editors. The first thing is, of course, editor Internet integration. You can just click here and check your editor. Let's say you're using, for example, visual studio cold, which is really popular editor. And here you can simply install extension pretty obvious cold, and you just search for you. You install it and then it should work out off the box. So basically here is repository for the spec egx. And here you can see some good fold former teens and some issues that you have, and you can simply fix them by checking this rapper. The next thing when you successfully installed Prettier to your editor is to write a conflict. You basically almost can't configure pretty here. But there are several of several rules that you can configure, and here you can see options inside, configure, prettier and configuration file. So basically, here are options. There are not that much of them like only four. And here is configuration file. So basically, we want to create in our application in Angela and Root file dot pretty air Sea and then ride there our configuration. And here you can see basic configuration and let's just create inside our project. You file and name it dot print, hear or see and then opened this file and I will just paste inside my configuration. But basically it's really small. So here I am saying Okay, I want indentations off two symbols and I like single quotes everywhere and no double quotes. My maximum reads off lines should be 80 symbols then my code is really good intended and briquettes. Patient is false, which means when you have something like import and you have some the structuring food you don't have here spaces. For me, this looks not really nice. That's why I always said bracket space into false and semi Kahlan Falls is really tricky option. Some people like it. Some people don't. I really don't use semi colons in javascript and typescript at all in a lot of projects or a lot of years and everything is working fine. There are only three cases in javascript when your code won't compile transpired when you are not using semicolons and basically in normal projects, normal people never ride this cases, which means semi colons. If you have them toe falls, you have something like Const Fool equals two and this semicolon will be deleted by prettier on safe, which means I don't have, in my case in my code semi colons at whole. Basically, let's save this configuration and restart an editor and check how it will look like. So here we are in source AB and let's open the same app component ears as previously. But now our correct prettier configure mate configuration is lauded and let's just save the file. So basically as you can see, the only difference is that we have here intonation with spaces inside square brackets and we also have here double quotes and after save it single quotes. Which means our configuration is working correctly and we don't have also any intonation. So basically here you would try to create a variable full and say one, and then we put here semi colons and then we save. It just goes away, which means Pretty is working correctly and we're good to go. If you have any comments or questions, feel free to ask them in comments and I will answer them for sure. 6. Language server: in this video. I want to talk about language server protocol. Basically, this is the tool that allow you to get such features like, for example, out of complete out of imports and so on for different languages. Basically, it's really difficult to implement such things like, for example, go to definition or documentation on horror and so on, just directly in the editor, this is why in Microsoft, a created language server protocol and basically the idea you can read on the official website like on Microsoft get harbor your language, Terra Protocol. Here it is written that the idea is that you have, like, server, which is completely agnostic. Toe your editor, Which means this is just some protocol and between your server, like, for example, typescript server and your editor, there is air bindings. So basically some events where you give some information, toe this language server and get some information back. In this case, you get such things like go to definition out of imports. Outer completes out of the box, and I can imagine developing applications in javascript without language servers, but not in typescript. The point is that you always want to check what type you have. But in the face do you have What do you import? And basically in Angula with typescript were right and quite a lot of code, which means we want out of imports to resolve everything faster and to get out of imports faster than available type by ourselves. So let's check how it's look like when we're using it. For example, let's say that I am now in APP component and they just deleted one symbol here and here. I have to server, and basically this is exactly language server, which just trance near the I. D and says me what is wrong? Basically, it tries toe transpire all code with typescript and the results off this trance piling. I'm getting back in my editor in this case, I'm getting like Canada fine name component because it's not written correctly, and here we're importing component. But here the name is not correct. Basically, this is like errors from their compiler directly in your editor. And it's not only these, for example, let's assume that we don't have import and we just rolled okay at component and basically typescript insane, cannot find name component, and now I can just click on the key bind and you can see that we get directly import on the top. Which basically means I save a lot of time because I don't need to check. Okay, from where do we need to import now? Component from Angela or in Glock or over terror? I just click like import, and then I get this import on the top. Of course, it's not always 100% correct, but it works really good in 90%. And we want to save a lot of time to get this imports, because when you have, like in one file, maybe 50 or 100 imports right in them and mainly gin them by hand, it's really time consuming. And we want to avoid this. For example, I don't know what editor are you using now? But I would say, for example, for the most popular editor, this is visuals to the or code. The support off the typescript with this language server is directly inside. So you don't need to install anything. You just write code and you have these things like auto complete. You see here the special window where when you import some methods or just with door tried them. You see what perimeters you need to throw inside and so on and so on. Basically, almost for every popular editor you confined language service, and sometimes you need to configure something sometimes not. But basically I would highly recommend you if you want to avoid, like, typing all code by yourself and to use this language service to avoid errors and to get on the fly, this messages and ability to import things, she's having a comments or questions. Feel free to ask them in comments, and I will answer them for sure. 7. Register module: in this video will start was implement and register module. Basically here you can see that I opened a website called Angle Adult real world dot I own and this is the example off application. This is not the application that we will build from the cold perspective, but this is the angle application and basically you can click here like check pages, but we want implement and so on. So basically, here in this lesson for us is interesting. This I not page you can jump here on the top in Tobar and now we are on register page and we will use the same phones and she assess like this project is using. Basically, the idea off Rheal World example is to implement the same application in different languages or in different frameworks. So here we can open the network, for example, and check the request that we're doing. Let's say here we want to know what requests are happening when we're registering. So we're clicking on sign up and then here we feel something in all fields and now we click Say not. And we know that this is the request for your URL conduit production ready I yawn And this is the public. A pie that we will use. So basically, we won't create our own back end. But we will use this publicly Chi and we know that we can registered users here when in slash he passed less users We're post in the data like this. So basically, to use the object with email, password and user name and as a response, very getting some errors. For example, if the data are not correct, for example, in this case, the password is too short. That's why we can't register user. So basically we won't right any CSS because we will reuse it because it's public and we won't right any phones because they're also public and we will use this publicly chi toe make all requests. So basically the whole focus on for the course will be on Lee on angular code on front and side. Now let's start. According so basically we know. Okay, this is the sign up. So this is the register page and this is the first page that verbal implement. So as we discussed in file structure, let's check the code. So basically, we're in source app and here is our module and that component and routing. So here we will just create the pages just like folders. And then we will also additionally add shared later if we have some shared stuff. So let's start here. I would prefer toe group these two components. So basically, this is the component register and near you can see the component logging. So these two components are really similar. They are about authentication. So I prefer to create that one folder we can call it off and basically here we will put all our routes. So pages about our syndication, in our case, it will be register and log in and we will start here with creating you file and we can name it south dot model dot Yes. So, as I already said in file structure will always name our models the same like air folder, which means our folder is ours. We're creating our model, and the name is with small letters out model ts and never the name will be different. In this case, we can really structure our application in the same way everywhere, and people will know how we're right in the cold. Now let's check that we want to create a model and in Angula to create Emilio with just export class And the name will be out memorial. So basically the class names are with big letter and now we need to provide in gym audio here. And as you can see, I am getting out a complete while I'm typing and when I will horror on one off the element I'm getting this'll Nice window where I see what I get. So in this case, I see OK, this is InGen model. This is Angela Macho, which is the decorator, and I see from where I will import this model or function. In this case, when I click enter, you can see that I get out of import in gym audio from Angela car, which is completely fine. And this is exactly lend which server about it. I was talking in previous video, so basically here we have a ninja model with empty object and we provide something inside by default will always provide Onley imports and here need to go common model. This is standard model off Angula and we always provide eat for every model And as you can see also you could see here the jumping, because here the intimidation was not how fruit here I wanted it. And when I click save, then everything is intended correctly. I don't have spaces here and here. The code looks much better. So our house, my audio, is created. This is like the super row basic version off the model. And we need to create a new components inside this model. So, as we discussed previously, we create our components inside ALF in Components folder. And now inside this components, we can pack as many components as we want. But we always put them in additional folder, which means here, Justin components would don't have files we have on lee folders. And in our case, the first page that we create will be register. So we create here the folder register and now off course with same name. And as we discussed with name it register dot component Dirty s registered old component dot html And for sheer says register dot component dot s your says. Actually, for this project, we won't right any CSS because it is already prepared and we will just use it. But I will always create this files in this way just for the sake off simplicity. Because at the moment when you need to add styles, it's much easier to see the same structure everywhere. And you just know. Okay, My every component has tiles and they can just that all them inside. So everything is all of you prepared Now let's create a basic component for register page. Basically, this is our page register, and we want to just create simply out here. And all components in Angula were registered with special component the crater. So basically, just to remind you models who were registered with engine model the crater and components with component a greater so here we have also class register component and just to say once again, our file name is registered dot component and classes were always name Camel case. But we never say just class register because in this case it's not clear for us what entity it is. If we're right and register component, it's clear for everybody that this is component, so it's just empty and we want here toe import component, decorator And as you can see, I have outer import. And here is the object and inside. We want to give a selection and this will be their tag with which we will accuse this component. And basically, we also want to do this strictly. And the guideline off Angula says that in the application of we need to perfect everything you old Texan, our application of the same. Basically, in our case, we can perfectly sit with M c, which means medium clone. In this way, we know this, that these tags belong toe this application. Why? It is good. Just imagine where in Tamil and we have in contempt or something like m c Top by. And we know that the step comes from our application and we also installed, like five different libraries with different components inside. And then we import some library with name top bar. And at least we can understand here that this Ted comes from us and these texts come from somewhere else. If the name our tags also talk bar, then we can't distinguish between libraries and our cold. That's why I always recommend to perfect all our selectors with some profits off the project, you can just check what perfect do you want? I think M c is nice prefix and it's not a lot to write. So in our case that this is M. C. Register because the name is registered component. Also, we need toe right here, template your l and this is the path for the template and also off course style, Urals and style. Urals is our, she says, and it will be register component as CSS. Now our component is ready. But when I hover, you can see the message. That component is not included in my audio and won't be available. And this is of course, true because we didn't inject this component inside our model. So we need to jump back to our south module and here we need to register it. So basically, however, register models, we just have a declarations property here and with throw all components inside. In our case, it will be registered component. And as you can see typescript and my Angula lamps, Sarah already understands that we created a new component and we can just out of imported and I just click enter and you can see that the whole path is here. Basically, this is one more thin about anglais itself. We just installed angular project and angular, created a lot of files for us, for example, of the conflict for typescript. And in this conflict it is said that we can just tried absolute path. So off course past can start with sores and basically through the typescript conflict, Ingla says. Okay, we say, which read source folder as our root folder, which means we can import everything starting from sores, for example. In our case, it's source than app on our than components register and thes component. So we're here in model. This is our path off course. We write it without the tears and then But we want to import everything when it is possible with absolute path and not related off course. We could right here something like this. So basically, we just remove this part and we're saying, OK, this is related part inside our component. This will work, but I highly recommend you not to do it, because at some point you want to just copy this line and put it in another place. And if you have related path, it won't work, and you just need to adjust all places by yourself in every file and This is, of course, time consuming. We don't want this. The second point is, at the moment when you just change the place off this file, you can simply copy, lease, file this absolute path. You know that this absolute past is everywhere the same and then we just simply want to find this path and change it in all places at once. If we have a relative part for this file, then we can do it because it's not everywhere the same so absolute path for the wind. Here we declared our component for our model, which means our component is ready. And now let's write something in our register page, for example, Register component. Now our HTML is ready. Our file with component is also ready, and our model will also create. Now we need somehow toe go here and jump to slash register to see our component. And here, off course, is one more important thing to remember. We're off course could here and go to source app. And here we have a proud him and basically here, right, all routes for our application. So you can see Okay, we have a proud outing and we're using the's a proud and inside at model. So here we import, applaud him and then use it. Which means Angula says Okay, just right here, all your out and everything will work. But this approach is not good. Why? It's not good. Because if we're right here some rows, let's say that we say here, OK, we have path register, which is a path that will bond and then we want here component and here will be registered component. This is fine. It will work. We can even check that it is working. Actually, not yet because we forget to inject our registered more audio inside at model. So basically, everything is starting with a model here. And that model doesn't know anything about our house model. So we need to register thes our model. And for these imports, we can simply say here our model and we just click. And here is our import and this means we're registered out more deals inside our model. So here there are no Arabs inside our Web server, and when we reload the page, everything seems to work. Then we try to jump to register and you can see here nothing and This is the arrow here because we didn't put route tag inside. Basically, here you can see in app component html we have here. Hello, Angula. So basically, we have not a single word about routing here. We need to add special cold which will tree get routing. Which means there is a tag from router inside. This tag router will work so all information will be rendered inside this tag And this tag is called out outlet. So basically here is out loud outlet and we close vaulter off that, and now we're allowed the page. And as you can see here, here is Hilo Angela. And here we can see a register component. So everything is working. Let's just wrap this code in some h one. So here is Hilo Angela and then our register component. Our model works, but there is a problem here inside a proud him with says that we have a route register component now Just imagine that we developed developed application and then at some point, our product owner is saying to us we don't need this model animal and we need to remove our model completely, and we just remove this folder and it's not there anymore. But we never updated this file, which means we just get some errors about that component is not there because this past obviously doesn't exist anymore, and this code won't work. Basically, the idea off models is to scope things inside this model. This means that we want toe put everything regarding our model inside our model, which means this is not right. We register routes outside off the model. Basically, we need to remove it from here, and we need to remove the SIM part because we don't need it here. So here we don't have any routes. Then we need to go in our help our model and register out. So basically, we can do this here, just create routes for these particular model, and we ride the same cold here. This is just array with object. And here the path is register and component is our register component. And even we have already this component inside this file. So we even don't need to import it. Now. We just need to use this routes that were created inside our and Jim Auriol. So here to do this, we have in import special theme from route model So we can say about, um, audio. And, as you can see out of import, although the imported we can say for child and this is exactly the theme, as you can see in the description, it creates a model with all the router directives and providers registered routes, which means when you want to register some routes for the module you're using a Baltimore you'll dot for child and inside. Did you simply need to throw routes? In our case, we have rows, we just save it, and basically this cold says Okay, please register this out for this model, which means on the when we import this models, this model is imported in model. Then this routes will be applied and before we won't have any rows about register. Now let's check if it's working. No errors in the console. We just allowed the page, and here we're on home page. We just jumped to register and our code work exactly the same. But now the main difference. We just need to remove this out of Holder and everything is not there, And droughts are also off course, obviously unregistered because we just removed this folder with this model, so everything is coped and we're good to go. If you have any comments or questions, feel free to ask them in comments and I will answer them for sure. 8. Register layout: In previous video, we created our basic out module and register component. Now it's timeto ad mark up to our register component. So here, let's jump in register. Basically, I will just try the same markup as we hear here inside this angle adult real world that I want. So basically, we start from there our page and we throw everything inside. So let's goto our HTML. And here we will have dif with class our page with the dash. And then we closed the thief. And, as you can see on safe, Prettier also covers HTML files. So basically we don't need to intend it correctly. And inside our page, who will have container and class page and inside container page, we will have deep with class troll and inside this role it will be column. Basically, as you can see, this is all clas