ANGULARJS By Gaurav Agrawal

HTML enhanced for web apps!

What is ANGULARJS?

• AngularJS is an open source javascript based web application framework. (Current stable version 1.4.8 )

• It’s not a JavaScript library (As they say) but a framework. There are no functions which we can directly call and use.

• Focus more on HTML side of web apps.

• For MVC/MVVM design pattern

Key Features

• AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).

• It provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.

• Applications written in AngularJS is cross-browser compliant. It automatically handles JavaScript code suitable for each browser.

• It is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

• Overall, AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain.

Why ANGULARJS?

• It defines numerous ways to organize web application at client side.

• It Enhances HTML by attaching directives, custom tags, attributes, expressions, templates within HTML.

• Encourage MVC/MVVM design pattern• Code Reuse• Good for Single Page Apps (SPA) - Single-Page Applications (SPAs) are

Web apps that load a singleHTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. (eg: Gmail)

Core Features of ANGULARJS

• Easy Data Binding : Two way Data Binding

• Reusable Components

• MVC/MVVM Design Pattern

• End to end Integration Testing / Unit Testing

• Cross-browser compliant

• Services

• Expressions

• Filters

• Directives

• Form Validation

• Modular

2 Way Data BindingData binding is an AngularJS feature that automatically synchronizes your model data with your HTML.

Whenever the HTML is changed the model gets updated and wherever the model gets updated it is reflected in HTML.

Identify MVC in Angular Js

Execution

“Welcome AngularJS to the world of Tutorialspoint!”When the page is loaded in the browser, following things happen −

• HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded, the angular global object is created. Next, JavaScript which registers controller functions is executed.

• Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.

• Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page is now ready.

Steps to create Angular AppStep 1 − Load framework

Being a pure JavaScript framework, It can be added using <Script> tag.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>

Step 2 − Define AngularJS Application using ng-app directive

<div ng-app = ""> ... </div>

Step 3 − Define a model name using ng-model directive

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 4 − Bind the value of above model defined using ng-bind directive.

<p>Hello <span ng-bind = "name"></span>!</p>

Directive (teaches HTML new tricks.)

The directives can be placed in element names, attributes, class names, as well as comments.  Directives are a way to teach HTML new tricks.

A directive is just a function which executes when the compiler encounters it in the DOM. 

<input ng-model='name'>

Custom Defined Directives

<span draggable>Drag ME</span>

How AngularJS integrates with HTML

ng-app directive indicates the start of AngularJS application.

ng-model(two way) The ngModel directive binds an input, select, textarea (or custom form control) to a property on the scope. ($scope --> view and view --> $scope)

ng-bind(one way) The ngBind attribute tells Angular to replace the text content of the specified HTML element(div or p or span) with the value of a given expression, and to update the text content when the value of that expression changes. ($scope --> view)

Closing</div> tag indicates the end of AngularJS application.

Expression

AngularJS will "output" data exactly where the expression is written.

{{ expression }}

<body>

1+2={{1+2}}

</body>

Alternative is to use ‘ng-bind’ directive.

Module (the modular approach)

AngularJS supports modular approach. Modules are used to separate logics say services, controllers, etc. and keep the code clean. We define modules in separate js files and name them as per the module.js file. eg: 1)mainApp.js

var mainApp = angular.module("mainApp", []);var mainApp2 = angular.module("mainApp2", []);

2)Controller.js

