Intoduction to Angularjs

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 Binding
Data 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.

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 App
Step 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

Intoduction to Angularjs

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Intoduction to Angularjs (20)

Recently uploaded (20)

Intoduction to Angularjs