SlideShare a Scribd company logo
1 of 9
Introduction à



“ HTML enhanced for web apps! ”
Qu’est-ce que AngularJS ?
 Framework JavaScript MVC MVP MVVM ???
   MVW : Model View Whatever
   W = "whatever works for you!"
 « Super-powered by Google »
 Open source : MIT Licence / GitHub
 Création de Web Application
 Modulable et extensible
Ses caractéristiques
   100% JavaScript (server side)
   Data binding
   Separating Data / Presentation / Logic
   Modules & Dependecy Injection
   Services
   Directive
   Rooting & Deep Link
   Form Validation
   Testing
Data binding avec AngularJS
Data binding avec AngularJS
Coding time
Directives
  <div ng-controller="Ctrl2">
     Date format: <input ng-model="format">
     Current time is: <span my-current-time="format"></span>
  </div>

  <div>
      <button ng-click="show=true">show</button>
      <dialog title="Hello {{username}}."
             visible="show"
             on-cancel="show = false"
             on-ok="show = false; doSomething()">
             Body goes here: {{username}} is {{title}}.
      </dialog>
  </div>
Frameworks concurrents
   Backbone.js
   Ember.js
   Spine.js
   KnockoutJS
   Dojo
   …

 Un peu de bonne lecture :
    http://coding.smashingmagazine.com/2012/07/27/journey-through-
     the-javascript-mvc-jungle/
    http://sporto.github.io/blog/2013/04/12/comparison-angular-
     backbone-can-ember/
RennesJS : enfin un JS User Group à Rennes ?
 Google group « RennesJS »
   http://groups.google.com/group/RennesJS
 Trello
   https://trello.com/board/rennesjs/516463cd93a6fa9c3a00acfc
 nico.pennec@gmail.com
 @NicoPennec

More Related Content

What's hot

jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
yoshiaki iwanaga
 

What's hot (20)

Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
 
[D2 오픈세미나]2.모바일웹디버깅
[D2 오픈세미나]2.모바일웹디버깅[D2 오픈세미나]2.모바일웹디버깅
[D2 오픈세미나]2.모바일웹디버깅
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
 
Desktop, Web e Mobile
Desktop, Web e MobileDesktop, Web e Mobile
Desktop, Web e Mobile
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Development
 
PWA Roadshow Korea - Service Worker
PWA Roadshow Korea - Service WorkerPWA Roadshow Korea - Service Worker
PWA Roadshow Korea - Service Worker
 
Code Resume
Code ResumeCode Resume
Code Resume
 
Hybrid app
Hybrid appHybrid app
Hybrid app
 
Performance monitoring measurement angualrjs single page apps with phantomas
Performance monitoring measurement angualrjs single page apps with phantomasPerformance monitoring measurement angualrjs single page apps with phantomas
Performance monitoring measurement angualrjs single page apps with phantomas
 
Javascript fullstasck
Javascript fullstasckJavascript fullstasck
Javascript fullstasck
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
Membangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.jsMembangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.js
 
handout-05b
handout-05bhandout-05b
handout-05b
 
Vue.js
Vue.jsVue.js
Vue.js
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
 
Webpack
Webpack Webpack
Webpack
 
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - KeynotePWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - Keynote
 
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
 

Viewers also liked

Lancement du RennesJS - le User Group de la communauté JavaScript rennaise.
Lancement du RennesJS - le User Group de la communauté JavaScript rennaise.Lancement du RennesJS - le User Group de la communauté JavaScript rennaise.
Lancement du RennesJS - le User Group de la communauté JavaScript rennaise.
Nicolas PENNEC
 

Viewers also liked (8)

Flex 4.6 et Flash Builder 4.6
Flex 4.6 et Flash Builder 4.6Flex 4.6 et Flash Builder 4.6
Flex 4.6 et Flash Builder 4.6
 
Lancement du RennesJS - le User Group de la communauté JavaScript rennaise.
Lancement du RennesJS - le User Group de la communauté JavaScript rennaise.Lancement du RennesJS - le User Group de la communauté JavaScript rennaise.
Lancement du RennesJS - le User Group de la communauté JavaScript rennaise.
 
