Angular Crash Course - Built Task App | Stefan Omerovic | Skillshare

Playback Speed


1.0x


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

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

    • 1.

      Introduction

      2:05

    • 2.

      Angular Installation

      6:55

    • 3.

      What is Angular

      11:35

    • 4.

      Modules

      3:52

    • 5.

      Components

      8:39

    • 6.

      Routing

      7:50

    • 7.

      Services

      7:14

    • 8.

      HTTP

      13:47

    • 9.

      Templating

      7:27

    • 10.

      Styling

      5:44

    • 11.

      Deployment

      12:45

    • 12.

      Thank You and Goodbye

      2:02

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

117

Students

1

Projects

About This Class

Welcome to Angular Crash Course for absolute beginners.

Angular is one of the most popular JavaScript Frameworks. It is used to build Single Page Applications across all Platforms. Next to that, it takes care of performance and offers incredible tooling for us developers. It is loved by many, and it is one of the most popular frameworks out there, next to React and Vue.

The good part about this course is that you won't need any prior experience with this technology. As this is a Crash Course, it will focus on the basics of the most important features that Angular has to offer. And by the end of this class, you will create and deploy Task App with Angular.

Class Breakdown:

  1. Introduction: Next to welcoming you into this course, I will also mention and show what you will be doing in this course. What will you learn, and what we will build together.
  2. Angular Installation: In this lecture, we will focus on installing Angular as a technology. Next to that, we will create our Task App and run it locally.
  3. What is Angular: We will use this lecture to go through Angular as technology and check how the Angular application is set up. 
  4. Modules: As one of the main features of Angular, Modules are really important to us. You will learn more about those and even create one module that we will use for our Task App.
  5. Components: Without components, we cannot have any content on our page. So in this lecture, we will deep dive into Components, create, style, and use one in our app.
  6. Routing: Routing is something already integrated into Angular Applications. In this lecture, we will create more components for our pages and connect those pages to work with our routing, so we can enhance our Task App. 
  7. Services: Injectable feature and the feature that mostly holds data in Angular Apps is a service. In this lecture, we will learn more about those, create one, and share data from a service to one of our pages.
  8. HTTP: As a common feature of every Web Application, HTTP in Angular has its own module. We will use that module to actually contact a server and pull the real data from it. Next to that, we will connect that to our application so our app can know about that data.
  9. Templating: The data we got in the next lecture will be used in this lecture, as we will present those on a screen. We will use something called ngFor directive to present all data in just a few lines of code.
  10. Styling: Styling in Angular can be done differently. All those examples we will check in this lecture. We will also utilize property binding to style the specific elements based on specific values.
  11. Deployment: At this point, we should have our Task App fully functional, so we can deploy it. We will grab our Task App and deploy it to Firebase Hosting. The whole procedure will be explained step-by-step.
  12. Thank You and Goodbye: In this lecture you will receive a proper Thank You message and next to that you will learn more about me, and my other courses that I have.

Useful Links:
- Angular
- Firebase
- Placeholder API

Meet Your Teacher

Teacher Profile Image

Stefan Omerovic

Full Stack Web Developer and Instructor

Teacher

Started at age of 18, at the usual starting point for Front End. For the first 2 years mostly coded static websites with Front End Frameworks like Bootstrap. After that, explored the next point on my path to becoming a Full Stack Developer and entered into Web App Development. Started openly coding in Angular and handling everything regarding the Front End Side of multiple projects. Currently, I am a MEAN Stack Developer with 7 years of experience.

Started my way as a Self-Taught Developer, I never stopped learning new Web Development Technologies and I plan to learn and become even better with those. Through a few more years I plan to move into Mobile Development with Flutter.

Experience as Instructor

The reason why I got into teaching Web Development was... See full profile

Level: Beginner

