building responsive single page application using angularjs
TRANSCRIPT
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 : [email protected]
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
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