AngularJS

In today’s article we finally enter the client side of the MEAN stack. While the database and the server are essential, the client is the only area that the visitor sees a page real and interacts with. Especially in the last few years, this area has developed strongly in technology. AngularJS is one of the most advanced and popular client-side application frameworks .

AngularJS is developed by Google and is based on the MVC architecture. At this point, I presuppose a rudimentary prior knowledge of MVC. Who does not know this concept, should be read here .

Like other modern MVC frameworks, AngularJS offers a so-called two-way data binding . This means that the data in the model and in the view are held synchronously. If you change data in the model, you see this effect immediately in the view. Conversely, the same applies. What this means exactly you will see later in practice. In this case, a code line says more than a thousand words! Two-way data binding has only one drawback: Once you are used to it, you can never again without programming It simplifies the code immensely!
The data binding of AngularJS has a special feature. Compared to other frameworks, any simple JavaScript object serves as a model. Other frameworks like Ember.jsinstead use a kind of proxy object with a special getter and setter API. Without going into technical details, this usually means that the use of AngularJS is easier than other frameworks with two-way data binding, but AngularJS is somewhat more performance-hungry. However, the speed disadvantage is only noticeable with complex models and should not be relevant to most applications. The performance loss results because AngualrJS checks in the so-called  dirty checking whether a model has changed. This check fails if you use a getter / setter API.

AngularJS has two other concepts. The framework uses dependency injection. This means that functions  can be inserted into other functions depending on their name . This may sound odd and unusual, but it also simplifies the code. Here, too, this property can later be explained more easily in the code itself.
Another special feature is the use of HTML-based templates and the so-called directives. A template is a view that can consist of placeholders for later data and also from logic. In later applications the placeholders are filled with real data and corresponding logics are executed (eg “Show this button only for registered members”). Other frameworks use string-based templates (eg handlebars), rather than HTML-based. The use of HTML-based templates is easier to learn – one writes finally pure HTML – and is supported by modern IDEs by the house (syntax highlighting, etc.). However, it is harder to render on the server side. This would be relevant, for example, if JavaScript was deactivated by the user – even if this case is now rare. A component of the HTML-based templates are the directives. Simply put, it offers the possibility to develop your own HTML elements or to expand existing ones. This makes it much easier to modify HTML documents.

As you can see, AngularJS has some new concepts that have never been developed before. You should ask yourself the legitimate question whether it is worth putting a lot of energy and effort into the learning of these concepts or not. I answer this with a simple yes ! This has a good reason: these concepts may be new, but they will not simply disappear again. Just at this moment, these concepts are under the umbrella of Web Componentsstandardized. Web Components is a set of standards including, but not limited to, Object.observe, the Shadow DOM, ES6 Module, and Custom Elements. What are directives for AngularJS are, for example, Custom Elements and Shadow DOM for Web Components. As these standards are still under development, they are difficult to implement in real projects. However, AngularJS already allows us to develop an understanding of these concepts and to use them in real projects. AngularJS not only makes your work easier, but also prepares you for the future.

Now, however, a few code examples showing the use of AngularJS. Installed AngularJS in a new project folder with the command:

Now create one index.html with the following content. The example is almost completely taken over from the official AngularJS page :

If you index.html open it in a browser – you do not necessarily have to start a server – and enter your name into the input field, you can see that the text under the input field changes automatically. This example shows two-way data binding in use. For the same functionality you would need a lot more code lines with pure JavaScript or jQuery. With AngularJS it is in effect three HTML lines! First you will htmlnotice the attribute in the element ng-app . Attributes or elements with the prefix ng are from AngularJS. An ng-app on-  htmlelement means that an AngularJS app should apply to the entire document. It sets the root element for the AngularJS app. The ng-modelattribute in theinputElement creates a two-way data binding to a model named yourName . (This model is automatically created by AngularJS.) As soon as the value in the input field changes, the value of the model also changes yourName. This is the case with the placeholder {{yourName}} in the h1element. To {{}} mark any placeholder data within an HTML template. In this case, our template is also the actual document. In {{}} this case, the identifier within the model yourName matches our model so that the value of yourName is displayed instead of the placeholder . (You could {{}} also as a one-way data binding because it shows the value of the model but can not be changed at this point.)

With this example we scrape only on the surface of AngularJS, but it should suffice for today’s article. The next article will deal with AngularJS in more detail. Next time, our largest code sample so far awaits us, so it is quite good that we are going to end this day