Why AngularJS for Your Project?
Are you wondering to use AngularJS for your project? If yes, this blog helps you to learn a little bit about its history, fundamentals, advantages, and community. Before continue reading, bear in mind that the blog is not about teaching to learn code, how to setup AngularJS or setup project.
Introduction
AngularJS is a platform that makes easy-to-build dynamic web applications and empowers developers building applications that live on the web, the mobile or the desktop. According to Google Trends, AngularJS is the peak popularity in recent 12 months (as of November 2017) compared to similar frameworks: ember.js and backbone.js.
History
Wikipedia has rich information about AngularJS’s history which says: AngularJS originally developed in 2009 by Mi”ko Hevery at Brat Tech LLC for easy-to-make web applications for the enterprise. There have been many releases, and current stable version Angular 5 was released just a month ago (as of December 2017).
Advantages
There might be dozens of advantages, but the blog only focuses on the following important ones which help you to decide whether use AngularJS or not:
‘ Easy to understand: You are not starting from scratch as it is not a new language but requires HTML, CSS, and JavaScript at least intermediate-level knowledge to begin with your project.
‘ Less written code and easily maintainable code: It creates necessary structure, and populates most the code while you create a new project. It is easy to maintain because of the folder structure, name conventions and readable code.
‘ Data handling made simple: It doesn’t require an intense development effort to provide interaction with users. It makes it easy with expressions, filters, and form validation. a) JavaScript-like code snippets in the form of expressions are placed in and also used directly in directive attributes. b) The value of an expression could be formatted with Filters for presenting to users and can be used in view templates, controllers or services. AngularJS has a large number of built-in filters, but you can define your own as well. c) AngularJS validates forms with providing client-side validation on input fields (input, textarea, select) and notifies users about the current state of form or inputs.
‘ Two-way data binding: Real-time synchronization between model and view. AngularJS binds model properties with UI-elements in the view and any changes in one of them propagated to another. For instance: We have a model which contains name variable and bind with two elements, paragraph tag, and input in the view. The name variable is modified whenever the user types something in the input and paragraph tag.
‘ HTML Template: Views are written in HTML and designed in CSS. It also allows using popular CSS frameworks like Bootstrap and Foundation.
‘ Extend HTML: AngularJS does not limit you to use HTML tags but allows you to use your own defined tags, and attributes like XML.
‘ Single-Page-Application (SPA): AngularJS framework makes it easy to create SPA in a very clean, and maintainable way. SPA is a better choice if your content fits in single page because sites are able to provide the feel of a phone/tablet application.
Fundamentals
AngularJS uses Model View Controller (MVC) design model. MVC separates an application into model, view, and controller.
The model contains data related logic or data exchanged between view and controller.
The view contains HTML template or GUI related logic and elements such as text, graphics, and multimedia. CSS code doesn’t place in view but manages in a separate file.
The controller plays a role of a middle person (interface) between model and view. Microsoft explains controllers as: process incoming requests, handle user input and interactions and execute appropriate application logic.
Also, AngularJS is using modules and components important mechanism. Applications are created from similar combined Modules which contains related components, directives, pipes, and services. Components are a specific type of directive that uses an uncomplicated configuration proper for a component-based application structure.
Figure 1: AngularJS Architecture (source: Angular.io)
Community
AngularJS has a large open community. Really? Yes, StackOverflow contains 246,012 questions associated with AngularJS and GitHub AngularJS repository has 552 contributors.
Figure 2: Angular on GitHub (source: GitHub)
The reach-community of contributors that are not only building, and contributing back to Angular but also contributing to ecosystem across the board, whether, it’s like helping with consulting, training, and building dev tools or even just building components that have been built for AngularJS applications. Does it matter? Absolutely! Developers and new-learners appreciate having free support from a community without waiting for long.
Also, AngularJS is developed and maintained by Google and offered as open source. What does it mean for you? Google has skilled and highly-available engineers to answer your all AngularJS related questions. It is also worth to mention that AngularJS has many releases since it’s developed which means the community is committed to fix the problems and enhance the framework.
What is Built with AngularJS?
Keep the advantages we discussed above in mind, AngularJS provides a great platform to build a website. Hundreds of websites powered by AngularJS will appear if you do a quick search on, but we list here five websites you might familiar with:
‘ weather.com
‘ freelancer.com
‘ netflix.com
‘ upwork.com
‘ istockphoto.com
Conclusions
AngularJS is a platform which builds light-weight dynamic web applications and website that customers love to use, developers love to build and has the community where everyone feels welcome. It is best used for front-end development to make stunning projects with HTML, CSS, and JavaScript all at one place.
References
https://angular.io/docs
https://en.wikipedia.org/wiki/AngularJShttps://msdn.microsoft.com/en-us/library/dd410269(v=vs.100).aspx
https://code.tutsplus.com/tutorials/3-reasons-to-choose-angularjs-for-your-next-project–net-28457
https://angular-2-training-book.rangle.io/handout/modules/introduction.html
https://trends.google.com/trends/explore?q=ember.js,backbone.js,angularjs
https://github.com/angular/angular