building responsive single page application using angularjs

www.edureka.co/angular-js

View AngularJS course details at www.edureka.co/angular-js

For Queries :Post on Twitter @edurekaIN: #askEdurekaPost on Facebook /edurekaIN

For more details please contact us: US : 1800 275 9730 (toll free)INDIA : +91 88808 62004Email us : sales@edureka.co

Building responsive Single page application

using angularjs

Slide 2 www.edureka.co/angular-js

Objectives

At the end of the session you will be able to learn:

Why should we use AngularJS

What is AngularJS

MVC & MVW Architecture

AngularJS Features

How to build a responsive single page application

Slide 3 www.edureka.co/angular-jsSlide 3Slide 3Slide 3

Slide 4 www.edureka.co/angular-jsSlide 4Slide 4Slide 4

Challenges of Web DevelopmentResponsiveness with

different devices

Slide 5 www.edureka.co/angular-jsSlide 5Slide 5Slide 5

Challenges of Web DevelopmentResponsiveness with

different devices

Diverse User Preferences

Slide 6 www.edureka.co/angular-jsSlide 6Slide 6Slide 6

Challenges of Web DevelopmentResponsiveness with

different devices

Diverse User Preferences

Agility to server new requests

with enterprise standards

Slide 7 www.edureka.co/angular-jsSlide 7Slide 7Slide 7

Challenges of Web DevelopmentResponsiveness with

different devices

Diverse User Preferences

Multiple Skill SetsAgility to server new requests

with enterprise standards

Slide 8 www.edureka.co/angular-jsSlide 8Slide 8Slide 8

Challenges of Web DevelopmentResponsiveness with

different devices

Diverse User Preferences

Multiple Skill SetsAgility to server new requests

with enterprise standards

AngularJS will solve

these problems

Slide 9 www.edureka.co/angular-jsSlide 9Slide 9Slide 9

Slide 10 www.edureka.co/angular-jsSlide 10

What is AngularJS?

OpenSource client side JavaScript framework created by

Google

Designed for web developers and designers, who need

to have more control over their web Applications

AngularJS accomplishes a lot by embracing HTML,

JavaScript and CSS

AngularJS was originally developed in 2009 by MiskoHevery and Adam Abrons at Brat Tech LLC, firstly

named as GetAngular

Slide 11 www.edureka.co/angular-jsSlide 11

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

What is AngularJS a/c to Misko Hevery ?

Slide 12 www.edureka.co/angular-jsSlide 12

Big Brands Using AngularJS

YouTube application for Sony's PlayStation 3

Slide 13 www.edureka.co/angular-jsSlide 13

Big Brands Using AngularJS

Slide 14 www.edureka.co/angular-jsSlide 14

SPA

AngularJS

TakeAway

Let us see what is Single Page Application first

Slide 15 www.edureka.co/angular-jsSlide 15

SINGLE PAGE APPLICATION

Single Page Application is a web app in which the majority of interactions are handled on the client without the

need to reach a server, with a goal of providing a more fluid user experience

Reference: https://channel9.msdn.com/

Client Side Routing

Client Side Rendering

Slide 16 www.edureka.co/angular-jsSlide 16

RESPONSIVE SINGLE PAGE APPLICATION

Slide 17 www.edureka.co/angular-jsSlide 17

SPA

AngularJS

TakeAway

AngularJS in Detail

Slide 18 www.edureka.co/angular-jsSlide 18

MVC & MVW Way of AngularJS

Model View

Directive

Reference: Avaldes.com

Unit TestController

Whatever

HTML

CSS

MVC MVW

Slide 19 www.edureka.co/angular-js

Features of AngularJS

Slide 20 www.edureka.co/angular-jsSlide 20Slide 20Slide 20

Slide 21 www.edureka.co/angular-jsSlide 21Slide 21Slide 21

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

Slide 22 www.edureka.co/angular-jsSlide 22

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

Slide 23 www.edureka.co/angular-js

DEMO

Slide 24 www.edureka.co/angular-jsSlide 24

SPA

AngularJS

TakeAway

AngularJS: Your first program

Slide 25 www.edureka.co/angular-js

Questions

Slide 26 www.edureka.co/angular-js