SlideShare a Scribd company logo
Responsive web app design
using
Slides Assembled by:Slides Assembled by:Slides Assembled by:Slides Assembled by: ArnabArnabArnabArnab PradhanPradhanPradhanPradhan
Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028
Reg. No. 133Reg. No. 133Reg. No. 133Reg. No. 133----1124112411241124----0276027602760276----12121212
What is AngularJS
Features of AngularJS
Why AngularJS
jQuery vs AngularJS
A MVC JavaScript framework by Google for
creating single page dynamic web application
Open Source
◦ GitHub: https://github.com/angular/angular.js
◦ MIT License◦ MIT License
Two-way Data Binding – Model as single
source of truth
Directives – Extend HTML
MVC
Dependency InjectionDependency Injection
Testing
Deep Linking (Map URL to route Definition)
Server – Side Communication
Views are declarative
◦ The structure of the interface
Controllers do not need to directly
manipulate the view
◦ Changes in the models / data are automatically◦ Changes in the models / data are automatically
reflected in the view
◦ Updates are managed by the frameworks
Directives are markers (such as attributes, tags,
and class names) that tell AngularJS to attach a
given behavior to a DOM element (or transform
it, replace it, etc.)
Some angular directivesSome angular directives
The ng-app - Bootstrapping your app and
defining its scope.
The ng-controller - defines which controller will
be in charge of your view.
The ng-repeat - Allows for looping through
collections
Model (Data) View (UI)
Notifies
Controller (Logic)
Notifies
Changes
Model
DOM
JS Objects
Controller
View
JS Classes
DOM
Angular implements MVC by asking you to
split your app into MVC components, then
just let Angular do the rest.
Angular manages your components for you
and also serves as the pipeline that connectsand also serves as the pipeline that connects
them.
Unit testing front end code is usually hard
because there are so many sticky
dependencies. Angular’s DI allows you to
mock out many of these dependencies and
isolate individual components.isolate individual components.
Deep linking supported
Server side communication is done by $http
and $resource services
Scope management
Form validation
Animation
Routing
FiltersFilters
API client
........ Many more
Responsive web design with Angularjs
Responsive web design with Angularjs
Angular 2 (Angular-Meteor)
Write Angular on the server(angular-meteor.com)
[1] https://github.com/angular/angular.js
[2] http://campus.codeschool.com/courses/shaping-up-with-
angular-js/
[3] https://docs.angularjs.org/api/
[4] http://www.nganimate.org/
[5] http://ngmodules.org/modules/ngtimeago[5] http://ngmodules.org/modules/ngtimeago
[6] http://angular-js.in/panhandler/
Any Question?

More Related Content

PPT
Angular Seminar-js
Mindfire Solutions
 
PPTX
Angular JS
Vithika Gupta
 
PPTX
AngularJS = Browser applications on steroids
Maurice De Beijer [MVP]
 
PDF
Angularjs in mobile app
Yvonne Yu
 
PPTX
Angular js
ronhall13
 
PDF
AngularJS
Hiten Pratap Singh
 
PDF
Angular JS Introduction
Dhyego Fernando
 
PPTX
Angular Lazy Loading and Resolve (Route Resolver)
Squash Apps Pvt Ltd
 
Angular Seminar-js
Mindfire Solutions
 
Angular JS
Vithika Gupta
 
AngularJS = Browser applications on steroids
Maurice De Beijer [MVP]
 
Angularjs in mobile app
Yvonne Yu
 
Angular js
ronhall13
 
Angular JS Introduction
Dhyego Fernando
 
Angular Lazy Loading and Resolve (Route Resolver)
Squash Apps Pvt Ltd
 

What's hot (20)

PDF
Angularjs - lazy loading techniques
Nir Kaufman
 
PPTX
angularJS Practicle Explanation
Abhishek Sahu
 
PPTX
Angularjs PPT
Amit Baghel
 
PPTX
Angular js
Dinusha Nandika
 
PDF
AngularJS Best Practices
Betclic Everest Group Tech Team
 
PPTX
OCTO BOF - How to build Netvibes with AngularJS
Jonathan Meiss
 
PPTX
Single Page Applications in SharePoint with Angular
Sparkhound Inc.
 
PDF
Angular js best practice
Matteo Scandolo
 
