- MVC Architecture
- Test Friendly
The Model-View-Controller architecture is the most important feature of AngularJS, which not only increases the value of the framework for the development of client-side applications, but also lays the groundwork for other important features such as the data link and the areas. What differentiates the AngularJS MVC architecture from that of another framework is its very dynamic nature, which we will see later. In addition, unlike other frameworks with MVC, AngularJS automatically combines all the elements of the application. Therefore, you do not have to go through the effort of adding additional code to connect these elements so that the web application works without problems.
If you are familiar with the MVC architecture, skip to the second paragraph, if not, keep reading. The model part of the AngularJS framework deals with the collection of the data in which the application is executed. Now, these data can be both static and dynamic. The Vista, on the other hand, deals with the HTML or the part of the interface of the application that determines how a user will look for the application when it is accessed through a browser.
Now, a unidirectional data link architecture will allow you to change the value of the data in the model to reflect that change in the view, or vice versa. However, with the bidirectional data link in AngularJS, you can change both the model and the view by changing the value in any of them. Angular does this simply by using the two key directives known simply as ng-model and ng-bind.
AngularJS extends HTML with its set of built-in attributes called directives. These policies can also be created automatically using AngularJS. The main function of these directives is to improve the functionality of HTML in the most basic way so that it is suitable for dynamic applications on the client side.
All the directives incorporated in AngularJS begin with the prefix ng, so that every time the HTML finds an element with the prefix, it knows that this element is the part of the application. Some of the most prominent directives used in AngularJS, excluding the two mentioned above, are ng-app, which initializes the application, ng-init, which initializes the data, ng-repeat, which repeats the HTML elements only to name a few. The functions of the aforementioned directives must have clarified how they extend the behavior of the application through HTML.
In addition to these integrated directives, Angular also allows you to create your own custom directives. To do so, you will have to use the .directive function. Once the policy is created, you can invoke it using its name as HTML element, attribute, class or comment.
In AngularJS, a module defines an application, and it is within the premises of that module that there are all the different elements (including controllers, directives and filters) of the application. There are different methods to add different elements to a module, such as adding a controller (which, by the way, is always defined within a module), you can use the following syntax: module_name = angular module (“controller_name”, ); In the same way, you can also add more elements to the module, using its specific syntaxes. What is unique with AngularJS modules is that it inherently solves the problem of exploiting the global function by limiting the scope of all functions to the module, in which it was defined and used.
“Filters” is a useful feature of Angular JS that formats the data for a more adequate view. These filters can be used with expressions to change the data to the currency format, appropriate date / time, JSON string, etc. Filters can also be used to organize a data matrix by adding them to the directives using a pipe character. There are a number of filters built into AngularJS that you can use for the purposes mentioned above and more. In addition, you can also create more custom filters in the AngularJS modules for more specific purposes. These filters will work exactly like the integrated filters in the scope of the application or the main module.
AngularJS has its own list of event directives that are executed together with the HTML events, that is, none cancels the other. Some of the most used AngularJS events are ng-blur, ng-change, ng-click and ng-focus that improve the capabilities of web applications with bidirectional links. Angular event objects can also be used as arguments to call a function.
The angular service provides better tools to display the required information, without altering the MVC of the framework. These services can also communicate directly with the servers to send or receive information, while allowing the controllers to share their resources. Some of the most common Angular JS services include $ http, $ location, $ timeout and $ interval. It is clear that most of these services have their counterparts as DOM objects. However, it is always suggested to use these services instead of objects in Angular applications, since they do not have the usual limitations of DOM objects.