A very simple view of the Angular architecture

let’s take a look at angular and you could ask yourself why angular because there are billions of people all over the world who don’t use angular and who are reasonably happy and even if they are miserable i guess angular won’t change that but if you are a web developer then angular might make your life less miserable in order to see how angular works let’s take a look at the way a web application works you have your web server and there you have some kind of programming language in this case it’s php. This programming language will generate html pages. The pages get sent to your browser and the browser will show the html page to the user. In order to create an html page you have to know html, css and a little bit of javascript, but not very complicated. You can probably copy and paste it from stack overflow because what are you going to do with this javascript code? Yyou’re going to check the input of the user.

mMaybe you’re going to add some animation 01:21 - and that’s about it. rRather simple javascript code There’s also another way that you can use your web application. You could also use ajax. When you’re using ajax your server doesn’t send your html page to your browser it will just send the data to your browser and then of course your javascript will become more complicated. because now your javascript code must also process this data, retrieve the data and insert it in the DOM-tree That means you will have rather complicated javascript code Ajax wasn’t used that often when you created a web application but things have changed rather recently because nowadays web applications are not only consumed by browsers but also by mobile devices. And mobile devices often use apps and apps have their own user interface. So they don’t need the html page.

They 02:32 - just need the data in this case it’s the word ‘welcome’ that is sent to the app and that will be shown by the app. So maybe it’s a good idea for your web server to send the same data to an app for a mobile device and to your browser. That’s the reason of course why ajax is becoming more and more important The way your server will send this information to these two clients is by using REST API’s or maybe another technique but REST API is rather frequently used and so that means that in your browser you will need more complicated javascript and so in order to help you write this complicated javascript maybe it’s a good idea to use a javascript framework Angular is not the only javascript framework you can use. React.js and Vue are also possibilities but in this case of course we’re looking at angular now let’s see what it means using Angular to work with a web application, to use angular in your browser etc This is a rather ugly but fairly typical HTML page and an HTML page has a layout you will have a header you have a footer. You have a main area and you have a sidebar maybe.

Some people compare this layout to the 04:01 - rooms in your house In your rooms you probably have furniture Furniture will be your components in your web page. You will have a menu, you might have a list, ,a form, a table and just as you can move furniture from one room to another in your house you should also be capable of moving a component to another plac, or reusing it somewhere else maybe also in another web page and that means that this component should be very independent because that’s the only way that you can reuse it that was the outside of your web application but now let’s take a look at the inside let’s take a look at the HTML code. This is the HTML code that was used to generate the aside with the list This part is in fact the part that should become the component. The aside is part of the layout but the ul and the li-tags are part of the component now it would be ‘nice to have’ to see that we can use a component in our html. In this case we’ve created a new element app-list and when we’re using angular we can use this in the HTML page so the HTML page will look like this.

We will still have the 05:38 - aside and there we have the app-list When we just have this app-list here then this it will always create item1, item2 and item3. Maybe it’s a good idea to make the components more flexible. The app-list component should also be able to show other text Let’s say we have a javascript function getItems() This javascript function returns an array with three names We want to use this information in the component so we have to make our component more flexible We do that by adding attributes to our app-list In this case the attribute is called ‘data’. You can give it any name you like and maybe, a bit special compared to the html attributes, is that we use square brackets around the attribute name but that’s just for angular. And here you can see that the contents of this data attribute is equal to the return value of getItems() and when we do it like this we will see that our component will show the three names instead of item1 item2 and item3.

07:06 - As an aside: the name Angular comes from the angular brackets that are used to denote a component: the open and close angular brackets the technique we’re using here is called databinding we have data in our javascript code and we’re binding this data to the DOM-tree it’s even live data binding because when we change the data in javascript the HTML page will also show this changed data. This new data To end this presentation we’re going to take a look at the simplified angular architecture let’s start with the component. That’s something you know. A component is something we use to show something in the html page and in angular the component has metadata. These are extra attributes that are added to the component They tell us something more about the component. A component only contains javascript code we also need HTML and that is provided by the template.

Component and template belong 08:25 - together because a component will send data to the template it’s called property binding so when we have data in the component it will be shown somewhere in the template. The template will contain html code Something we haven’t seen yet is that we can also have a dataflow going from the template to the component. So the other way around it’s called event binding let’s say the user clicks a button in the template and i have a function in javascript that can react to that Then i can bind that function to the on click event just as you can do in ordinary javascript code so these are the two data flows you have in your component you can send data from your component to your template that’s data that is shown in your HTML page but you can also bind a function to an event that occurs in your template Sometimes you have code that doesn’t need a user interface when we take a list component which we saw before as an example, the information from this from this component so item1 item2 item3 probably comes from your server. Of course you can write javascript code in your component to fetch this information from the server but a component should follow the Single Responsibility Principle a component is responsible for showing data on the screen and not for fetching data from the server. So that is the reason why we put this special javascript code in a separate class. In this case it’s called a service.

10:10 - A service is javascript code in angular that doesn’t have user interface It is probably just used to get some information from the server or to send information to the server etc the last part in this simplified overview of the Angular architecture are directives Directives are used in a template and we can use them to add programming constructions to our template let’s say in my templates i want to create html code that will show a table when there is data, and doesn’t show doesn’t show a table when there isn’t any data: an if construct. There is a directive for that, an if directive. if we take a look at the list which we saw previously the different items that were shown well i can use a loop for that. For each item in the list i want to generate an li tag. That’s a for loop that’s also an example of a directive so here we have the three parts which are important in the angular architecture: component and a template, we have the service and we have the directive.

This is the drawing or the image 11:22 - which is very important to think of when we go look at how angular really works.