SlideShare una empresa de Scribd logo
1 de 14
Presented by:
Brajesh
Agenda
Introduction
What should we know before using Angular JS
How Web Pages Get to Your Browser
What Is Angular JS?
How different from Others
Why need angular JS?
How to use Angular JS?
Angular Demo
Q & A
AngularJS is created by Google to build single page applications which
could be more architectured and maintainable.
AngularJS is completely clientside and entirely JavaScript, so wherever
Javascript runs AngularJS also runs.
It is even less than 29kb making it highly minified and compressed.
Angular is the next generation framework
• Moderate knowledge of HTML, CSS, JavaScript, including the following
concepts:
– Design Pattern
– OOP, including encapsulation and inheritance
– Object creation, prototypes
• Basic Model-View-Controller concepts
• The Document Object Model
• JavaScript functions, events, error handling
When you open your web browser on your computer and type in
http://google.com, your web browser “asks” the internet (more precisely,
it “asks” a DNS server) where google.com’s address is. If the DNS server
knows the IP address you’re looking for, it responds with the address. If
not,it passes the request along to other DNS servers until the IP address is
found and served to your computer. You can see the DNS server response
by typing this code into a terminal
• AngularJS is a client-side technology, written entirely in JavaScript. It works
with the long-established technologies of the web (HTML, CSS, and
JavaScript) to make the development of web apps easier and faster than
ever before.
• structural framework for design SPA.
• AngularJS allows you to extend HTML by adding your own custom tags and
attributes
In other JavaScript frameworks, we are forced to extend from custom JavaScript objects
and manipulate the DOM from the outside in. For instance, using jQuery, to add a
button in the DOM,we’ll have to know where we’re putting the element and insert it in
the appropriate place:
var btn = $("<button>Hi</button>");
btn.on('click', function(evt) { console.log("Clicked button") });
$("#checkoutHolder").append(btn);
Although this process is not complex, it requires the developer to have knowledge of
the entire DOM and force our complex logic inside JavaScript code to manipulate a
foreign DOM.
AngularJS, on the other hand, augments HTML to give it native Model-View-Controller
(MVC) capabilities. This choice, as it turns out, makes building impressive and
expressive client-side applications quick and enjoyable.
It enables you, the developer, to encapsulate a portion of your entire page as one
application, rather than forcing the entire page to be an AngularJS application.
• MVC Support
• Two way data binding
• AngularJS Supports Single Page Applications.
• AngularJS Helps Developers Manage State.
• AngularJS Gives Developers Controls.
• AngularJS Enables Massively Parallel Development.
• AngularJS Handles Dependencies
• Routing Mechanism.
AngularJS road map
Angular directory Architecture
Thank you for listening!

Más contenido relacionado

La actualidad más candente

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework Sakthi Bro
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginnersMunir Hoque
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introductionLuigi De Russis
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular jsAayush Shrestha
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners WorkshopSathish VJ
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS introdizabl
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - IntroductionSagar Acharya
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSDavid Parsons
 
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular jsTamer Solieman
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJSWei Ru
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSAdvanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSSimon Guest
 

La actualidad más candente (20)

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Angular js
Angular jsAngular js
Angular js
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introduction
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
 
Angular js
Angular jsAngular js
Angular js
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular js
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish Minutes
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSAdvanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
 
AngularJS
AngularJSAngularJS
AngularJS
 

Similar a AngularJS Introduction

Introduction to AngularJS Framework
Introduction to AngularJS FrameworkIntroduction to AngularJS Framework
Introduction to AngularJS FrameworkRaveendra R
 
angularjs_tutorial.docx
angularjs_tutorial.docxangularjs_tutorial.docx
angularjs_tutorial.docxtelegramvip
 
Angularjs on line training
Angularjs on line trainingAngularjs on line training
Angularjs on line trainingJahan Murugassan
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To ChooseAlbiorix Technology
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to JqueryGurpreet singh
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptxBig Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptxsarah david
 
An introduction to AngularJS
An introduction to AngularJSAn introduction to AngularJS
An introduction to AngularJSYogesh singh
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSTom Borger
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdfquantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdfsarah david
 