PPTX
Overview about AngularJS Framework
Camilo Lopes
 
PPTX
Angular js for beginners
Munir Hoque
 
PPTX
Dive into Angular, part 2: Architecture
Oleksii Prohonnyi
 
PPTX
Single Page Application (SPA) using AngularJS
M R Rony
 
PDF
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Edureka!
 
PPTX
Angular vs React: Building modern SharePoint interfaces with SPFx
Dimcho Tsanov
 
PPTX
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
PDF
The Art of AngularJS - DeRailed 2014
Matt Raible
 
PPTX
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
Syed Shanu
 
PDF
AngularJS with RequireJS
Johannes Weber
 
PPTX
Step by Step - AngularJS
Infragistics
 
PPTX
Single Page WebApp Architecture
Morgan Cheng
 
Angularjs - lazy loading techniques
Nir Kaufman
 
angularJS Practicle Explanation
Abhishek Sahu
 
Angularjs PPT
Amit Baghel
 
Angular js
Dinusha Nandika
 
AngularJS Best Practices
Betclic Everest Group Tech Team
 
OCTO BOF - How to build Netvibes with AngularJS
Jonathan Meiss
 
Single Page Applications in SharePoint with Angular
Sparkhound Inc.
 
Angular js best practice
Matteo Scandolo
 
Overview about AngularJS Framework
Camilo Lopes
 
Angular js for beginners
Munir Hoque
 
Dive into Angular, part 2: Architecture
Oleksii Prohonnyi
 
Single Page Application (SPA) using AngularJS
M R Rony
 
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Edureka!
 
Angular vs React: Building modern SharePoint interfaces with SPFx
Dimcho Tsanov
 
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
The Art of AngularJS - DeRailed 2014
Matt Raible
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
Syed Shanu
 
AngularJS with RequireJS
Johannes Weber
 
Step by Step - AngularJS
Infragistics
 
Single Page WebApp Architecture
Morgan Cheng
 
Ad

Viewers also liked (11)

PPTX
.NET Performance Boost
GlobalLogic Ukraine
 
PPTX
Java Memory Management Tricks
GlobalLogic Ukraine
 
PDF
An Introduction To Testing In AngularJS Applications
Rohan Chandane
 
PPTX
Rise of the responsive single page application
Oren Shatken
 
PPTX
TDD Basics with Angular.js and Jasmine
Luis Sánchez Castellanos
 
PDF
Part 1: The Developer Experience (Pivotal Cloud Platform Roadshow)
VMware Tanzu
 
PDF
Top Legacy Sins
Eberhard Wolff
 
PDF
Angularjs - Unit testing introduction
Nir Kaufman
 
PDF
Cloud Foundry and Microservices: A Mutualistic Symbiotic Relationship
Matt Stine
 
PDF
REST vs. Messaging For Microservices
Eberhard Wolff
 
PDF
Create responsive websites with Django, REST and AngularJS
Hannes Hapke
 
.NET Performance Boost
GlobalLogic Ukraine
 
Java Memory Management Tricks
GlobalLogic Ukraine
 
An Introduction To Testing In AngularJS Applications
Rohan Chandane
 
Rise of the responsive single page application
Oren Shatken
 
TDD Basics with Angular.js and Jasmine
Luis Sánchez Castellanos
 
Part 1: The Developer Experience (Pivotal Cloud Platform Roadshow)
VMware Tanzu
 
Top Legacy Sins
Eberhard Wolff
 
Angularjs - Unit testing introduction
Nir Kaufman
 
Cloud Foundry and Microservices: A Mutualistic Symbiotic Relationship
Matt Stine
 
REST vs. Messaging For Microservices
Eberhard Wolff
 
Create responsive websites with Django, REST and AngularJS
Hannes Hapke
 
Ad

Similar to Responsive web design with Angularjs (20)

PPTX
Angular js
Mindtree
 
PPTX
What are the key distinctions between Angular and AngularJS?
Albiorix Technology
 
PPTX
AngularJs (1.x) Presentation
Raghubir Singh
 
PPTX
Introduction to AngularJS
Shyjal Raazi
 
PPTX
Intoduction to Angularjs
Gaurav Agrawal
 
PPTX
Angular from Zero to Mastery - Training (Intermediate)
Smail LOUNES
 
