It has been 16 years since the release of .Net framework on January 5, 2002. The journey till now is an interesting one and it has unveiled lot of opportunities in the web development field. With the years passing by, the technology is unfolding new things.
In April 2009, the source code of ASP.NET MVC was released under Microsoft Public License. From the moment it rolled out, it has been liked by most of the developer community; as it gave that extra space, in which a developer can make the complex application development really easy. It separated the code from the view, unlike traditional ASP.NET web forms. Well, the introduction of MVC to ASP.NET has left people of the development world thrilled.
Late in 2010, the development world got another surprise in the name of Angular JS. Writing Single Page Application (SPA) became a buzz at that time and everyone wanted to do it, overnight. In this blog post we will be exploring AngularJS and how it works; along with the important features that has made AngularJS so popular among ASP.NET developers.
AngularJS at a glance..
Let us brief you about how AngularJS framework works.
- Angular JS is a product of Google and has no dependency on Microsoft Stack.
The AngularJS code is simple and goes really well with MVC architecture of ASP.NET. Therefore, .NET developers use AngularJs as front end technology to build web application.
Why Angular JS?
With the help of AngularJS, the vocabulary of HTML can be extended for any web application. Every feature of AngularJS can be easily modified or can be completely replaced in order to match the respective requirements. It is really quick to develop and the output is extremely impressive.
Before the advent of single page applications, the traditional method was followed. The client (browser) used to initiate the communication with the server by a page request. The page request is then processed by the server and the HTML of the page is sent to the client. If the user interacts further, again a new request is sent to the server, processed and the server sends a new page to the browser in response.
Well, with the introduction of Single-Page Applications, the whole page gets loaded in the browser after the first request and further interactions take place through Ajax requests. This implies that only the changed portion of the page has to be updated by the browser. There is no requirement of reloading the page. SPA reduces the response time of the applications. Subsequently, it gives a seamless experience to the user.
The architecture of a SPA is simple. Moreover, with the introduction of AngularJS and the styling features of CSS3, it becomes easier to design and build SPAs.
Features of AngularJS
1. Data binding:
Data binding refers to technique to bind data sources from different places. This is one of the best and the most useful features in AngularJS. Usually, a web application consists of 80% of the code as defined by DOM. Data Binding hides the code and allows the user to work in “view only” option. This helps the developer in concentrating only on application building.
If any change is there, the developer had to modify the DOM elements to reflect the change. It is a two way method; wherein first, model changes required DOM elements to be changed and in the second, changes done in DOM element require to modify the model. Well, all this mess can be handled in the better way with the help of AngularJS; which provides the feature of two way data binding. It helps in the synchronization of DOM and model.
2. AngularJS Templates:
The templates in AngularJS are HTML pages. It simply extends the vocabulary of HTML, giving instructions on how the model should be projected in the view.
Next, the browser parses the HTML templates into the data object model (DOM). This DOM is the input to the AngularJS compiler, which traverses DOM and renders instructions called Directives. These directives all together are responsible for setting up data binding for application view.
Here, AngularJs takes browser DOM as input and not HTML string. Therefore, the data-bindings are DOM transformations and not string concatenations or inner HTML changes. The significant thing that sets AngularJs apart from other frameworks is that it uses DOM as input and not the strings.
The plus point of using DOM is that the directive vocabulary can be extended and own directives can be built. Also, they can be abstracted into reusable components.
The data binding approach formulates a good workflow between designers and developers. Designers can mark up their HTML as a custom and then developers can take care of the functionalities with the help of bindings, involving little efforts.
3. Dependency Injection:
AngularJS has an option of dependency injection, which allows the user to ask for the dependencies, if any. Subsequently, helping the developer to develop, understand and test the application easily.
For instance, if the developer asks for some X element, then it would be created and provided by DI.
If a developer needs to access core AngularJS services, just add that particular service as parameter. AngularJS will automatically detect that requirement of service and make that instance available.
Moreover, one can also define custom services and make those available for injection.
AngularJS is playing a significant role in the development of various applications. We hope that developers as well as businesses get maximum benefit of using this technology.
Also, you can seek professional consultation at Multidots, on building applications using AngularJS and .Net technologies.
If we have missed out any information related to the above said technologies, then your views are most welcome in the comments below.