Class Ratings

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

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. Introduction: Hello everyone and welcome to this angular crash course here on Skillshare. Through this course, we will work with Angular and the basic solid. Next to that, you will get to know all major features that Angular has and support. So by that, you will actually install the angular and build something nice varied. The features that we will work with to these scores would be angular, CLI, components, services and routing, also http module and much, much more. Now, what will we build through these scores? Well, this course next to the features that we will explore, we will also build a real life project. The project that we will build tasks application, this application that you can see it right here on the screen, looks simple enough, but it actually supports all of the major features that we will build a layout retained lot with also do the routing for multiple pages. We will also use HTTP module to pull the data from the server and actually show that data on a screen. Next to that, we will work with our data like complete or incomplete one of our tasks. Now, who am I? Well, my name is Stefano matter, which and I hear more than seven years of experience in web development. Next to that, I'm also an online instructor. Next to this Skillshare course, you can find me on YouTube as well. On YouTube, you can find my America channel where I post new tutorials in web development on a weekly basis. So be sure to check that out and also subscribe to my channel there as well. Now on Skillshare, next to this course, you can find in many other courses that I have as well. Those courses that you can find will be on different technologies. So there is another course on Angular, but if you would like to watch the courses for different technologies like Bootstrap, JS, JavaScript. You can find those as well. Now, I would like to welcome you once again to this course. So let's code. 2. Angular Installation: Hello once again and welcome to the official first lesson of this course. In this first lesson, we will go through some basics of Angular. We will install the Angular. We will see what is angular terminal tool and also we will create our application and run that application. In the next lesson, we will talk what is Angular at exactly? And we will go through some of the cool features that Angular has. Right here on my screen, you are currently looking at Angular official website and a lot of data IO. On this website you can find everything that you need about Angular, you can see some of the cool features that singular, Yes. And also you can see it's own full documentation. Angular hazard technologies are vast technology, so it is only natural that the documentation is big as well. In the left side menu here, we can click on this Getting Started and click on this setup, open up this page and scroll down a bit. Here the first thing that we can see and do is install the Angular CLI. By installing this singular CLI, we will also install latest angular stable version. This CLI is actually really important. We will use it to create our application. We will also use it to create a bunch of different features that Angular supports. And also we will use it to run our application. Now to install the Angular and Angular CLI, we must copy this npm install dash g at angular slash CLI. One more thing before we install angular, be sure also to have the latest version of node.js installed. Well latest recommended version. The importance of this node is not in Angular, but in its own tool called npm. Npm is the package manager that will allow us to install a bunch of different modules like angular. And in Angular script, you can see already NPM here, which means that we are already utilizing on that and PM. So once you have Node.js installed, it will also install this NPM automatically. At that point, you can simply copy this command here. Now in your terminal, you can paste this command and hit enter. This command will automatically install Angular and Angular CLI for us globally on our machine so we could use it. Once this is installed, we can use EMG as a command here. And g comes from that Angular CLI. Next to these send g, I will use dash, dash, help, a flag here to present all of the help while helper functions from Angular to us. Here we can see bunch of different options and commands that we can do. For example, energy bill will actually build our project and redeployed can actually deploy our project. There are commands for generator to generate specific files and also run to actually run or serve our project as well. Now this here is that Angular CLI tool that I mentioned already. The tool itself is really important to us Angular developers because we use it on daily basis. So let me show you already one cool thing that we can do with these CLI tool. So the command that I will do is N G nu, this engine, you must have a name next to it. And what it will do relative to create a new angular workspace for us. Well, the new Angular application. So first of all, I will use clear to clear my console so you can see everything clearly. Now, let's together use this command. I will lose mg, then New, and I will pass the name of my workspace. Well, the name of my application. We will build this task application. Then I will name my app, task dash app. Now, this here should generate our application. But before it does that, it will also ask us a couple of questions. First one would be, would you like to add angular routing? Angular is a library, also supports routing. So I will here go, yes, because we will work with the routing in this course as well. Next thing is to choose a style sheet format that we would like to use. Angular is a default comes with CSS, SCSS, Sass or Less. I will simply here choose a CSS for more default application that we can build. At this point, angular will create all of the necessary files installed, all of the packages that, well, the app needs. Once the application is installed, we could actually start to working with it. You can see also a bunch of warnings on my screen, but that is not necessarily a problem. Those are just warnings. And maybe for you, it doesn't even show those depends on our workspace and also it depends on a machine. So once again, I will clear my terminal here. Next thing that I will do, now that I have my application, I could use cd and then the name of the application task. By doing this, I will move myself directly into that Angular workspace. Inside of this angular workspace, we could actually run our project. To run the project. I already showed you one command which is N G serum. So we can simply run this project on a local host. Next to descend you serve. We could also use, use dash, dash Open or just dash O to open automatically our application on our preferred browsers. So I will do exactly that. Now, Engler, we'll grab our project, compile everything together, and random that for us. So let's just wait a bit. Once this is finished, we should see this dummy will default application that was built by Angular for us. Angular does this automatically and it already has some coordinate. The example code is just the useful links that could be helpful to us. You can see the links where you can learn Angular, also the CLI documentation and bunch of different features that Angler has. Also you can see the features that Angular also support. It's like creating a new component, which we will learn about a bit later. But this starting code is not important for us at all. But as I already mentioned it, let me show you right next to my terminal, I opened another one because it is really useful to me to have two terminals open. You will learn to this course. Why? Because we will also generate and create new components or services that Angler has and supports. And for that, we will still keep our applications running on the left terminal, while on the right, we can use it to generate those features. But here what I will do, I will use code that to open my task app in my Visual Studio code. So here it is. This is official angular workspace. And on the left side here we can see, well, all of the files that Angler has for now. In the next video, we will learn more about the Angular and what each of these files does for us. So let's immediately jump into that. 3. What is Angular: So what is Angular actually? Well, Angular, simply put, is a JavaScript framework and it is used to create single-page applications. What does that single-page application me? Well, those applications would be applications that have routing and also different pages without actual reloading those pages. So for example, here on Angular official website, when I move myself to the Features page, you can see that the page was changed but it didn't refresh the page at all. And that is that single-page application. Everything is presented on a single page, but it will re-render the content needed for a specific page. Now, next, Bangalore, there are many different JavaScript frameworks that you can use. Some of the most popular next to Angular, React and Vue. So what makes singular different and stained from those like reactant view? Well, Angular is a vast framework in its own code base. It will also support routing and even HTTP module itself. Next to that, there are many different Seibel liabilities of Angular that are already integrated into angular. And there is even a third party library light outage JS that comes by default with Angular. So by debt you can see that finger is really vast and there is quite a lot to learn here. And you will be able to build quite amazing applications from a get-go with Angular. Now because it is such a vast framework, it is obviously much harder to learn framework. But let's talk a bit about the popularity of Angular. Where does Angular come from? First of all, well, Angular was developed by Google itself, and Google still works on Angular daily to make it better from a year or two years to come. Every six to nine months, you can expect a major update of Angular, which will move its own version. Currently we're on version 14. And as I said, England is right at the top next to view. And yet as the most popular JavaScript frameworks out there. Now, before we dive into code, I just also wish to show you some of the cool projects that were built with Angular. For example, lift as an app, was built with Angular, Tinder as well, and Snapchat as well. There are many different projects out there that were built with Angular. Many of those were quite successful in it. So by this, you can see that you can actually build whatever you wish with Angular. So it is just a new to decide you wish to build some small application that we will do, right in this course, or a bigger application like one of these. Now, let's come back to our code. Let's talk first of all a bit about the angular and the code here as well. First thing that I need to show you are those node modules. This node modules will be automatically installed when we will create our angular application. For those node modules, it is really important to have this package dot json file and the package.json file in this spec and that JSON file, we can see some simple information about our app, like the name and the version. We can see different scripts or commands that we can run, like NG serve to run our application. And we can see different dependencies that were automatically installed with Angular. You can see that Angular has a core, a module that is obviously installed here, and that is the core features of Angular, the rabbit. Quite different features as well like animations, forms, router, and so on. And I also mentioned this, but adage JS as a library, even though it is a third party library, not angular library will be installed here because Angular quite utilized on this outage JS library. Now if you wish to change the setup of your Angular application, you can always open this Angular.js JSON file. Here you will see, well the whole schematic of your project. Actually you can see the name of the project and the whole schematic of it. So for example, if you have some external styles that you wish to use, like importing the Bootstrap library. Well, you can do that right here, or even Bootstrap JavaScript. You can do that in a script here, right here you can also see different configuration for the angular project like production itself. You can set up your own configurations right here. Now this is just the setup of the Angular application. Let's close these files and go into this SRC folder, the source folder. Inside of this folder, the first thing that is really important to us is this main.js file. This means that p is file. We'll grab the main module of the Angular and Bootstrap that module. The main module of the Angular application is usually this app module, which you will see soon. In the next video, we will work more with modules. Angular really uses these modules and you will see through this course how it does that. But in this file, angular, we'll grab this module and run the application based on that module. So it is really important that everything that you have in your application. Must be important in this app module file, so the application could actually know about it. Now in here we also do have styles.css, which is our global styling. We will come back to that a bit later and also index dot HTML. This is that HTML file which will be always re-rendered. This is that one page, single page application. So in here we can see this approved and by this app route approach when pulled the current route that we are currently looking at. And by configuring correctly our routes, we will be able to weld, present a different content for a specific route. That is how the magic happens. That is why we don't need to actually refresh the page. But we will be able to move ourselves from the route to route, from our page to page, and the content will automatically be re-rendered. Now in here, we could have different environments that we wish to set up, like production or just normal our own development environment. Also, we could have our own assets here like images, fonts, and so on. And we could have, well, the actual application, this sexual application. Well, there are quite a few files here. Let's put us to all start from the main file, like this app, that module that P S bar. So first of all, why? Well, peers is an extension for a TypeScript. And angular by default, uses the TypeScript throughout the whole application. So it is really important for you to know at least the basics of TypeScript to actually work with Angular. But let's come back to this app module file. In here we can see this decorator of N G module. By using this energy module, we are saying that this file will be used as a module basically. And as this is our main module for our application, our app module inside we should have all inputs that are needed. For example, our app component, that was the first component that you already saw in a previous video, that first page that was created by default from Angular. There is also a browser module which overs plus quite a nice utilities. And without it, we cannot code through the Angular application. And there is also an outing module, which is the module that we created on our road. Do you remember that we were asked if we wish to use Angular routing and we selected yes by that command when we generated our application. Well, that exactly created this routing module and it automatically imported it for us here. Now, here you can see that components must be important in declarations. Modules must be important to imported in imports, there are providers like services and bootstrap part stands for what the app should actually run. And for us it is AB component, our starting component. So let's open that starting components. Let's open up the HTML file. And this here is actually the whole code that we can see currently on our screen. Coming quickly back to my screen. This is exactly that code. Now, this code is not important so much so we can actually grab it. And let's use H1 tag here, and let's say hello world. By doing that, I could open my local host and we can see that content now is actually just the hello world. Now for this to work and actually reload our application automatically, you still need to keep these local host running with that in deserve command. Coming back to my code now, I can see that next to this HTML file, I can see CSS file, that spec, that ts file and ts file. These are all the files that are belonging to one component. Usually when we create component, we will have four files for that component. Instead of coding HTML, CSS, and TypeScript all together, angular will actually split those in different files. So by visiting this app dot component dot ts file, well here the setup of that component actually happens. Each component will have its own T as well TypeScript file. And it will have this decorator of components inside. We will have a selector. We trivial, well, we can use it to select the debt component and show with sound. For example, the selector here is app route. And if you remember, in our index.html file, we are using that component right here as an app route component. Now, next to that selector or weekend, specify the template and the style for our component, and that would be our HTML and CSS files. So in a nutshell, that is about the components for now, we will work with those a bit later more. Next thing here is this dot spec that ts file, spec files in Angular. Well, those are used for testing. So if you need to write any automatic test, you will do those here well, in its own spec files. And the last thing that we didn't actually check is this app routing module. These separate routing module, we just, well, it will use this decorator of energy module to setup the module. You already know that it is important in our app module. So our application actually knows about this module. And here you can see the setup for the route, which we will learn more about it later. But those routes must be passed in a router module from Angular. So the Angular application could actually know about these routes. Now next to these features like module's components, there are many different features that Angular has and supports, like services, pipes, directives, and so on. But before I end this video, Let's go back into our style that CSS here. In here, I will style my application globally. For example, I will grab all of my elements on my application and put the padding on those to be, for example, 0 and also margin to be 0 as well. Next to death or the grabbed my body. And final set the font family to use as a font family to be Courier New. And also I will set the color of my font to be 333333. That's it. Now seeing my application, we can see that our hello world is indifferent font. We can also see that there is no, a lot of space in here at the top and left, and we are ready to start our application. In the next video, we will learn more about the modules. One of the main features of Angular. 4. Modules: Now we already talked about the modules, but I wish to say a few things more. We are also able to divide our modules into our root modules or a feature modules. Wrote module would be our main modules that we could have for the application, like this app module. But future modules would be as specific modules that will be used for a specific future of our application. Let's say that your application supports authentication and data authentication can have a lot of different pages like login or sign-in. Maybe reset your password. And small. With a lot of those pages, there will be a lot of functionality that will come as well. So it is only natural to separate that odd relative indication as a feature and create the future module for it. Which means that all of the components that we will have, we don't need to import those in our app module here, but we could import those in our future module that we could create. Still, our app module should know about those. So we could just import that feature module in the SAP module and the whole application will still work fine. One cool use case of these route or future modules is, well, we can see it when we open up this app routing module. In this separate routing module, we can see this keyword for root. Well, a method called for road. To this method we're passing our routes, which means that these routes are main routes of our root of our application. Well, the main routes for our application coming back to that authentication future, as that authentication feature will have its own pages and also its own future module, it is only natural to create its own future routes that we can use. One really cool use case of these future modules. Well, is this shared module in Angular, we, as developers usually create this shared module where we have all of our, for example, components, services, and pipes that are used well, shared, widely used throughout our application. So in here, I will now create my shared module. And this is again, we will again use the CLI tool for that. So to do that, we lose in G, G for generate, M for module. And then I should use the name of one of my module, which will be shared. Here we can see that the module was actually created for us. Coming back to my application on our left side, I will have here a shared folder. Now, inside of that shared folder folder, I can see my share that that module, that ts file. We can see that this shared module has a less code than our app module because it is not so important for this shared module to have all of that starting code. This is the first feature module that we have. And this module is actually used for shared features that we could have. For example, in the next lecture, we will create our top bar for our application. Instead of creating that top bar on all of our pages, we will actually create our shared component of a top bar. Hence, we will import that shared component inside of this shared module and also exported. So our application could know about it. By debt, we can use that top bar component wherever we wish, and we can always have it on our screen without reusing it over and over again. So again, this shared module is really useful to us because it can always hold all of our shared features that we could have like different components or services or pipes and so on. So now that I mentioned that top about a component, let's go into the next video where I will talk more about the components and we will together create that top bar. 5. Components: Now next two modules, components are also really important feature of Angular. Without components, we wouldn't have any pages and even any content on our screen, right in this video, I will show you how can we create one component in Angular. The component that I wish to create is that top bar component that we can use. The top bar components should be presented on all of our pages that we could have on our application. So it would be good to create some kind of reusable components. Well, all components in Angular are actually fully reusable. But for us here we will go a step further and created this top bar component to be in our shared module. That way we will indicate that the top bar component is a shared component and it doesn't belong to any specific page. So to create this top bar component in my terminal by using the CLI tool from Angular. Again, we will use command of N, G, then G for generate, see for component. And I will generate this component in shared folder, which is our module slash top bar. Now in my code editor, I can actually open up that shared module. We'll shared folder, then top bar. And here I can see four different files. There is HTML, CSS, TypeScript, and also test file for this component. I already mentioned this at the beginning that each component will usually come with four files for it. These four files will actually be that one component. So we have divided our HTML, CSS, and TypeScript, so we don't actually write everything down in one file. It could be quite a long file. So in this top bar component, Angular, once it generates debt component, it also adds this kind of dummy content for that component. So let's make sure that we present actually this component on our screen. So going into top bar TypeScript file, I can see the selector of f dash top bar, which means that in my app dot component where I have, where I have this Hello World, I will remove this Hello World now, and I will add HTML5 element of f, f dash top bar. And this should actually present our top bar component. But right here, we do have an error. And also, if we would open up our local host, that same error will be visible on our local host. This is good because Angular is much easier to debug this way. The reason why we do have this center is because our app component doesn't know about App top bar. And the reason why doesn't know, well, this app top bar belongs to this share the module. So inside of this shared module in declarations array, I can find this top bar component. But if I would go to my app dot module dot txt file, there is no such components, that is just AB component. So what should we do here? Well, we should import this top bar component in our app module so we can use it through our app module components that we could have. But because we have this shared module, from this shared module, I will simply export. So I will HIT US exports array and I can hear past what they wish to export. For me that can be top bar component. Now, instead of importing my top battery component in my app module, I can simply import my share the module here. This way, I will import shared module and everything that is exported from that shared module. And with this, we simply fix that error, which means that we are now using our app top bar in our app dot component dot HTML file, checking my local host. Right now I can see the text here of top bar works, which means that the component is actually presented on my screen in the content of that component is top bar works. Talking about that content. Let's create some here. So in here, I will remove this paragraph and I will add one div with the class of top bar. This class will be later used for styling. Now, this top bar you can hear two sections. First section can be a logo section. The second section can be an navigation section. So now that we have these two sections in my logo section, I will, well, I won't use any image for a logo, or they'll just use H2, which will say tasks. So task up. So let's use singular heel here. Now for my navigation here, I will create navigation with unordered list. Then first list item will have an anchor tag. This H ref can lead to a hash. For now, you will later see how to do a proper routing in Angular. Here, what I will do, I will say, whoa, now I will copy this list item. Down below. And for the second list item it can say about. So we can have two pages Home About page for our application checking. Now while our local host, this is what we here, just some kind of logo, which is task cap texts and two links here. So let's style this application is we are writing this code in a top part component. We are able to open up the CSS file of it and style this component actually, to style this top bar, I will grab my top bar divided by n. I will display that as a flux. Then I will justify content inside as space between. And I could add some box shadow, for example, of 02 pixel, five pixel. And let's say it can be zeros, zeros, zeros, zeros, zeros 0 for D to have some transparency to it. Also, I can set up the bedding of 20 pixels. Now this will be our top bar. Now, let's style our navigation. I won't bother with the logo. So top bar, then my navigation section that they have and then unordered lists that I have. The list style for these will be none because I wish to present links one next to each other and not an actual list. Now below, I could again target my top bar. Navigation unordered list and each specific list item below. For each specific list item, I will display those as inline to be next to each other. And I will add the margin on the right side to be ten pixels, so they could have a bit of spacing between those. Now, again, target my top bar, then navigation that unordered list, list item and each specific anchor tag in our list item. Here, I will set font size of 20 pixel. Then I will use text decoration to be none. And let's change the color here. Color of my links can be 333333. And finally, I will again target my anchor tags, but this time hover effect on those. Then also active and also focus. So for all of these, I will just change the color to be 777777. And with this, we actually have our content, HTML, styling, our CSS code for our top bar. In how does this component knows about this? Well, in top bar dot components, the ts file, we can see where we declared our component. There is a selector, but there is also a specific template and also specific styles that is past that template. So this is basically the setup for our component. On my screen right now we can see our top bar. There is log on the left side and home and about links on the right side. I can even zoom a bit so you can see it better. The good thing about this top bar, well, it's a shared component, which means that when I go to my homepage, I will still see, I should still see my top bar component. And also when I go to about page, I will again still see my top bar component once I set up everything well, my routing and the pages as well, talking about debt, right? In the next video, we will work with our routing. 6. Routing: So routing in general, well, on a Web is rarely used today. There is almost no website or no application that has really has no routes. So basically whenever you wish to move from page to page or click on a specific article to read that article. That would be the routing. All of those routes must be set up inside of the application. And also all of those routes must know which content exactly to present to the user. And in England, that is really handy because Angular has its own angular routing. So why it's important that Angular has its own routing? Well, many technologies today, even the popular ones, does not support the routing from the get-go. So you'll need to set up the routes and the routing. And it is quite hectic to work with, but in Angular that is already setup. So if you remember when we generated our application next to the angular module, we also had this app routing module. And this is the place where we will set up our routes. For those routes, I wish to hear my home and about page. So I will create now two pages, home and about page. Pages are nothing different than just components. So what we could do actually is generate here two components. So again, let's use that CLI tool. I will use N, G, G for generate C4 component, and that will generate my homepage here. Once this is finished, I will repeat the same command, but this time for about page. Now that we have our pages without components for a home. And also about page, well, we could set up our routes here in these routes array. So to set up the route here, I will use the object. And inside of this object, I can use the path property, this path. Well, we should also declare a pair to where we wish to lead our user. So as I have that homepage, I believe my user to a home route. For this home route, I should also create the component will use the specific component that should be presented on this home route. And for me, that will be home component. Just be sure at the top to import this home component. Visual Studio Code is smart enough to do that automatically for me. Now, let's create the next route. So comma here and then the next object for a pet of about, then the component for this page will be about component. I also used here capitalised about. I will change that to, well, all letters to lowercase. Well, at this moment, we do have our routes here in the URL. If I would change my local host to slash home. Well, home will still be in the URL, which is good. If I would change it to about. It is still there. So Angular actually knows about this. There is no content on the screen, and we also are unable to change the route by clicking here, you can see just cash here, but we will fix that. So also when I come to the local host port 8200, there is nothing here because they have this home page and also home route. It would be good to automatically redirect the user to the homepage to set up that re-direct at the top of my array here, I will create the new route. This new route will have, well, it should have a path which will be just the empty string, which means when the user just visits our domain. And once that happens, I will use property of re-direct to and I will redirect the user to my homepage. And the last thing, we should also use path match, so how our pet should match. And here I can use full match for my path. So now quickly checking my browser, if I would remove this column from my page and just enter my domain here, we can see that still we are redirected to the slash home because that red direction was in place. Now because I'm on this homepage, I should see some content here, at least that dummy text that comes with Angular. Home works, right? But there is no content here even though the home route exist. And we know that we have that home component. Well, even though we have that routing in place, angular still doesn't know where it should show those components. So in my app dot component dot HTML file, where I have this top bar, right below, I will use element called Router outlet. This route and outlet will basically outlet our components inside. So depending on which route we are like home or about, it will grab those components that are used for those routes and present those right here in displays wherever we use this route and outlet, if I would use it somewhere else, it will present those components there. And now we can already see a change. We see these homeworks. If I would manually change the page to slash about, then I would see about works. But I said the manual and right, so we are still unable to change this by check, by changing the links here, right? We are just move to that hash, which is not existing route for us. So for that, we actually need to go in our top bar component where we have these links. So in Angular and instead of using a draft like this, we have something differently. It's called a router link. This router link can lead us somewhere. For me here, it will lead me to the slash homepage because this is a home route here, also four down below. I will again remove this H ref and use hear slash. About. Now we do have some errors here. It's because this router link is not known property to this specific element. And it's not that it is unknown property. It is because in this top bar component, well, this top part component belongs to the shared module. This shared module doesn't know that we actually use routing in some of its own components. So it is really easy to face this in the inputs array where we usually imports are modules. Well, we can just import module of router module by importing this module and also be sure to import it at the top from an angular slash router. By importing it, we will lose those arrows. Now what does this mean? If I would click on About, it will move me to the About page. If I would click on home, it will move me to the homepage, which means that we have our pages in the routing in place. Now, next to this routing that you saw, the redirection and also how to set up the links to work with routing and the pages. That is much more to routing. The routing is a whole module can be setup also for a child modules, we could have children routes, we could have also dynamic routes by specific ideas or by specific slugs as you wish. We could also pass data from one route to the other route. We could also tap into our routes and do something specific with our routes, may be pulled the parameters from the routes and much more, much more. But the routing in Angular could be its own course, to be honest, it can take probably an hour or two or three just to explain it fully. So instead of doing all of that for this crash course, we will just continue with this crash course to finalize our task application. And we will continue with the services. 7. Services: So another really important feature of Angular, it's called service. Service or services are actually injectable features, which means that we could inject each service wherever we wish, in our different components, in our different directives, pipes, Wherever we wish. And why would we want that? Well, services because those are injectables. Those are mostly store our data whenever we wish to tap to our server to get some specific data, or we just wish to store locally some of the data in our application. We will mostly do that in our service. And as the service is injectable feature, it can be injected wherever we need it and pull that data from that specific service. To create one service, we will again use the CLI. So here I will use N, G, G for generate, S for service. And the service is injectable wherever we need it. We will again generate this service in our shared module. This time, I will generate this service in shared module than Services folder. And then the syllabus will be named Data Service because we will actually work with the data inside of this service. So now in my Visual Studio Code, I can go into my shared folder than services and open up the Data Service. When we generate the service, it will come with two files. One file is the class of the service itself, and the other file is a test file for this service. So we will now focus on these data that service dot ds bar. At the top here we can see that the syllabus itself is injectable. And here we can also see that we are using that injectable decorator to describe this service. So where can we inject this service by default in Angular? The service will be provided well injected on a root level, which means that wherever we use this service, we will be able to use it if you wish to provide this service. Just specific module. You can specify that module here and actually Important debt service in providers array of that module. That way you can have a specific services for a specific modules. But there's, this is a small application. We don't need to worry about that. We can just leave it as it is to be provided on a root level so we can use our service wherever we need it as the service will hold our data. Let's work with some dummy data here and also share that data to different components. So what I will do here in the class of this service, I will create a public property. We don't really need to declare a public or a private property, but it is a good exercise to do that because angular is a TypeScript technology, right? So the TypeScript at the end will be compiled into JavaScript by doing those specific keywords like public or private or specific types. The TypeScript will do that much more smoothly. So here I will create the public property of username. And this here will be the type of string. By default, this username can be John Doe for example. Now we have this username data in our service and we can share it from here wherever we wish. So what would be good for us to share it here? Well, after my constructor here, I could actually create public property, which will be get username. This here will be a method and it will return a string back. Why it will return a string back? Well, we can use here return and then this username, this means that wherever we use this method, it will agree about username and it will just return the value of that username back. So let's actually try and use this username in our homepage here. So open up the TypeScript file of this goal. At this moment, the home doesn't know about this Data Service. So in the constructor of the hole, we can create the private property, which can be data service. And we can set the type to be Data Service. Just be sure to import that data service at the top here. Now, the home component does know about this Data Service. Also, what is the difference between private and public properties? Well, public properties, you can use those outside of this file, but private properties cannot be used outside of the file. Those can be used just in that specific class that those are declared in. So now actually in this Mg on init method, we will grab our username. So for that, let's create here first of all, public property. Again of username, which will be a string. And by default it will be an empty string. So now in this engine in it, I will use this username and set it equal to this, that Data Service dot get username. And by this, this get username will return back the string of username back to us. And that string will be stored in our username property inside of these components. But why did we use this in this NGO? Ngo minute is a lifecycle hook in Angular. This lifecycle hook will run whenever this specific component a loaded, well initialized. Which means that when we visit our homepage, this code will run. There are other also life-cycle hooks that we can use N G on changes in June, destroy, and so on. But we won't bother with those here just because those are much more complex to explain. And this is still a crash course. So how could we know that this username actually has a data? Well, let's go into our HTML here. And instead of this paragraph, I will use H1 tag here. Here, I will use property binding in Angular to do that, use curly braces, double curly braces, and inside we could pass our property. For that, we can pass, for example, our username. So this username, once it has the data, it will be presented here in H1. So we can present that. Well dynamic text. Now, checking my application, we can see John Doe here. If I would go to the About page about works, come back to home. We can still see this John Doe, which is really good. This means that we store our data in a service. Then we move that data into a specific component and we showed it on a screen. But you can now say, well, that was just the username, that's not actual data. This was just a dummy data that we created. Well, in the next video we will actually work with the http, where we will dispatch kept calling from HTTP to pull some data from a server and actually present some real data on the screen. 8. HTTP: So HTTP or Hypertext Transfer Protocol is an application layer protocol. It is designed for communication between a web application and web servers. It does that through multiple methods that we can use. Like get method to get some specific data or post method to save some specific data. Next to that, it can be used to pass headers to the web server itself. So we could, for example, authenticate our user with the proper token. Also, we could send specific parameters through this HTTP call. And that way, our server could tap into our database based on those parameters and pull specific data based on those parameters. Something like that is mostly used for filtering data or sorting data. And HTTP does all of that with a simple request and response messages. Now, http is nothing specific to Angular. It can be used in any kind of technology that is able to contact the server. So we could use it in, well, other JavaScript frameworks like React or view, we could also use it in raw JavaScript. Next to that, we could use it on a silver with NodeJS, Python, C-Sharp, etc. But Angular has its own module for the HTTP. Many other technologies doesn't support their own module for HTTP, but the angular does. With that module. We are able to use HTTP and all of its features well, through much easier way which you will see soon. But the first thing here is that we need to import this HTTP module into our application. So our application could actually use it. To do that. I will open up my app data module dot txt file. In the input array of this file, I will add HTTP client module. Now, this won't be imported automatically. So at the top here, I will import this HTTP client module from Angular slash, common slash HTTP. And that's it. With this here, our application knows about this HTTP client module that we can use and we will use it. So we will use this HTTP module to pull some specific data and we will pull the data from our JSON placeholder API. This API will cost for aswell many different dummy data. So we could actually use it to test our application, which is really good example for this course that we are working with here. If I scroll down this JSON placeholder website, here we can see different resources that we can use, like posts, comments, albums, photos to those users. If I would continue scrolling down, we can see different HTTP methods that we can use git to get the data post to save data, PUT or patch to update data, delete, to delete data. Now a link to this website you will hear in the resources of this course so you can always visit it and try to work with a specific data from this website. The data that we will work with is this to-dos. So even though we are creating the task application, we will make sure that these two, those are actually our own tasks. So let's go back into code. Let's go in our shared services and open up this data that service dot ds bar. Now that we work with this get username method, I could actually remove this getUser main method and also remove this username from here because we won't need it anymore. Also, I must go into my home than home component. Remove the username from here, and actually remove the call to this get username method related to the input of this Data Service. I will still keep it here because we will need it. So going back to my service here, I should be able to pull the data from that JSON placeholder API. To do something like that, we must indicate to this service that we will use that HTTP client module. And HTTP has its own provider that we can use, which is also injectable, which means that we could inject it here in this service. So I will create private property of HTTP, and I will set the type of it to be HTTP client. This HTTP client must be important from an angular slash, common slash HTTP. Just be sure that before this, you actually important this HTTP client module in your own app, that module file. That way you can use this HTTP client. Now, let's create the method that we're going to pull those to-dos for us. So here I will create public method because we will use this method outside of this file. And I will name it, get tasks. Even though we are pulling the two doors from that adjacent place called the API. I will still renamed those to be tasks because we are creating here task application. This gets tasks method will return something to us. It will return the observable. And the observable should have a specific type here, which I will come back to. First of all, what is observable? You can see that observable is something that belongs to that add extra yes, library that I mentioned at the beginning of this class. Well, Alex JS library is vast. There are many methods and many features that it has. So I won't go in depth with it because it can take the whole course just to explain it. But in a nutshell, observable is something that will wrap our data for us. It will wrap our tasks. As it will wrap our tasks, we will be able to well tap into those tasks and use different methods on those tasks. So if you need to transform your data, the observable is good option for you because you could actually map to those tasks, transform those as you wish, and return back just the data that you need for us here. This must return observable here, because HTTP client from England always returns the observable back. Because that way it is much easier to work with data by utilizing that observable, which you will see so, but now related to this generic type that must be passed to this observable. Well, we must pass the actual datatype that we'll go here. And for now, we don't know actually what kind of data we will get back from that JSON placeholder. So I will set the type to be any here. And later when we have actual data, we will get that data and check what, well what actual data we have. And we will create a specific model for that data, but more on that later. Now, inside of this method, we could actually write our code to get the task. So here I've used the return and I will return this, that HTTP. So I'm calling this HTTP model. And only time will have different methods that I can use. One of those methods is this getMethod. Inside of this get method, we should pass the string to the API. Well, the string of actual code that will get the data for us. Going back to the JSON placeholder website, clicking on these two doors, I could see here that it will pull 200 to-dos for me. Right here in the URL, I can see the actual URL that will do that for us. So let's just copy it Back in code. I could simply paste these two doors here. And as it will pull too much to do is like 200 of those. I don't really wish to work with such amount of data. So I could hear set the parameter, which is underscore limit, and I will set it equal to five. This way, I will pull just the five to-dos from that JSON placeholder API. This underscore limit is not always the same. Every API will have its own parameter. So if you are building your own API, you will have your own parameters. It just happens that the JSON placeholder API uses this underscore limit. And with this, we are pretty much finished with our Data Service. Now, let's go to our home components in the, actually get that data in this component, in my home component here, in my energy on, in it. I will again use this dark Data Service. In this time, I will use a method called get tasks. Now, this method should return, well, our tasks back to us, but as it is observable, we can use specific methods on it. As it is observable, it will return that wrapper of data. So here we could actually use that subscribe to subscribe to our observable. By subscribing to our observable, we will actually get direct response from it. So here I will use response, which I should set the specific type of this response. The type will be the actual data that we are getting back. Currently, we don't have the specific type, specific model for that data. So I will use any here, but I will come back to this later. Once I hear my response back my data back, I could actually use here arrow method and simply console.log my response. So I will use console log of data and then the response. So we could actually see what we are getting back. The good thing about these subscribe, it doesn't only handle the response, it can also handle the error. So here I could actually pass the error. And console dot log that data. So if error occurs, we will know what this error is. And we could actually handle it by showing some kind of alert on a screen, for example. The last thing before checking our data, I will open up the home dot component dot HTML file views here this username. And as we remove the username, we don't know much about it. So I will just move this text to be Hello World once again. So we could actually make these components well workable. Now, inside of my application, if I would. Well, check the console of the application. I could actually, I will actually see this data log, which will present the array of five items inside. And all those items are actually the to-dos from that JSON placeholder API, which means the tower request for the data was successful and we are actually getting the response from that HTTP. Now, the last thing before I close this video, it is already long enough. I will go back into shared folder and create another folder is site called models. Inside now I will create the model of my data. So here I will create a file called Task Data Model Ts. So in this file, I could export the interface of a task. And inside of this task, I should declare what kind of properties might data of tasks should have. And in my application, I have those properties right here. I have a completed value of Boolean. I have the ID of number, title of string, and user ID of number as well. So in my task, I will create completed value of Boolean. Then I will have ID of number. Then I will have title of string. And finally, user ID, which will be number. So now that we have our task model, we can actually use this model instead of debt. Well, any type that we use. So first of all, back into my service right here, I'm using the observable, which will return any data back. So here it should return the task data back. Just be sure to import the task here from a proper task data model file. In here. It won't actually return just one task, but the array of tasks. So here I will set that it will return back task caret. And as I'm declaring that the generic type here, this getMethod, should also know which kind of data it will get back for us. So I will pass again generic type here and again use that task array with debt. We should also fix the error here. Now from here, let's go to our home dot component that P is file. In here. We do have our response which we'll return back Just that any type. So here I will set again task from a specific task model that we created. And it will be Task array. With this, we are pretty much over with this lecture. You saw how can you use HTTP module? How can you get the data from your API? Pass that data from a service to your component, and actually created the model for the data and prepare the data to be usable in your application. In talking about that, in the next lecture, we will do exactly that. 9. Templating: So related to this lecture, we will actually store our tasks locally in our home component and use those tasks well to present those on a screen. So first of all, let's store those tasks here where I'm getting the response of data. I could actually store that response in some kind of property. So here at the top, I will create public property of tasks. And it will hold the type of task Curry because it expects that data. And by default, it will be an empty array. Because by default we don't know if we have any data. But once we get the data, once we get these tasks inside of here, I will use this dark tasks property that we just created. And I will set it equal to the response that we're getting back, which are those tasks well-to-do from JSON placeholder API. Now that we have these, let's go to our home, that component, that HTML file and create some content and also style that content. So inside of here, I will create the deal. In this div can hold a class of tasks. This way it will be easier later to style. Inside here, I will put the h3 tag for a headline, which we'll see just tasks. And after the headline, I could actually create the list of tasks. To do that, I will create the photos task, which will hold the class of tasks. And what should this task actually here? Well, we could span, well, the title of the task and I will set that in a span. I will also wrap it with the bold text and we could type, for example, learn Angular. This is one of the tasks, for example. Now, next to this title of a task, it could be good to actually use also the completed value of the task. So we could see if we completed specific task. So here I will again use this pen and inside I will just use completed text. Here you can use some kind of icon or an image, but I will use completed texts. It is easier that way. Now, let's grab this whole task and copy it. Let's say three types, 12. So these are three tasks. Let's, let's change the values for those tasks. Here, I will say wash a car. And also the last one can be by a meal. That's pretty much it. In our application, we should see something like this. Let me zoom in a bit. So we do have our title of tasks. Each task will have its own like title and also completed the text for it. Let's also style these a bit now. So to style these, I will open the home dot component dot CSS file. Inside, I will grab that main tasks that we have. I will set the width of the div to be 500 pixel. I will set the margin to be 100 pixels, top and bottom out of left and right. So we could align it to centre in Daniel set the text align center as well. Now each task that to help, I will grab that task. I will display that as a flux and I will justify content inside to be spaced between. And last thing, I will text align everything to the left side. This way with this space between our title of a task should be on the left side, in this completed value should be on our right side. And finally, I will grab that task again. And the span elements inside that I have, I will just put a bit on margin on those, like ten pixels, top and bottom, 0 pixels left and right. And this is what we shall now, these are the tasks. This is the list of those tasks. But obviously these tasks are hard-coded. We're not actually using the tasks that we got from the API. So let me show you how can you handle the templating in Angular. To do something like that, I will go back into the HTML. We will use the directive called MD4. Md4 is a loop that will loop through some specific data. In our example, it will loop through tasks data. And for each task specific, we will generate one bundle of code like this task wrapper, this task div that we have with the content inside. As we will need only one of these, I will actually remove these two tasks. This was, these were just the dummy task so I could show it. How can we look? But now let's use that energy for directive on a deal. I will use star then mg for to use that loop. So here I will loop through my tasks. So for each task I will get the variable of life task for example, this here you can name it as you wish. I will limit task for a naming convention. So let's task or tasks. So now we're looping through these, through all of the tasks. And everything in here will be, will generate it five times because we have five tasks. So instead of for all of those five, just showing this text, I will remove that learn Angular. And here I will use the task itself. And on a task, I do have property of title. So each task should have a proper title here. And now here it is. We do have our appropriate tasks from that JSON placeholder API. You can see that all of the tasks will have their own proper title and the completed value next to those, which is not yet used properly. We will use it properly in the next video when we work with a specific styling for it. But before I finish this video, I forgot that we also do have about page. So let's add some content to this About page. For this About page, I will create one div, which will hold the class of main content. In the inside, I really create the paragraph with some Lorem Ipsum text. This paragraph, let me grab this text and actually copied few times like this. Now from here I will open up the CSS file, grab that main content class that we have. I will set the width to it to be 900 pixel and also margin to be 50 pixels top and bottom out of your left and right. With this here, with our homepage almost finished. We will also have the about finished, well, About page finished as well. For the About page, I don't wish to show anything much because the whole content of the task application will happen on a homepage. But as we already have this About page, Let's just put some dummy content to it. You can play around with it. You can use some images. You could, for example, set the title and even utilize the tasks from here, also an About page. It's up to you. But for the next video, we will actually work with styling. So you can see which different styling we can use in Angular. And also, how can we use dynamic styling as well for each specific element. 10. Styling: So what are those different stylings that we can use in Angular? Well, first of all, when we generated our application, you already saw that you could choose a different style sheet format like CSS, Sass, less, and so on. But also when styling your app, you have different methods as well. So for example, if I would open up this angular, that JSON file, in this file, there is a Styles array here. We could actually import here external styles like from third party libraries like Bootstrap or tailwind. Next to that. In our application, we should also have these styles that CSS file, this is a global styles file and you can see already the comment here that you can add the global styles to this file and also import other styles files. This here is very helpful when you are working with SAS, for example. So you can import all of your own files that you have into one file next to debt. If I would go to home. Inside of the home component, we can find a CSS file, so we are able to style each component with its own specific styling. And if I would style something specific in this component, well, that CSS code is only specific to debt component, so it won't be passed to other components. And obviously there is inline styles that we can already use in HTML. But we can also further utilize these inline style for some specific styling for our specific elements that we wish. So for example, I do have these tasks on my screen, and some of those tasks are actually completed, but I'm not indicating that here at all. It is just completed the text here. So now I will use that inline styles to style only the specific tasks that are completed with the line through these texts. So to do such a thing on my completed text here, I can use these angle brackets and use style here. By this, I am binding the style attribute from this span element. Here, I will use dot and then use text decoration, which means that I'm targeting the specific attribute of text decoration. I mistyped here. Text decoration. Yeah. And I will set that to be equal at here. What I will do, I will check if my task is completed. So I could check if it's true or just tasks that completed. We'll also check if the value is true. If that is the case, I will use line to rule styling here. Mistyped again, you have. And if that is not the case, I will just use empty string here, so no styling here at all. Now on my screen, I can actually see that these completed, this task. He has this completed value. It is already completed the task, which is great. How could we further, we'll work with this task application. Well, it would be good if we could actually complete or incomplete one of our tasks. So for that, I will move myself to home that component dot txt file. And here I will create one method. So after this engine in it, I will create a public method because this method will be used outside of this file. And the method will say complete task. Method won't return anything back, so it will be a void method here. This complete task will expect the task to be passed to it. And the task should have its own proper type, which is the task model that we already created. And what I will do, I will grab that task and a completed value on it. And I will set it equal to, well, just reversed. So task dot completed again with this exclamation point at the beginning. So this means if the completed value is false, it will be true. If it's true, then it will be false. So that way we could complete an uncompleted task all in one go. So how could we use this complete task now? Well, on my home, that component, that HTML file, I will use it right here when I click on this completed text. First of all, let me bring this down a bit so you can see everything clearly. So we have our styling here and here, I will now use click event. To use click event, we just use braces here and we have options for different events. I will use click event, and once this text is clicked, I will use that complete task method that there is currently an error because this complete task actually expects a specific task. So here I will just pass the specific task from our rule, from our task, our NG for loop. Now back into my application here. If I would click on, for example, this completed texts, we can see that it kinda complete that We'll move its value from false to true. And if the value is true, then we will have that text decoration to be aligned through. So we are completing our tasks here. Also, I could click again to complete those tasks as well. So with this, you saw how simple it is with just one function in the bit of inline styling to have a specific styles for each of our tasks in our array. And with this here, we are finished. This is it, this is our application, but we're still here. One thing to do, and that is deployment. 11. Deployment: So when deploying the Angular application, we hear multiple options to do that. Also, before we deployed, there are a couple of steps that we should take care of. For example, we should build our application. As you know, our current application that we hear, well, all of the components are actually TypeScript files. Typescript is something that is not readable on a browser. The browser reads JavaScript. So by building the Angular application, we will also compile the TypeScript code into our JavaScript code. And that is why Angular is JavaScript framework even though it uses types. So where can we deploy this singular application? Well, there are multiple options. We could simply deploy it, for example, to Netlify, or we could build some custom silver and deploy everything together to Heroku. But I will take probably the easier approach here, which is deployment to Firebase. That approach is also more professional because the Firebase is very often used with Angular. So why Firebase? Firebase and angular will, both of those are actually Google products. By dead. Those are very well connected together. So it is really easy to actually deploy England application to Firebase. Firebase is a Google product, will offer many different features to us. It can offer to us like real-time database or a fire store, its own database. It can offer to us a hosting that we will use in this video. Well, to publish our application to Firebase Hosting. There are bunch of different features and products that Firebase users. And you will see those Wellstone when I enter actually into the Firebase. So before we do anything here, be sure to have a firebase account. So grab your email and sign up to Firebase. It is free, so you can do it. Once you have your account setup, then you can follow along with this video and actually deploy your tasks application. So if you have your own Firebase account, you should be redirected to this console workspace of Firebase. So in here, we can actually create a project. Well, a Firebase project. You can already see that I have some dummy projects from previous tutorials, but let's focus on this one. So to create the project, click on this Add project. Obviously in, in here, we should write the name of the product so it will lose task up. The name will be Task up, but there will be a specific id assigned to that project actually. So it will be unique to your, your profile. From here, I can click on Continue, and then we're asked about the Google Analytics. So will be used Google Analytics so that Firebase could set up that automatically for us. I will disable this year because actually we don't use Google Analytics and our task cap is very straightforward application. So we can simply go and create the project here. You can wait a bit, and project will soon be created. After that, you should be redirected into the dashboard of your project. Well, whoops, My mistake. You weren't ready directed. So you should click on these Continue button to be resurrected. And here it is. This is actually a project. This is your project. Let's put us the wall, see what we have in this Firebase project. This is not important for this tutorial, but it is really good to know because Firebase is really high product out there and it is very often used. So here, first of all, we can get started with Firebase by deploying one of our applications like iOS, Android, VAB, even unity and flatter applications are supported with Firebase. Also, on the left side, we have different options. If I toggle this build, there are everything that will our application needs. Basically, we have specific authentication, we have database, we have a real-time database. There are extensions, storage, hosting, and many other things, even machine-learning. Now, this is just about the project, but if I would go to release and monitor, this is that part with the analytics, it will check the performance of the application so you can see if there are any crashes next to debt. The analytics itself, the Google Analytics, is fully converted here. So you will have your own dashboard and you can follow along with the real-time, your specific events, your conversions, you can follow basically everything inside the Firebase dashboard. And finally, there is engaged section, which is mostly used for marketing purposes. Button annex level, I would say there is AB testing that you can set up, reach your application. That is, add more of that you can connect and actually have your ads directly in your application presenting. And there is much more to do with that. In here you can see all of the products actually that Firebase supports, and that is quite a lot of products. You need to know that each of these is a basically a separate product that is supported with this global Firebase product, which is amazing. So I will go back to my project overview. And we can start from here. And I liked the once again, before we do anything with the Firebase and we connect our project with the Firebase. We should build our application. We should compile that TypeScript into JavaScript. To do that, you can simply use NG build. In previous versions of Angular, you also have to use dash, dash prod. This is a flag that will indicate that you need to build for production. But in this version, it will do that by default. So just use command of n g build to actually build your project. If the build worked successfully inside of your project, you should have a new folder called beast for distribution. And inside should be or task application, but this time in the JavaScript code, well, code is quite bundled, minified, so it is hard to read, but that's pretty much it. Now we have our distribution application, well, our application ready to go to production. Now back into our project overview. Inside of here I will go into this build section and select hosting. Now, inside of hosting, we should enable it or get started with it. So I will click on this and there are basically the steps that you need to take. First of all, we must make sure that we have Firebase tools installed globally in same way that we did for Angular CLI, because Firebase actually has its own CLI tool that will help us with Firebase applications. Well, Firebase products, I do already have this Firebase tools installed, but I will still continue with this. So you can see the process itself. Now in the terminal, I will actually remove this, will clear this part of the terminal, and then I will paste that npm install dash g for globally and Firebase to hit Enter and wait for it to install. Now, once it was installed, I will again clear my terminal. Now, the next thing, because we have Firebase tools installed, we can use Firebase login method to actually login your own CLI tool V to the Firebase on the web. So be sure to run this method. I also mistyped Firebase login. And be sure to run this method, you will be redirected to the web version of the login. You will log in with your proper account and you will be able to come back here and continue working with this CLI tool. For me, I'm already logged in with my user, so I don't really need to do that. But what we need to do that is you initialize the Firebase project in our application. To do that, I must run a Firebase in it to initialize it. So Firebase will just ask for confirmation or we're ready to proceed and I will go yes, here. Now in here, maybe this is zoomed in quite a bit. Let me zoom out a bit so you can see it. But in here, we have different Firebase product that we can use like real-time database via restore functions hosting. This part is what we need. Also, there are two types of hosting. One is to host directly from GitHub. And this, the first one is to configure the files that we wish to publish the hosting. And optionally we could set up the GitHub. And I will go with death. So here I will hit space to select it and then Enter to confirm it. Now once again here now we have option to use our own specific project. So we can use existing project, create a new project with Firebase tools, The Fighter based on existing Google Cloud Platform project. But I won't bother with that. We will definitely use existing project because we already created tasks application. And now here we should see the list of our projects. And I will go with this task up. Now we are asked, what do you want to use as your public directory? What they are basically saying is which part of your role directory we should deploy to hosting. And for debt, that will be our deepest part. Well dist folder and task app inside because this is the actual workable application on the web. So to do that, I will lose here this then slash task up. In Idaho. If you can see this properly, I will zoom out a bit even further. So this slash task up. Now we can configure this application as a single page application. Well, Angular is a framework for single-page applications. So I will go yes, here as well. Now, do we wish to set up automatic build and deploy with well, deploys with gift up. And this is that optional part. So I will go no here because we don't have GitHub repository for this project at all. Now, this is kind of a warning or an error message like that. The file index.HTML already exist in our task application. And that is pretty much the truth in our disk. Then slash task cap, we do have our index.HTML file, which is basically our HTML content. But here we are asked to. We wish to overwrite that. Well, no, we still wish to keep our HTML content from our application. And with this, we successfully initialized Firebase project. Well basically we connected our angular application with the Firebase project. So there is only one more thing to do to actually deploy it to the hosting. I will clear this here. Now I will zoom a bit. To deploy it. We can simply use Firebase deploy. So how will Firebase actually know what it needs to deploy? While in here, when we initialize the project with Firebase, we actually got two new files. The first file is actually the project that is connected to this application, which is our task cap. And the Firebase dot json is the configuration of the project. For example, what should be deployed is that this slash task app. This is what we set up. There are rewrites that we can do. There are headers that we can set here and so on and so on. But this is basic setup that will tell it to Firebase, okay, this is what I wish to deploy to the whole thing. So we can simply continue here, Firebase deploy, hit Enter, and just wait for it to deploy it. Now once everything is deployed, we could actually, we will actually get this dummy URL directly to our applications so we could open it up. But I won't do that. I will go back to my Firebase here. As we now have a setup hosting, we don't really need to follow up with these steps because we already did those steps. So we'll just go x here. The whole thing itself. I could refresh the page. And on a hosting site, we do have now our Firebase. Well, our angular application, we can see, well we don't have that Get Started button anymore, but actually our application at the bottom we will see also the release history and also different channels that we can use. But here, if I would click on this URL, it will open up our application live. So this application is fully deployed to Firebase and ready to be used. They're ready for a world to see it. And we can see that our HTTP calls also work because we are getting the data from the HTTP calls. And we are also able to complete or uncompleted that our routing is working. When I change the route, there is a content in a different page, but that's pretty much it. So with this here guys, we were able to finalize our task application and actually deployed to Firebase. Now, let's all jump to the next video so I could say a proper thank you to you. 12. Thank You and Goodbye: Well, that's pretty much it. Thank you once again for taking this course in the first place. If you stuck to the end of these scores, you actually have your own angular tasks application built and deployed. Now, you can use that tasks application for your own portfolio as we deploy the application. So it can actually help you throughout your career as we build that tasks application, I honestly hope that you learn something new, or at least that you upgrade your knowledge of it through this application. And we worked with many different major features of Angular components, Services, HTTP module, routing, and so on. But what you should know also is that there is much more going on than just on my YouTube channel. You can actually find the angular is central series where we go to all of the features that Angular has to offer to us. And if you're interested in material, that is also Angular Material series for you as well. Now once again, before we close this course, well, my name is Stefano marriage, and I have more than seven years of experience in web development. Next to that, I was your instructor through this course. And as I mentioned, next to this Skillshare courses, I also hear my YouTube channel called numerical. So be sure to check that out as well. Also, if you would like to watch more courses from me here on Skillshare, you can visit my profile and select one of my courses that I have there. For example, there is Angular course there as well. There are other courses for JavaScript, Bootstrap Node JS, JS, and so on. But with this, we are pretty much finished. Thank you all once again, thank you for taking this course. Finishing the course, actually, also be sure to submit your own projects and that you build through these scores in the project section of this course. So we can all together go to those, talk about those maybe also you have some specific questions that I could answer, but thank you all once again, and I will see you in my other courses. Bye-bye.