PDF
Fundamentals and Implementations of Angular JS with renowned Technology Platf...
OptiSol Business Solutions
 
PPTX
Angularjs overview
VickyCmd
 
PDF
AngularJS - A JavaScript Framework
Tekki Web Solutions Pvt. Ltd.
 
PPTX
Angular Vs AngularJS: Key Differences You Need to Know
Eric Walter
 
PDF
Modern webtechnologies
Besjan Xhika
 
PPTX
Angular JS training institute in Jaipur
HEMANT SAXENA
 
PPTX
Introduction to single page application with angular js
Mindfire Solutions
 
PPTX
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
PPTX
Angular js- 1.X
Nitin Giri
 
PDF
AngularJS: Overview & Key Features
Mohamad Al Asmar
 
PDF
Angular js interview question answer for fresher
Ravi Bhadauria
 
PDF
Angular vs React : A Detailed Comparision
Fortunesoft IT Innovations
 
PDF
A white paper on Fundamentals and Implementations of Angular JS
OptiSol Business Solutions
 
Angular js
Mindtree
 
What are the key distinctions between Angular and AngularJS?
Albiorix Technology
 
AngularJs (1.x) Presentation
Raghubir Singh
 
Introduction to AngularJS
Shyjal Raazi
 
Intoduction to Angularjs
Gaurav Agrawal
 
Angular from Zero to Mastery - Training (Intermediate)
Smail LOUNES
 
Fundamentals and Implementations of Angular JS with renowned Technology Platf...
OptiSol Business Solutions
 
Angularjs overview
VickyCmd
 
AngularJS - A JavaScript Framework
Tekki Web Solutions Pvt. Ltd.
 
Angular Vs AngularJS: Key Differences You Need to Know
Eric Walter
 
Modern webtechnologies
Besjan Xhika
 
Angular JS training institute in Jaipur
HEMANT SAXENA
 
Introduction to single page application with angular js
Mindfire Solutions
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
Angular js- 1.X
Nitin Giri
 
AngularJS: Overview & Key Features
Mohamad Al Asmar
 
Angular js interview question answer for fresher
Ravi Bhadauria
 
Angular vs React : A Detailed Comparision
Fortunesoft IT Innovations
 
A white paper on Fundamentals and Implementations of Angular JS
OptiSol Business Solutions
 

Recently uploaded (20)

PDF
The Picture of Dorian Gray summary and depiction
opaliyahemel
 
PDF
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
PPTX
Information Texts_Infographic on Forgetting Curve.pptx
Tata Sevilla
 
PPTX
Odoo 18 Sales_ Managing Quotation Validity
Celine George
 
PPTX
Trends in pediatric nursing .pptx
AneetaSharma15
 
PDF
RA 12028_ARAL_Orientation_Day-2-Sessions_v2.pdf
Seven De Los Reyes
 
PDF
Virat Kohli- the Pride of Indian cricket
kushpar147
 
PPTX
Tips Management in Odoo 18 POS - Odoo Slides
Celine George
 
PDF
Presentation of the MIPLM subject matter expert Erdem Kaya
MIPLM
 
PPTX
Artificial-Intelligence-in-Drug-Discovery by R D Jawarkar.pptx
Rahul Jawarkar
 