mainApp.controller("studentController", function($scope) {………………}Here we've declared a controller studentController module using mainApp.controller function.

Use Module

<div ng-app = "mainApp“><div ng-controller = "studentController"></div> <div ng-controller = “otherController"></div>

</div>

Here we've used application module using ng-app directive and controller using ng-controller directive. We've imported mainApp.js and studentController.js in the main html page.

Services (reusable singleton object )In AngularJS, services are reusable singleton objects that are used to organize and share code across your app. They can be injected into controllers, filters and directives. AngularJS provides you three ways to create services: service, factory and provider.

Only one Instance of service is available within the app.  For example, after a successful login, you'll need to store the login status where the status can be retrieved in all other components. In this scenario, you can store the status in a service and then, whenever you need to read the value, you can just inject it into your controller/service and check it.

AngularJS provides many inbuilt services for example, $http, $route, $window, $location etc. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

Why we need Service ?

“If You wish to share business logic between controllers”

Two of the five SOLID principles of object oriented design  are directly related to Services: the Single Responsibility Principle (SRP) and the Dependency Inversion Principle (DIP).

The single responsibility principle teaches that every object should have a single responsibility. If we use the example of a controller, it’s responsibility is essentially to wire up the scope (which holds your models) to your view; it is essentially the bridge between your models and your views. If your controller is also responsible for making ajax calls to fetch and update data, this is a violation of the SRP principle. Logic like that (and other business logic) should instead be abstracted out into a separate service, then injected into the objects that need to use it.

Factories vs. Services

First, right off the bat I’ll say they’re pretty much equivalent. Why do we have them both, then? They both allow us to create an object that can then be used anywhere in our app.

Most important is to realize that both are singletons in your app.

Essentially, factories are functions that return the object, while services are constructor functions of the object which are instantiated with the new keyword.

http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

http://www.codelord.net/2015/04/28/angularjs-whats-the-difference-between-factory-and-service/

Scope (the owner of application variables and functions)

$scope: It is an object that contains all the data to which HTML is bound. They act as the glue for your javascript code (controllers) and the view (HTML). Everything that is attached to the $scope, it is automatically watched by AngularJS and updated.

<script>

var mainApp = angular.module(“myApp", []);

mainApp.controller("shapeController", function($scope) {

$scope.message = "In shape controller";

$scope.type = "Shape";

});

</script>

Controllers(a JavaScript Object)

Controllers is a JavaScript Object, created by a standard JavaScript object constructor.

AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

<div ng-app = "" ng-controller = "studentController"> ... </div>

Here we've declared a controller studentController using ng-controller directive. 

Filters

Selects a subset of items from array and returns it as a new array.

Angular filters format data for display to the user.

{{ expression [| filter_name[:parameter_value] ... ] }}

{{ uppercase_expression | uppercase }}

{{ expression | filter1 | filter2 }}

Can create custom filters

Advantages of AngularJS• It provides the capability to create Single Page Application in a very clean

and maintainable way.• It provides data binding capability to HTML. Thus, it gives user a rich and

responsive experience.• AngularJS code is unit testable.• AngularJS uses dependency injection and make use of separation of concerns.• AngularJS provides reusable components.• With AngularJS, the developers can achieve more functionality with short code.• In AngularJS, views are pure html pages, and controllers written in JavaScript

do the business processing.

Disadvantages of AngularJS

Though AngularJS comes with a lot of merits, here are some points of concern:

1. Not secure : Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.

2. Not degradable: If the user of your application disables JavaScript, then nothing would be visible, except the basic page.

Summary

If you compare jQuery and Angular, the former is a library and the latter is a framework. You can plug the library in your project and either use it fully, partially or not use it all. It’s like a plugin, a supplement to your JS project. With a framework – you have to play by its rules, either use it fully or don’t use it all. Angular.js is a MVC framework, it has model, view and controller which is one of the most popular software development architectures today. When developing with Angular, you have to start from the ground up with your architecture in mind.

Angular doesn’t replace jQuery, it doesn’t compete with jQuery, they both can be used in the same application. jQuery for DOM manipulation, Angular – for structure. In fact there is nothing better to do DOM manipulation than jQuery.

Resources

Documentation

• AngularJS Developer Guide

• AngularJS API

• AngularJS Tutorial

Videos

• AngularJS Fundamentals In 60-ish Minutes

• Introduction to Angular JS

• AngularJS end-to-end web app tutorial Part I

Thank You

Any Question ?