- Why should we use AngularJS
- What is AngularJS
- MVC & MVW architecture
- AngularJS features
- How to build a responsive Single Page Application
Let’s start off with a brief introduction about the founders of AngularJS.
What is AngularJS a/c to Misko Hevery?
According to Misko, “A better way to think about angular is not to think about it as framework but as a HTML compiler which allows you to create your OWN DSL in HTML, by attaching your own behavior to any HTML element, attribute or text. And by any, I mean that you can make up your own names (outside those of HTML spec).”
HTML is awesome when it comes to declaring static documents, but staggers when using it for declaring dynamic views in web-applications. AngularJS overcomes this drawback by letting you extend HTML vocabulary for your application. The resulting environment is unbelievably expressive, readable, and quick to develop.
Challenges faced during web development:
There are four key challenges that often present themselves during web development. They are as follows:
Responsiveness with different devices
Diverse User Preferences
Agility to serve new requests with enterprise standards
Multiple Skill Sets
These challenges are not inevitable as AngularJS can solve them.
Big brands using AngularJS:
Here’s a list of big companies using AngularJS:
YouTube on PS3
Single Page Application:
As browsers and devices are becoming more and more powerful, there is a huge demand for better and sophisticated experience. AngularJS is capable of complex single-page applications (SPA) that behave like desktop or mobile apps. Single Page Application is a web app in which the bulk of the interactions is handled on the client without the need to reach a server, thereby providing a much more fluid user experience. To create a similar experience without AngularJS proves to be a time-consuming affair.
AngularJS Building Blocks
The View is based on DOM objects, not on strings. The View is well suited for UI design as it is HTML and is declarative. The view is flexible and allows multiple Views per Controller.
Controller is in charge of the construction of the Model and connecting it to the View. The Scope is situated between the Controller and the View. Controllers should contain the logic needed for a View. The Controllers should be thin with rich services.
Scope detect the changes in the Model objects and creates an execution context for expressions. There is one root scope for the application with hierarchical children Scopes. It arranges the Model to the View and forward the events to the Controller.
Services are singletons that perform common tasks for web applications. Services can be used when a common functionality needs to be shared between Controllers. Services can be built through Service API, Factory API, or with $provide API.
Data Binding is a two-way binding between the View and the Model. Automatic synchronizing between Views and data Models makes it easy and uncomplicated to use.
Directives can be used to transform the DOM or to create new behavior. A Directive lets you extend the HTML vocabulary in a declarative fashion. AngularJS enables you to build your own directives.
Filters perform data transformation and can be used to do formatting and filter searching.
AngularJS has a couple of built-in validation around HTML5 input variables and Directives. Creating your own validation is as simple as creating a Directive to perform your validation.
Steps to create an AngularJS application:
The following are the steps to create an AngularJS applications:
Step 1 – Include AngularJS
Step 2 – Bootstrap the App
Step 3 – Create the Controller
Step 4 – Create the View
Step 5 – Run the Application
Building Highly Responsive Single Page Application:
Here are the specifications for building a highly Responsive Single Page Application:
Use case: Build a User Management Application
Text Editor (sublime or notepadd ++)
Latest browser (Firefox or Chrome)
Installed NodeJS (server)
Mongo (To store userinfo)
Log in to the Application
Create a new user
View Users List
Update an existing user
Watch the video on top for the demo.
1. What are the advantages of using AngularJS framework?
They are as follows:
- Two-way Data-binding
- MVC pattern
- Static and angular template
- Addition of custom Directive
- REST full services
- Client and Server communication
- Event Handlers
2. What are the different types of Directive?
The different types of directives are:
- Attribute Directives
- Element Directives
- Comment Directives
- CSS Class Directives
3. What are the commonly used Directives in AngularJS application?
Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.
4. What is the difference between AngularJS and BackboneJS?
AngularJS combines the functionalities of third party libraries and individual functionalities required to develop HTML5 apps while BackboneJS does its jobs individually.
Got a question for us? Please mention them in the comments section and we will get back to you.