PPTX
FSSAI (Food Safety and Standards Authority of India) & FDA (Food and Drug Adm...
Dr. Paindla Jyothirmai
 
PPTX
family health care settings home visit - unit 6 - chn 1 - gnm 1st year.pptx
Priyanshu Anand
 
PDF
Types of Literary Text: Poetry and Prose
kaelandreabibit
 
PDF
What is CFA?? Complete Guide to the Chartered Financial Analyst Program
sp4989653
 
PPTX
Autodock-for-Beginners by Rahul D Jawarkar.pptx
Rahul Jawarkar
 
PPTX
How to Close Subscription in Odoo 18 - Odoo Slides
Celine George
 
PDF
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
Miraj Khan
 
PDF
BÀI TẬP TEST BỔ TRỢ THEO TỪNG CHỦ ĐỀ CỦA TỪNG UNIT KÈM BÀI TẬP NGHE - TIẾNG A...
Nguyen Thanh Tu Collection
 
PPTX
Five Point Someone – Chetan Bhagat | Book Summary & Analysis by Bhupesh Kushwaha
Bhupesh Kushwaha
 
PPTX
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PoojaSen20
 
The Picture of Dorian Gray summary and depiction
opaliyahemel
 
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
Information Texts_Infographic on Forgetting Curve.pptx
Tata Sevilla
 
Odoo 18 Sales_ Managing Quotation Validity
Celine George
 
Trends in pediatric nursing .pptx
AneetaSharma15
 
RA 12028_ARAL_Orientation_Day-2-Sessions_v2.pdf
Seven De Los Reyes
 
Virat Kohli- the Pride of Indian cricket
kushpar147
 
Tips Management in Odoo 18 POS - Odoo Slides
Celine George
 
Presentation of the MIPLM subject matter expert Erdem Kaya
MIPLM
 
Artificial-Intelligence-in-Drug-Discovery by R D Jawarkar.pptx
Rahul Jawarkar
 
FSSAI (Food Safety and Standards Authority of India) & FDA (Food and Drug Adm...
Dr. Paindla Jyothirmai
 
family health care settings home visit - unit 6 - chn 1 - gnm 1st year.pptx
Priyanshu Anand
 
Types of Literary Text: Poetry and Prose
kaelandreabibit
 
What is CFA?? Complete Guide to the Chartered Financial Analyst Program
sp4989653
 
Autodock-for-Beginners by Rahul D Jawarkar.pptx
Rahul Jawarkar
 
How to Close Subscription in Odoo 18 - Odoo Slides
Celine George
 
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
Miraj Khan
 
BÀI TẬP TEST BỔ TRỢ THEO TỪNG CHỦ ĐỀ CỦA TỪNG UNIT KÈM BÀI TẬP NGHE - TIẾNG A...
Nguyen Thanh Tu Collection
 
Five Point Someone – Chetan Bhagat | Book Summary & Analysis by Bhupesh Kushwaha
Bhupesh Kushwaha
 
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PoojaSen20
 

Responsive web design with Angularjs

  • 1. Responsive web app design using Slides Assembled by:Slides Assembled by:Slides Assembled by:Slides Assembled by: ArnabArnabArnabArnab PradhanPradhanPradhanPradhan Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028 Reg. No. 133Reg. No. 133Reg. No. 133Reg. No. 133----1124112411241124----0276027602760276----12121212
  • 2. What is AngularJS Features of AngularJS Why AngularJS jQuery vs AngularJS
  • 3. A MVC JavaScript framework by Google for creating single page dynamic web application Open Source ◦ GitHub: https://github.com/angular/angular.js ◦ MIT License◦ MIT License
  • 4. Two-way Data Binding – Model as single source of truth Directives – Extend HTML MVC Dependency InjectionDependency Injection Testing Deep Linking (Map URL to route Definition) Server – Side Communication
  • 5. Views are declarative ◦ The structure of the interface Controllers do not need to directly manipulate the view ◦ Changes in the models / data are automatically◦ Changes in the models / data are automatically reflected in the view ◦ Updates are managed by the frameworks
  • 6. Directives are markers (such as attributes, tags, and class names) that tell AngularJS to attach a given behavior to a DOM element (or transform it, replace it, etc.) Some angular directivesSome angular directives The ng-app - Bootstrapping your app and defining its scope. The ng-controller - defines which controller will be in charge of your view. The ng-repeat - Allows for looping through collections
  • 7. Model (Data) View (UI) Notifies Controller (Logic) Notifies Changes
  • 9. Angular implements MVC by asking you to split your app into MVC components, then just let Angular do the rest. Angular manages your components for you and also serves as the pipeline that connectsand also serves as the pipeline that connects them.
  • 10. Unit testing front end code is usually hard because there are so many sticky dependencies. Angular’s DI allows you to mock out many of these dependencies and isolate individual components.isolate individual components.
  • 11. Deep linking supported Server side communication is done by $http and $resource services
  • 15. Angular 2 (Angular-Meteor) Write Angular on the server(angular-meteor.com)
  • 16. [1] https://github.com/angular/angular.js [2] http://campus.codeschool.com/courses/shaping-up-with- angular-js/ [3] https://docs.angularjs.org/api/ [4] http://www.nganimate.org/ [5] http://ngmodules.org/modules/ngtimeago[5] http://ngmodules.org/modules/ngtimeago [6] http://angular-js.in/panhandler/