SlideShare a Scribd company logo
AngularJS
JAGRITI SRIVASTAVA
Angular JS
 Javascript framework to build browser based applications
 Seems like single page application but loads multiple pages based on user
interaction.
 Written in javascript with light weight jQuery library called jQuery lite
 It encapsulates multiple portion of a page into a single page
 It is easy to write test and debug forming a well-defined, well-designed
and well-structured web pages.
Why Angular JS
 Allows to define custom tags in HTML.
 Uses Model View Framework (MVC)
 Model  It is the lowest level of the pattern responsible for maintaining
data.
 View  It is responsible for displaying all or a portion of the data to the
user.
 Controller  It is a software Code that controls the interactions between
the Model and View.
 Application written in AngularJS is cross-browser compliant. AngularJS
automatically handles JavaScript code suitable for each browser.
Angular as MVC
 The view are defined in HTML while model and controller are implemented
in javascript.
 Model has application data
 View is what is visible to the users of our application
 Controller acts as the link between the model and view.
MVC Model in Angularjs
Why Angular
 Uses less code than traditional Javascript application .
 Needs less DOM (Document Object Model) manipulation.
 It is easy to test application and develop them using test driven approach .
Core Features
 Data-binding-Automatic synchronization of data between model and view components.
 Scope − Objects that refer to the model. They act as a glue between controller and view.
 Controller − JavaScript functions that are bound to a particular scope.
 Services − AngularJS come with several built-in services for example
 $https: to make a XMLHttpRequests. These are singleton objects which are instantiated only
once in app.
 Filters − These select a subset of items from an array and returns a new array.
Core Features
 Directives − Markers on DOM elements (such as elements, attributes, css, and
more). To create custom HTML tags that serve as new, custom widgets.
 AngularJS has built-in directives (ngBind, ngModel...)
 Templates − These are the rendered view with information from the controller and
model. These can be a single file (like index.html) or multiple views in one page
using "partials".
 Routing − It is concept of switching views.
 Deep Linking − Deep linking allows you to encode the state of application in the
URL so that it can be bookmarked. The application can then be restored from the
URL to the same state.
 Dependency Injection − AngularJS has a built-in dependency injection subsystem
that helps the developer by making the application easier to develop, understand,
and test.

More Related Content

What's hot (20)

ODP
Mvc
abhigad
 
PPTX
Introduction to ASP.NET MVC
Emad Alashi
 
PPT
Introduction to ASP.NET MVC
Sunpawet Somsin
 
PPTX
Angular js for beginners
Munir Hoque
 
PPTX
Introduction to single page application with angular js
Mindfire Solutions
 
PPTX
Angular js 1.3 basic tutorial
Al-Mutaz Bellah Salahat
 
PPTX
Introduction to AngularJS
Shyjal Raazi
 
PPTX
Angular JS Indtrodution
adesh21
 
PPTX
Angular js anupama
Anupama Prabhudesai
 
PPTX
Mortal Kombat! ASP.NET MVC vs ASP.NET Webforms – ASP.NET MVC is amazing
Tom Walker
 
PPT
Asp.net mvc
Naga Harish M
 
PDF
Mvc3 crash
Melick Baranasooriya
 
PPTX
Mvc framework
Dhurham Fahem
 
PPTX
ASP.net MVC Introduction Wikilogia (nov 2014)
Hatem Hamad
 
PPTX
angularJS Practicle Explanation
Abhishek Sahu
 
PPTX
Mvc Brief Overview
rainynovember12
 
ODP
Web 2 0 Technologies
Prasad Perumal
 
PPTX
Introduction to AngularJS
David Parsons
 
PPTX
Mvc 4 0_jayant_jindal_28082010
Rishu Mehra
 
PPTX
Angular JS, steal the idea
Scott Lee
 
Mvc
abhigad
 
Introduction to ASP.NET MVC
Emad Alashi
 
Introduction to ASP.NET MVC
Sunpawet Somsin
 
Angular js for beginners
Munir Hoque
 
Introduction to single page application with angular js
Mindfire Solutions
 
Angular js 1.3 basic tutorial
Al-Mutaz Bellah Salahat
 
Introduction to AngularJS
Shyjal Raazi
 
Angular JS Indtrodution
adesh21
 
Angular js anupama
Anupama Prabhudesai
 
Mortal Kombat! ASP.NET MVC vs ASP.NET Webforms – ASP.NET MVC is amazing
Tom Walker
 
Asp.net mvc
Naga Harish M
 
Mvc framework
Dhurham Fahem
 
ASP.net MVC Introduction Wikilogia (nov 2014)
Hatem Hamad
 
angularJS Practicle Explanation
Abhishek Sahu
 
Mvc Brief Overview
rainynovember12
 
Web 2 0 Technologies
Prasad Perumal
 
Introduction to AngularJS
David Parsons
 
Mvc 4 0_jayant_jindal_28082010
Rishu Mehra
 
Angular JS, steal the idea
Scott Lee
 

Similar to Angular introduction basic (20)

PDF
AngularJS By Vipin
Vipin Mundayad
 
PPTX
Anjular js
Naga Dinesh
 
PPTX
Angularjs overview
VickyCmd
 
PPTX
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
PDF
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pdf
sarah david
 
PPTX
Angular JS training institute in Jaipur
HEMANT SAXENA
 
PPTX
What are the key distinctions between Angular and AngularJS?
Albiorix Technology
 
PPTX
AngularJS is awesome
Eusebiu Schipor
 
PPTX
Training On Angular Js
Mahima Radhakrishnan
 
PPTX
Intoduction to Angularjs
Gaurav Agrawal
 
PDF
angularjs-vs-angular-the-key-differences-between-javascript-and-typescript
Cuneiform Consulting Pvt Ltd.
 