45 Tools to Boost Your Front-End
45 Tools to Boost Your Front-End45 Tools to Boost Your Front-End
45 Tools to Boost Your Front-End
 
Ng-Conf 2015 Report : AngularJS 1 & 2
Ng-Conf 2015 Report : AngularJS 1 & 2Ng-Conf 2015 Report : AngularJS 1 & 2
Ng-Conf 2015 Report : AngularJS 1 & 2
 
[SEN#7] Le Top 100 des entreprises qui recrutent dans le numérique
[SEN#7] Le Top 100 des entreprises qui recrutent dans le numérique[SEN#7] Le Top 100 des entreprises qui recrutent dans le numérique
[SEN#7] Le Top 100 des entreprises qui recrutent dans le numérique
 
Présentation de Robotlegs
Présentation de RobotlegsPrésentation de Robotlegs
Présentation de Robotlegs
 
Nouveautés Flash Platform
Nouveautés  Flash PlatformNouveautés  Flash Platform
Nouveautés Flash Platform
 
Angular 2 : le réveil de la force
Angular 2 : le réveil de la forceAngular 2 : le réveil de la force
Angular 2 : le réveil de la force
 

Similar to Introduction à AngularJS

gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
George Nguyen
 
gDayX - Advanced angularjs
gDayX - Advanced angularjsgDayX - Advanced angularjs
gDayX - Advanced angularjs
gdgvietnam
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
Peter Drinnan
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 

Similar to Introduction à AngularJS (20)

gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
gDayX - Advanced angularjs
gDayX - Advanced angularjsgDayX - Advanced angularjs
gDayX - Advanced angularjs
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
 
Using ReactJS in AngularJS
Using ReactJS in AngularJSUsing ReactJS in AngularJS
Using ReactJS in AngularJS
 
Front End Development for Back End Developers - Denver Startup Week 2017
Front End Development for Back End Developers - Denver Startup Week 2017Front End Development for Back End Developers - Denver Startup Week 2017
Front End Development for Back End Developers - Denver Startup Week 2017
 
Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
 
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
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Angular JS deep dive
Angular JS deep diveAngular JS deep dive
Angular JS deep dive
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
 
MVC & backbone.js
MVC & backbone.jsMVC & backbone.js
MVC & backbone.js
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
Knockout mvvm-m1-slides
Knockout mvvm-m1-slidesKnockout mvvm-m1-slides
Knockout mvvm-m1-slides
 
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
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Recently uploaded (20)

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
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
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
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
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 

Introduction à AngularJS

  • 1. Introduction à “ HTML enhanced for web apps! ”
  • 2. Qu’est-ce que AngularJS ?  Framework JavaScript MVC MVP MVVM ???  MVW : Model View Whatever  W = "whatever works for you!"  « Super-powered by Google »  Open source : MIT Licence / GitHub  Création de Web Application  Modulable et extensible
  • 3. Ses caractéristiques  100% JavaScript (server side)  Data binding  Separating Data / Presentation / Logic  Modules & Dependecy Injection  Services  Directive  Rooting & Deep Link  Form Validation  Testing
  • 4. Data binding avec AngularJS
  • 5. Data binding avec AngularJS
  • 7. Directives <div ng-controller="Ctrl2"> Date format: <input ng-model="format"> Current time is: <span my-current-time="format"></span> </div> <div> <button ng-click="show=true">show</button> <dialog title="Hello {{username}}." visible="show" on-cancel="show = false" on-ok="show = false; doSomething()"> Body goes here: {{username}} is {{title}}. </dialog> </div>
  • 8. Frameworks concurrents  Backbone.js  Ember.js  Spine.js  KnockoutJS  Dojo  …  Un peu de bonne lecture :  http://coding.smashingmagazine.com/2012/07/27/journey-through- the-javascript-mvc-jungle/  http://sporto.github.io/blog/2013/04/12/comparison-angular- backbone-can-ember/
  • 9. RennesJS : enfin un JS User Group à Rennes ?  Google group « RennesJS »  http://groups.google.com/group/RennesJS  Trello  https://trello.com/board/rennesjs/516463cd93a6fa9c3a00acfc  nico.pennec@gmail.com  @NicoPennec