AngularJS is a powerful client side web application development technology that adds to your HTML,CSS and JavaScript and speeds up the application’s responsiveness. It is an open source Javascript based structural framework for dynamic web apps. It is developed by Google. It is used to develop stable SPA (Single Page Applications) that have CRUD (Create, Read, Update and Delete) operations.
HTML is perfect for static documents but it fails where dynamic views are needed in web-applications. AngularJS provides HTML additional attributes to make it more responsive to user actions. It creates RIA – Rich Internet front end Applications.
Let’s discuss a few of its key features
#Modules
A module is a collection of directives, services, filters, controllers, and configuration. Modules are used to separate logics for example it keeps services, controllers, application etc. separate from one another and keeps the code clean.
#Directives
AngularJS directives are a combination of Angular JS template mark-ups (HTML attributes or elements or CSS classes) and supporting JavaScript code. AngularJS directives extend the HTML vocabulary – they add new behaviour and manipulate the attributes of HTML elements in interesting ways. AngularJS has some built in directives like ng-app, ng-controller, ng- repeat, and ng-model. ng is the core module in angular. When an angular app is started, this module is loaded by default. You can also create your own custom directives.
#Templates
AngularJS templates are plain old HTML templates. They contain Angular specific elements. AngularJS uses these templates to show information from the model and controller.
#Scope
The scope is used to link the controllers and the views. It is the glue between controllers and the views. It acts like a context to evaluate angular expressions. Each directive creates and manages its own scope. The scope comes with additional operations which can be very useful in building application.
Scopes are hierarchical in nature and follow the DOM structure of the AngularJS app. AngularJS has two scope objects $rootscope and $scope. $rootscope is the top most scope. An app has only one $rootscope. It acts like a global variable. All other $scopes are the children of the $rootscope.
#Expressions
Expressions bind application data to html. They are pure Javasacript code snippets written inside double braces such as {{expression}}. They behave like ng-bind directives.
#Data Bindings
Data Bindings feature is the most important one for AngularJS. It saves you from writing boiler-plate code – the code which is used in many places with little or no alteration. Developers don’t need to manipulate the DOM elements and attributes manually to reflect model changes. AngularJS provides for two way data binding and one way data binding.
Two way data binding synchronises the data between model and view. Any change in the model will update the view and vice-versa. ng-model directive is used for two-way data binding. AngularJS 1.3 introduced one way data binding.
#MVC (Model, View and controller)
AngularJS is MVC framework. It doesn’t implement MVC in the traditional way though as it implements it in the MVVM – Model-View-View-Model way. In AngularJS model is a plain old JavaScript object that represents data used by your app. A View is responsible for presenting the data of your model to your end user. Actual behaviour of your app is defined by the controller. The controller contains the business logic for the view and connects the model to view with the help of $scope. It connects with an HTML element with the ng-controller directive.
#Validations
AngularJS has built-in validation directives to validate input from client side. They are based on HTML5 form validators.
#Filters
Filters are used to format data before displaying it to the user. They are used in view templates, controllers, services and directives. AngularJS has built-in filters like Date, Currency, Number, Uppercase, Lowercase, and OrderBy. You can also create your own filters.
#Services
A service organizes and shares code across your app. A service can be injected into controllers, directives and filters etc. AngularJS offers various built-in services like $resource, $provide, $window, $parse and $http.
#Routing
AngularJS routing helps you in dividing your app into multiple views. It helps in binding different views to controllers. AngularJS service $routeProvider takes care of routing. To define the routes for your app $routeprovider service provides methods when() and otherwise(). Routing has dependency on ngRoute module.
#Dependency Injections
Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. AngularJS comes with a built-in dependency injection subsystem that helps the developer in developing and testing the apps.
JQuery And Angular JS
Why should you use AngularJS?
AngularJS allows you to extend HTML vocabulary to create new UI widgets/components. It provides a powerful two way data binding mechanism which binds data to HTML elements by using scope. The application written in AngularJS is cross-browser compliant. AngularJS automatically handles Javascript code which is appropriate for each browser. It is customizable therefore you can create your own custom components like directives, services etc. Developers using AngularJS are able to write client side applications in a clean MVC (Model View Controller) way. Code reusability is one of AngularJS’s big advantage. It allows you to write code which can be reused. It supports animations. It supports form validation. It is unit testable.
There is no need to register call-backs. Your AngularJS code is simple and easy to debug. No initialization code needed so you can bootstrap your app easily by using services that are auto-injected in your application.
AngularJS development can be done with the following IDEs: SublimeText, TextMate, WebStorm, Eclipse, VisualStudio 2012, 2013, 2015 or higher. AngularJS supports scalability, maintainability and has modularization at its core. It is the best framework for web applications.
Resources
You can be a part of the Angular community and attend these conferences NG-Conference and Anglebrackets.
AngularJS enjoys massive support and is a very popular framework. It has a mature community on the internet. There are plenty of tutorials and resources to help you. It is supported by Google.
If you want to learn more about AngularJS, you can check out the AngularJS tutorial here . You can visit Microsoft’s Virtual Academy for AngularJS and see their learning plans. You can also visit official AngularJS blog. You can read the posts from Evangelist on the loose and onehungrymind. They are insightful and will help you on your AngularJS journey. Happy Coding!