Category Archives: AngularJS Tutorial

AngularJS Tutorial

AngularJS Features

AngularJS Features

Modules:- AngularJS modules allows you to divide your application into functional modules, so that it is easy to manage and reuse applications code.

Directives:- AngularJS extends HTML Elements with new attributes are known as “Directives”. AngularJS directives are used to extend or manipulate the traditional HTML Element’s functionality and behavior. Some of the inbuilt AngularJS directives are ng-app, ng-controller, ng-repeat, ng-model etc. In AngularJS, you can also create your own custom directive.

Templates:- AngularJS templates are used to render application pages, containing information passed from the model and controller.

Scope:- Scope is a built-in object that refers to the application model. It acts as a context for evaluating expressions. It acts as a glue between controller and view. It transfers data from the controller to view and vice-versa.

Expressions:- AngularJS Expressions are code snippets, usually placed inside two curly braces such as {{ expression }}, these expressions are used to bind application data to HTML elements. AngularJS expressions are evaluated to display information. AngularJS expressions can not be used for control flow statements(conditionals, loops, or exceptions).

Data Binding:- AngularJS operates on two way data-binding paradigm which provides automatic synchronization between model and views. In data-binding model changes propagate to the view, and view changes are instantly reflected back to the model.

MVW (Model, View & Whatever):- AngularJS is a MVC framework, but it does not implement MVC in the traditional way, but rather something closer to MVVM Model-View-ViewModel).

Validations:- AngularJS comes with built-in form validation directives that allows you to easily apply validation on form inputs. AngularJS
also allows you to create your own custom validations.
Filters:- Angularjs Filters are meant to filter and format application data before it is being displayed to the user.
Services:- Services are singleton objects available across your application, are used to organize and share code across your app. AngularJS provides several built-in services such as $http, $provide, $resource,$window,$parse, etc. You can also create your own services.Services can be injected into controllers, filters, directives.

Routing:- AngularJS Routing allows you to switch between different sections or view of application without page reload. It is the feature that facilitate SPA(Single page application) development.
Dependency Injection:- Dependency Injection is a design pattern in which an object is given its dependencies instead of creating itself.
Testing:- AngularJS applications are testable, it supports both unit testing and integration testing.

AngularJS Introduction

What is AngularJS?

AngularJS is an open source front-end web application framework based on javascript, it is used to build dynamic front-end for Rich Internet Application (RIA). It was originally developed by Misko Hevery and Adam Abrons in 2009, but now it is maintained by Google and an open source community of individuals and corporations.

AngularJS is most preferred choice for building Single Page Application (SPA). AngularJS is completely based on HTML and JavaScript, it extends the traditional HTML with new attributes and data-binding components that enable us to serve dynamic page content. AngularJS operates on two way data-binding paradigm which provides automatic synchronization between model and views. In data-binding model changes propagate to the view, and view changes are instantly reflected back to the model.

AngularJS enable us to apply modern programming practices on client side such as modular programming, separation of concerns and testability etc. The goal of AngularJS is to augment browser-based applications with model–view–controller (MVC) capability, which makes it easy to develop and test web application.

mvw

Advantages of AngularJS

Here are some of the reasons to choose AngularJS as front-end web development framework.

It facilitates building Single Page Application (SPA).

It facilitates creating reusable, plug & play components

It supports two way data-binding model which provides automatic synchronization between model and views.

It support unit-testing.

It enable developers to write less code and do more.

It provide better control over DOM Structure and Objects.

It follows MVC architecture at client-side, thus it helps to organize application code properly.

It is open source and completely free to use.

Well documented, easy to learn, and open source community driven.

Disadvantages of AngularJS

Libraries have to be AngularJS specific
Javascript must be enabled for proper functioning
AngularJS is big and complicated,
AngularJS applications are considered less secure
You can not create many NG-apps on the same page, this can cause name clashes.
More than 2000 watchers can severely lag the UI.