Frontend development with JavaScript Framework, Section 6. Getting started with angular. In this section and for the remainder of the course, we're going to focus our attention on the frontend development using angular. What is angular? Angular is represented by the letter A, the MEAN stack. It's an open source JavaScript framework created by Google back in 2010 for single-page application development, mainly for the frontend. The first version, what's called AngularJS, and it was written in JavaScript, Version 2 came out in about 2016 and they dropped the JS from the name for two reasons. One is because it's written in TypeScript, two is because they completely wrote the rendering engine. It's a different model from the first version. Nowadays when you hear the term angular, it always refer to this newer model. If you're not too familiar with TypeScript, don't worry too much about it because the code, the syntax is just fully so similar to JavaScript, it's actually a super-set of JavaScript, so you should be fine. The version that we'll be using for this course is angular 9, which is also the latest table version at the time of this recording, and they release a new version or major version is released every six months, so that's pretty interesting. Let's take a look at the angular architecture. An angular is compulsively application. The Angular application is as a root module and then has a root component. These are really important to understand and we'll see that later in the code. But as your application grows and you have more components, you can have child components, and those child components can have their own child components. You have this hierarchical structure, looks very similar to the DOM tree to me. As you add more and more components, you usually want to combine together. You have something called a child module. So you can have other modules as well. It wouldn't be complete though because angular needs a way to communicate with the outside world, meaning with the servers. You can have this thing called HTTP client, which is a really important module that Angular uses to communicate with the server through AJAX. It has a built-in routing system, so you can use the router to configure your own routes and the router will also detect routes in the URL. Pretty handy and pretty cool. I think one of the most important features in angular is this services or service and this DI system here. These are important because with a servers, you can inject this information or in this case like a data source or data center somewhere in the application to each component where they're needed. You can inject data to the child component, to a module, or even to another angular application on the same server. That's pretty interesting. Let's take a look at an example of what application will look like. This is the app, the same app that we build in the backend. We're going to rebuild this again using the frontend using angular. Angular is a component-based framework, so each of these little things you see here is a component and you can envision what they may look like. On the top bar, that blue bar up there could be a header component. Within the header component, you can see I can break the left component too like a logo component, and the right side could be a navigation component and so on, and then we have the orange box there which could be the body component or the content, and we have a footer component at the bottom. Of course the footer is really simple, but you see that some photo can have like three or four or five different columns and have their own individual component as well. That is pretty much the logic here. Now, each of these components you see here is considered a view, is called the angular view. Let's take a look what the angular view model looks like. Here we have a module, either a child module or the row module that has the component. We saw the diagram earlier. The component has two things, a component and a template. The template is considered as the view where you see the things in the browser, and then the component is the source, or we call the business logic. If you think about the MVC paradigm, you should understand that really well. The view and the model and the source, the model is not shown here, but model can be coded within the component or in a separate module. You just basically put them in. But how do these two pieces, the template and component, talk to each other? It's through a metadata. The metadata, you can have it so that you can let the template and the component talk to each other. Otherwise, how did it know which template to talk to or which component to send data to? When they're talking to each other, I'm referring to data binding. You can bind data from the source out to the view through the property binding, or from the view back to the source through event binding, something you should be familiar with in JavaScript. If you have a data source or another component, a template that does both of these together simultaneously, then you have what's called a two-way data binding. We'll look at later in the course and a really interesting feature in angular. That's not all. Remember we talked about injection systems, so there's an injector that can inject services to a component and that those component can consume those services, things that data source for other functions and so on. Then the template size, you also have something called directives. These are mainly called angular directives and there are two types called attribute and the structure or structural directives. Things like ngIf, ngFor, model in class, and many others as well. These are just a special directives that allows you to perform some really simple expressions or decision-making and the template view side because you cannot write source code and the template. That is pretty much what the angular view model looks like. You'll see that this looks complex, but when you write the code itself it is not as difficult as it may seem here. That's the end of this video. In the next video, we will go ahead and start and create our very first angular application.
