June 15, 2018
The Model-View-Controller architecture is the foremost feature of AngularJS, which not only increases the value of the framework for client-side application development but also sets the foundation for the other important features like data binding and scopes. What sets the MVC architecture of AngularJS apart from that of other framework is the very dynamic nature of it, which we will elaborate later on. Furthermore, unlike other frameworks with MVC, AngularJS automatically combines all the elements of the application together. So you don’t have to go through the effort of adding extra code in order to connect these elements for the smooth running of the web application.
If you’re familiar with the MVC architecture, skip to the second paragraph, if not then read on. The Model part of the AngularJS framework deals with the collection of the data that the application runs on. Now, this data can be both static and dynamic. The View, on the other hand, deals with the HTML or the interface part of the application that determines how the application will look to a user when accessed through a browser.
Now, a one-way data binding 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 two-way data binding in AngularJS, you can change both model and view by changing the value in either. Angular does it through the simple use of the two key directives known simply as ng-model and ng-bind.
AngularJS extends the HTML with its set of inbuilt attributes called directives. These directives can also be self-created using AngularJS. The major function of these directives is to enhance the functionality of the HTML in a most basic way to make it suitable for dynamic client-side applications.
All the inbuilt directives in AngularJS begins with the prefix ng, so that whenever the HTML encounter an element prefixed as such, it knows that the said element is the part of the application. Some of the most prominent directives used in AngularJS, excluding the two previously mentioned above are ng-app, which initializes the application, ng-init, which initialises the data, ng-repeat, which repeats the HTML elements just to name a few. The functions of the above-mentioned directives must have clarified how they extend the behaviour of the application through HTML.
As well as these inbuilt directives, Angular also allows you to create your own custom directives. To do so, you’ll have to use the .directive function. Once the directive is created, you can invoke it by using its name as an HTML element, attribute, class, or comment.
In AngularJS, one module defines one application, and it is within the premises of that module that all the different elements (including the controllers, directives, and filters) of the application exist. There are different methods of adding different elements to a module like for adding a controller (which, by the way, is always defined within a module), you may use the following syntax- moduleName = angular.module(“controllerName”, ); Similarly, you can also add more elements to the module, using their specific syntaxes. What’s unique with the modules of AngularJS is that it inherently solves the problem of global function exploitation by limiting the scope of all the 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 fitting view. These filters can be used with expressions to change the data into the appropriate format of currency, date/time, JSON string, etc. The filters can also be used to arrange an array of data by adding these to the directives by using a pipe character. There are a number of inbuilt filters in AngularJS that you can use for the aforementioned and more purposes. Furthermore, you can also create more custom filters in AngularJS modules for more specific purposes. These filters will work exactly like the inbuilt filters within the scope of the parent module or application.
AngularJS has its own list of event directives that execute along with the HTML events, i.e., neither overrides the other. Some of the most commonly used AngularJS events are ng-blur, ng-change, ng-click, and ng-focus that enhances the capabilities of the web applications with two-way binding. The Angular event objects can also be used as arguments to call a function.
Angular service provides better tools for showing the required information, without messing with the MVC of the framework. These services can also directly communicate with the servers to send or receive information whilst also 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 the objects in Angular applications, as they do not carry the usual limitations that the DOM objects do.