SlideShare une entreprise Scribd logo
1  sur  16
Isn’t that all you need ?
• Pure JS (no JQuery)
• MVC framework
• Dependency Injection
• There are no Observables objects/Properties
• Encourage to write unit testable code
Basic Concepts
• Model - application data
• View - what the user sees
• Controller - application behavior
• Scope - glue between application data and
behavior
• $ - angular namespace ($$ is private )
• Module - configures the injector
• Injector - assembles the application
Data Binding
Write an interactive app without using custom
JavaScript
Few directives
• Define data in the view itself ng-init
• Initialize the application ng-app
• Two way binding ng-model
Expressions
{{ expression | filter }}
expression - access variables and functions from the
scope
filter - formats the value of an expression for display
to the user
Controllers
• The UI Logic
• Use of ng-controller
Services
• View independent business logic
• Share common logic across controllers
• Lazily instantiated
• Singletons
• Built in services - $http, $compile, $q
References
• https://www.youtube.com/watch?v=i9MHigUZKEM
• https://docs.angularjs.org/guide/concepts
• http://stackoverflow.com/questions/tagged/angula
rjs

Contenu connexe

Tendances

SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4
Jon Galloway
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 

Tendances (20)

AngularJS
AngularJSAngularJS
AngularJS
 
ASP .NET MVC - best practices
ASP .NET MVC - best practicesASP .NET MVC - best practices
ASP .NET MVC - best practices
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversityASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
 
Angular 2
Angular 2Angular 2
Angular 2
 
Angular App Presentation
Angular App PresentationAngular App Presentation
Angular App Presentation
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
 
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
 
CraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJSCraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJS
 
JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!
 
Drupal & AngularJS - DrupalCamp Spain 2014
Drupal & AngularJS - DrupalCamp Spain 2014Drupal & AngularJS - DrupalCamp Spain 2014
Drupal & AngularJS - DrupalCamp Spain 2014
 
Angular js for enteprise application
Angular js for enteprise applicationAngular js for enteprise application
Angular js for enteprise application
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
 
Sitecore MVC (London User Group, April 29th 2014)
Sitecore MVC (London User Group, April 29th 2014)Sitecore MVC (London User Group, April 29th 2014)
Sitecore MVC (London User Group, April 29th 2014)
 
SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
OSGi and JavaScript - Simon Kaegi
OSGi and JavaScript - Simon KaegiOSGi and JavaScript - Simon Kaegi
OSGi and JavaScript - Simon Kaegi
 
What angular 13 will bring to the table
What angular 13 will bring to the table What angular 13 will bring to the table
What angular 13 will bring to the table
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3
 
Angular introduction students
Angular introduction studentsAngular introduction students
Angular introduction students
 

En vedette

En vedette (13)

AngularJs , How it works
AngularJs , How it worksAngularJs , How it works
AngularJs , How it works
 
PDFArticle
PDFArticlePDFArticle
PDFArticle
 
Inversion of control using dependency injection in Web APIs using Unity Conta...
Inversion of control using dependency injection in Web APIs using Unity Conta...Inversion of control using dependency injection in Web APIs using Unity Conta...
Inversion of control using dependency injection in Web APIs using Unity Conta...
 
ASP.NET MVC difference between questions list 1
ASP.NET MVC difference between questions list 1ASP.NET MVC difference between questions list 1
ASP.NET MVC difference between questions list 1
 
Asp.net MVC DI
Asp.net MVC DIAsp.net MVC DI
Asp.net MVC DI
 
Technical Video Training Sites- 1
Technical Video Training Sites- 1Technical Video Training Sites- 1
Technical Video Training Sites- 1
 
Resolve dependency of dependencies using Inversion of Control and dependency ...
Resolve dependency of dependencies using Inversion of Control and dependency ...Resolve dependency of dependencies using Inversion of Control and dependency ...
Resolve dependency of dependencies using Inversion of Control and dependency ...
 
Difference between authentication and authorization in asp.net
Difference between authentication and authorization in asp.netDifference between authentication and authorization in asp.net
Difference between authentication and authorization in asp.net
 
State Management In ASP.NET And ASP.NET MVC
State Management In ASP.NET And ASP.NET MVCState Management In ASP.NET And ASP.NET MVC
State Management In ASP.NET And ASP.NET MVC
 
MS.Net Interview Questions - Simplified
MS.Net Interview Questions - SimplifiedMS.Net Interview Questions - Simplified
MS.Net Interview Questions - Simplified
 
ASP.NET MVC Interview Questions and Answers by Shailendra Chauhan
ASP.NET MVC Interview Questions and Answers by Shailendra ChauhanASP.NET MVC Interview Questions and Answers by Shailendra Chauhan
ASP.NET MVC Interview Questions and Answers by Shailendra Chauhan
 
Top 100 .Net Interview Questions and Answer
Top 100 .Net Interview Questions and AnswerTop 100 .Net Interview Questions and Answer
Top 100 .Net Interview Questions and Answer
 
C# ASP.NET WEB API APPLICATION DEVELOPMENT
C# ASP.NET WEB API APPLICATION DEVELOPMENTC# ASP.NET WEB API APPLICATION DEVELOPMENT
C# ASP.NET WEB API APPLICATION DEVELOPMENT
 

Similaire à Angularjs Basics

Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
Goutam Dey
 

Similaire à Angularjs Basics (20)

AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) Presentation
 
Module2
Module2Module2
Module2
 
Angularjs basic part01
Angularjs basic part01Angularjs basic part01
Angularjs basic part01
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
 
Angular js
Angular jsAngular js
Angular js
 
Angularjs
AngularjsAngularjs
Angularjs
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
What's new in Angular 2?
What's new in Angular 2?What's new in Angular 2?
What's new in Angular 2?
 
Introduction to AngularJs
Introduction to AngularJsIntroduction to AngularJs
Introduction to AngularJs
 
Mini-Training: AngularJS
Mini-Training: AngularJSMini-Training: AngularJS
Mini-Training: AngularJS
 
Single page application 03
Single page application   03Single page application   03
Single page application 03
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 
Angular js 1.3 basic tutorial
Angular js 1.3 basic tutorialAngular js 1.3 basic tutorial
Angular js 1.3 basic tutorial
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
AngularJS
AngularJSAngularJS
AngularJS
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentalsAngular js 1.0-fundamentals
Angular js 1.0-fundamentals
 

Dernier

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Dernier (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 

Angularjs Basics

Notes de l'éditeur

  1. Developed by Misko hevery , in three weeks
  2. google trends
  3. http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/
  4. https://docs.angularjs.org/guide/concepts http://plnkr.co/edit/?p=preview <div ng-app ng-init="qty=1;cost=2"> <b>Invoice:</b> <div> Quantity: <input type="number" ng-model="qty" required > </div> <div> Costs: <input type="number" ng-model="cost" required > </div> <div> <b>Total:</b> {{qty * cost | currency}} </div> </div>
  5. https://docs.angularjs.org/guide/filter {{qty * cost | currency}}
  6. constructor function that creates the actual controller instance. The purpose of controllers is to expose variables and functionality to expressions and directives. http://plnkr.co/edit/lwlrMd66y8mQjzGZVWd2?p=preview
  7. https://docs.angularjs.org/guide/services
  8. https://docs.angularjs.org/guide/concepts#controller http://plnkr.co/edit/AZYwKmTv5P14vjNEGz0j?p=preview Angular 2.0- for future browsers Intergration with other libraries – kendo-angular Writing directives