PDF
AngularJS: Overview & Key Features
Mohamad Al Asmar
 
PDF
Introduction to AngularJS By Bharat Makwana
Bharat Makwana
 
PPTX
ME vs WEB - AngularJS Fundamentals
Aviran Cohen
 
PDF
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pdf
sarah david
 
DOCX
angularjs_tutorial.docx
telegramvip
 
PPTX
Angular js
Ramakrishna kapa
 
PDF
AngularJS - A JavaScript Framework
Tekki Web Solutions Pvt. Ltd.
 
PDF
AngularJS
Hiten Pratap Singh
 
AngularJS By Vipin
Vipin Mundayad
 
Anjular js
Naga Dinesh
 
Angularjs overview
VickyCmd
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pdf
sarah david
 
Angular JS training institute in Jaipur
HEMANT SAXENA
 
What are the key distinctions between Angular and AngularJS?
Albiorix Technology
 
AngularJS is awesome
Eusebiu Schipor
 
Training On Angular Js
Mahima Radhakrishnan
 
Intoduction to Angularjs
Gaurav Agrawal
 
angularjs-vs-angular-the-key-differences-between-javascript-and-typescript
Cuneiform Consulting Pvt Ltd.
 
AngularJS: Overview & Key Features
Mohamad Al Asmar
 
Introduction to AngularJS By Bharat Makwana
Bharat Makwana
 
ME vs WEB - AngularJS Fundamentals
Aviran Cohen
 
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pdf
sarah david
 
angularjs_tutorial.docx
telegramvip
 
Angular js
Ramakrishna kapa
 
AngularJS - A JavaScript Framework
Tekki Web Solutions Pvt. Ltd.
 
Ad

More from jagriti srivastava (15)

PDF
Map reduce with big data
jagriti srivastava
 
PPTX
Oyo rooms
jagriti srivastava
 
PPTX
Information system of amazon
jagriti srivastava
 
PPTX
JavaScript Canvas
jagriti srivastava
 
PPTX
Variable and Methods in Java
jagriti srivastava
 
PPTX
Component diagram and Deployment Diagram
jagriti srivastava
 
PPTX
Basic java, java collection Framework and Date Time API
jagriti srivastava
 
PPTX
Form validation and animation
jagriti srivastava
 
PPTX
Custom directive and scopes
jagriti srivastava
 
PPTX
Angular directive filter and routing
jagriti srivastava
 
PPTX
Starting with angular js
jagriti srivastava
 
PPTX
Scannerclass
jagriti srivastava
 
PPTX
Programming Workshop
jagriti srivastava
 
PPTX
Java Nested class Concept
jagriti srivastava
 
PPTX
Java , A brief Introduction
jagriti srivastava
 
Map reduce with big data
jagriti srivastava
 
Information system of amazon
jagriti srivastava
 
JavaScript Canvas
jagriti srivastava
 
Variable and Methods in Java
jagriti srivastava
 
Component diagram and Deployment Diagram
jagriti srivastava
 
Basic java, java collection Framework and Date Time API
jagriti srivastava
 
Form validation and animation
jagriti srivastava
 
Custom directive and scopes
jagriti srivastava
 
Angular directive filter and routing
jagriti srivastava
 
Starting with angular js
jagriti srivastava
 
Scannerclass
jagriti srivastava
 
Programming Workshop
jagriti srivastava
 
Java Nested class Concept
jagriti srivastava
 
Java , A brief Introduction
jagriti srivastava
 
Ad

Recently uploaded (20)

PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
PPTX
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
PDF
HubSpot Main Hub: A Unified Growth Platform
Jaswinder Singh
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
PDF
Blockchain Transactions Explained For Everyone
CIFDAQ
 
PDF
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
PPTX
UiPath Academic Alliance Educator Panels: Session 2 - Business Analyst Content
DianaGray10
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
PDF
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
HubSpot Main Hub: A Unified Growth Platform
Jaswinder Singh
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
Blockchain Transactions Explained For Everyone
CIFDAQ
 
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
UiPath Academic Alliance Educator Panels: Session 2 - Business Analyst Content
DianaGray10
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 

Angular introduction basic

  • 2. Angular JS  Javascript framework to build browser based applications  Seems like single page application but loads multiple pages based on user interaction.  Written in javascript with light weight jQuery library called jQuery lite  It encapsulates multiple portion of a page into a single page  It is easy to write test and debug forming a well-defined, well-designed and well-structured web pages.
  • 3. Why Angular JS  Allows to define custom tags in HTML.  Uses Model View Framework (MVC)  Model  It is the lowest level of the pattern responsible for maintaining data.  View  It is responsible for displaying all or a portion of the data to the user.  Controller  It is a software Code that controls the interactions between the Model and View.  Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
  • 4. Angular as MVC  The view are defined in HTML while model and controller are implemented in javascript.  Model has application data  View is what is visible to the users of our application  Controller acts as the link between the model and view.
  • 5. MVC Model in Angularjs
  • 6. Why Angular  Uses less code than traditional Javascript application .  Needs less DOM (Document Object Model) manipulation.  It is easy to test application and develop them using test driven approach .
  • 7. Core Features  Data-binding-Automatic synchronization of data between model and view components.  Scope − Objects that refer to the model. They act as a glue between controller and view.  Controller − JavaScript functions that are bound to a particular scope.  Services − AngularJS come with several built-in services for example  $https: to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.  Filters − These select a subset of items from an array and returns a new array.
  • 8. Core Features  Directives − Markers on DOM elements (such as elements, attributes, css, and more). To create custom HTML tags that serve as new, custom widgets.  AngularJS has built-in directives (ngBind, ngModel...)  Templates − These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials".  Routing − It is concept of switching views.  Deep Linking − Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.  Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.