Architecture of Angular 2+ Apps

Key Takeaways

in the nutshell we have four key players in an angular 2 app components directives routers and services let's take a look at each of these building blocks in more detail at the very core we have components a component encapsulate the template data and the behavior of a view so it's more accurate to call it a view component every angular 2 app has at least one component which we call the route component but in the real world an application often consists of tens or hundreds of components for example imagine we want to build an application like udemy we can divide this page into three components navigation bar sidebar and courses so each component has the template or HTML markup for the view as well as data and logic behind that view components can also contain other components so in the list of courses we can have multiple course components and in each course component we can have another component for rating that course the benefit of this architectural style is that it will help us break up a large application with various complex views into smaller more manageable components or as I said view components plus we can reuse these components in different parts of an application or even in a different application for example we can reuse this rating component here in a totally different application now you might be saying look Marsh I understand what you're saying about components but what are these components really like in the code a component is nothing but a plain typescript class so just like classes in other programming languages it can have properties and methods these properties hold the data for the view and the methods implement the behavior of the view like what should happen when we click a button now if you have never worked with angular before one thing that may be new to you is that these components are completely decoupled from the document object model or dumb in applications written with plain JavaScript or jQuery we get a reference to a Dom element in order to modify it or handle its events in angular we don't do that instead we use binding so in the view we bind to the properties and methods of our component if there is a change in the value of a property the Dom element bound to this property will refresh automatically so we can't and shouldn't get a reference to that Dom element in order to update it similarly to handle an event raised from a Dom element like click we bind that event to a method in our component when the user clicks that element the corresponding method in our component will be called now in case you're curious why these components are decoupled from the Dom the reason is that this makes our components unit testable if you have a plain class that is nothing but a bunch of properties and methods we can easily unit test it without having a document object model now sometimes our components need to talk to back-end api's to get or save data to have good separation of concerns in our applications we delegate any logic that is not related to view to a service so a service is just a plain class that encapsulates any non user interface logic like making HTTP calls logging business rules and so on we have another key player in angular apps and that's a router which is purely responsible for navigation so as the user navigates from one page to another it will figure out based on changes in URL what component to present to the user you will learn more about this in the section titled building single page apps and the last key player in angular is a directive similar to components we use directives to work with the Dom but a directive unlike a component doesn't have the template or HTML markup for view we often use them to add behavior to existing Dom elements for example we can use a directive to make a text box automatically grow when it receives focus angular has a bunch of built-in directives for common tasks like adding or removing Dom elements adding classes or styles to them repeating them but we can also create our own custom directives so this is the big picture as you go through this course you will see each of these building blocks in action well hello it's Maj here your angular 2 instructor thanks for watching my youtube channel this video you just watched is actually part of my comprehensive angular 2 course for beginners in this course I'll walk you through all the core concepts of angular 2 in a step-by-step and pragmatic way by the end of watching this course you will have all the necessary skills to build real-world applications with angular if you want to find out more about this course and the content I've covered click on the link in the video description with this link you can get the course with a discount hope to see you in the course