Angular JS - Develop Responsive Single Page Application

www.edureka.co/angular-js
View AngularJS course details at www.edureka.co/angular-js
For Queries during the session and class recording:
Post on Twitter @edurekaIN: #askEdureka
Post on Facebook /edurekaIN
For more details please contact us:
US : 1800 275 9730 (toll free)
INDIA : +91 88808 62004
Email us : sales@edureka.co
Angular JS - Develop Responsive Single Page Application

Objectives
At the end of the session you will be able to learn:
What is AngularJS
Global opportunities for AngularJS
Why you should learn AngularJS
AngularJS Features
MVC Architecture
How to build a responsive single page application
Compare AngularJS, Backbone.js and Ember.js

www.edureka.co/angular-jsSlide 3
Who are using AngularJS
YouTube application for Sony's PlayStation 3

Global Opportunities

Salary Trend

What is AngularJS?
Now its an OpenSource client side JavaScript framework
created by Google
It designed for web developers and designers, who
needs to have more control over their web Applications
 For a web developer, it means having a rich feature
that allows them to add more value to the client side of
the applications
 AngularJS accomplishes a lot by embracing HTML,
JavaScript and CSS
AngularJS was originally developed in 2009 by Misko
Hevery and Adam Abrons at Brat Tech LLC, firstly
named as GetAngular

A better way to think about
angular is not to think about it
as framework but as 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)
Misko Hevery

www.edureka.co/angular-jsSlide 8Slide 8Slide 8
1. Device: Need to adapt user interface to a wide variety of devices like laptops, mobile-phones, tablets running
on different operating systems
2. User Preferences: Diverse User preferences in viewing data ranging from spreadsheets to charts
3. Skill Sets: Resource skills rarely cover all aspects of development. A good graphic designer usually does not
have coding skills and vice-versa
4. Agility: Need to rapidly service new requests for information in a highly competitive environment faced by
enterprises
Challenges of Web Development

More control
Simplicity
Testing
Flexible and Extensible
Popularity
» AngularJS has numerous features that allow it to expand the capabilities of web
applications beyond basic HTML, CSS, and Javascript
» With features like two-way data binding, custom directives and services, and client-
side validation, AngularJS is much more dynamic and flexible
Why You Should Learn AngularJS?

More control
Simplicity
Testing
Popularity
» AngularJS is clean and easy to use
» The main objective of AngularJS is to simplify web development experience
» AngularJS in spite of it being heavy duty capabilities makes it look so uncomplicated
and easy

More control
Simplicity
Testing
Popularity
» The main focus of AngularJS is to be testable
» AngularJS takes out the difficulty of unit testing of the codes, with the help of MVC
framework and efficient development methods
» This tool also includes an end-to-end scenario runner for automated unit testing
scripts with minimum code

More control
Simplicity
Testing
Popularity
» AngularJS is very accommodating when it comes to integrating with the existing
technology stack
» As a Javascript client-side tool, it can be used with any server-side technology that is
in use
» It also gets along with other client-side technologies, and can be customized in such a
way that it is not interfering with the existent setup

More control
Simplicity
Testing
Popularity
» AngularJS has been widely used since 2010 and its usage and popularity continues
to grow
» Numerous Fortune 500 companies along with startups are implementing AngularJS
» The demand for AngularJS has become so high that it has become an essential skill
for Developers

Features of AngularJS

The MVC pattern separates the application into 3 concerns
Model: The model is responsible for all behaviour and data of the
application. It is responsible for managing data, this included all
creation, retrieval, update and delete of data
View: This layer is responsible for the presentation of data and user
interaction
Controller: This component handles the interaction between the
View and the Model
Controller
Model View
JavaScript MVC framework

Separating Model from View (that is, separating data representation from presentation)
Easy to add multiple data presentations for the same data
Facilitates adding new types of data presentation as technology develops
Model and View components can vary independently enhancing maintainability, extensibility, and testability
Advantages of MVC

Static
DOM
Dynamic
DOM
DOM Content
Load Event
ng-app=“application name”
$injector
$compile $rootscope
$compile(dom, $rootscope)
Browser AngularJS
HTML
AngularJS: Architecture

Steps to create an AngularJS Application
1. Include AngularJS
2. Bootstrap the App
3. Create the Controller
4. Create the View
5. Run the Application
AngularJS: Your first program

Building Highly Responsive Single Page Application
Usecase : Build a User Management Application
Prerequisite :
» Text Editor (sublime or notepadd ++)
» Latest browser (Firefox or Chrome)
» Installed NodeJS (server)
» Mongo (To store userinfo)
Project Specifications :
» Login to the Application
» Create a new user
» View Users List
» Update a existing user
» Delete user
» Signout

DEMO

AngularJS Vs Backbone.js Vs Ember.js
AngularJs Backbone.js Ember.js
Dependencies No Dependencies Underscore.js , jQuery Handlebars, jQuery
Data Binding Fully Supported Needs plugins to support Fully Supported
Routing Simple Simple Complex
Testing Awesome test support No default test solution Poor testing initially, good
test support now

Course Topics
 Module 1
» Introduction to JavaScript MVC Framework
and AngularJS
 Module 2
» Dependency Injection and Controllers
 Module 3
» Route, Directive and Filters
 Module 4
» Creating Custom Directives and Filters
 Module 5
» Third-party AngularJS Modules and Testing
Angular
 Module 6
» AngularJS with Node.js
 Module 7
» Project Discussion

LIVE Online Class
Class Recording in LMS
24/7 Post Class Support
Module Wise Quiz
Project Work
Verifiable Certificate
Course Features

Questions

Angular JS - Develop Responsive Single Page Application

More Related Content

What's hot

Viewers also liked

Similar to Angular JS - Develop Responsive Single Page Application

More from Edureka!

Recently uploaded

Angular JS - Develop Responsive Single Page Application