React js, node js &amp; angular js which one is the best for web development
React js, node js &amp; angular js  which one is the best for web development React js, node js &amp; angular js  which one is the best for web development
React js, node js &amp; angular js which one is the best for web development Concetto Labs
 

Similar a AngularJS Introduction (20)

Training On Angular Js
Training On Angular JsTraining On Angular Js
Training On Angular Js
 
Introduction to AngularJS Framework
Introduction to AngularJS FrameworkIntroduction to AngularJS Framework
Introduction to AngularJS Framework
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Angular Js
Angular JsAngular Js
Angular Js
 
angularjs_tutorial.docx
angularjs_tutorial.docxangularjs_tutorial.docx
angularjs_tutorial.docx
 
Angularjs on line training
Angularjs on line trainingAngularjs on line training
Angularjs on line training
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Itroducing Angular JS
Itroducing Angular JSItroducing Angular JS
Itroducing Angular JS
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
 
AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptxBig Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
 
An introduction to AngularJS
An introduction to AngularJSAn introduction to AngularJS
An introduction to AngularJS
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdfquantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
 
React js, node js &amp; angular js which one is the best for web development
React js, node js &amp; angular js  which one is the best for web development React js, node js &amp; angular js  which one is the best for web development
React js, node js &amp; angular js which one is the best for web development
 

AngularJS Introduction

  • 2. Agenda Introduction What should we know before using Angular JS How Web Pages Get to Your Browser What Is Angular JS? How different from Others Why need angular JS? How to use Angular JS? Angular Demo Q & A
  • 3. AngularJS is created by Google to build single page applications which could be more architectured and maintainable. AngularJS is completely clientside and entirely JavaScript, so wherever Javascript runs AngularJS also runs. It is even less than 29kb making it highly minified and compressed. Angular is the next generation framework
  • 4. • Moderate knowledge of HTML, CSS, JavaScript, including the following concepts: – Design Pattern – OOP, including encapsulation and inheritance – Object creation, prototypes • Basic Model-View-Controller concepts • The Document Object Model • JavaScript functions, events, error handling
  • 5. When you open your web browser on your computer and type in http://google.com, your web browser “asks” the internet (more precisely, it “asks” a DNS server) where google.com’s address is. If the DNS server knows the IP address you’re looking for, it responds with the address. If not,it passes the request along to other DNS servers until the IP address is found and served to your computer. You can see the DNS server response by typing this code into a terminal
  • 6. • AngularJS is a client-side technology, written entirely in JavaScript. It works with the long-established technologies of the web (HTML, CSS, and JavaScript) to make the development of web apps easier and faster than ever before. • structural framework for design SPA. • AngularJS allows you to extend HTML by adding your own custom tags and attributes
  • 7. In other JavaScript frameworks, we are forced to extend from custom JavaScript objects and manipulate the DOM from the outside in. For instance, using jQuery, to add a button in the DOM,we’ll have to know where we’re putting the element and insert it in the appropriate place: var btn = $("<button>Hi</button>"); btn.on('click', function(evt) { console.log("Clicked button") }); $("#checkoutHolder").append(btn); Although this process is not complex, it requires the developer to have knowledge of the entire DOM and force our complex logic inside JavaScript code to manipulate a foreign DOM. AngularJS, on the other hand, augments HTML to give it native Model-View-Controller (MVC) capabilities. This choice, as it turns out, makes building impressive and expressive client-side applications quick and enjoyable. It enables you, the developer, to encapsulate a portion of your entire page as one application, rather than forcing the entire page to be an AngularJS application.
  • 8. • MVC Support • Two way data binding • AngularJS Supports Single Page Applications. • AngularJS Helps Developers Manage State. • AngularJS Gives Developers Controls. • AngularJS Enables Massively Parallel Development. • AngularJS Handles Dependencies • Routing Mechanism.
  • 9.
  • 11.
  • 13.
  • 14. Thank you for listening!

Notas del editor

  1. One very important directive defined by AngularJS is called ng-app. The 1st step AngularJS does after it gets callback forDOMContentLoaded is that it looks for the ng-app directive. We have discussed above that directive can either be a tag or an attribute.ng-app can only be used as an attribute. AngularJS expects users to use ng-app only once per application. It ignores all other declarations of ng-app if used.