SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

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
 

Tendances (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について 〜スケールするアプリケーションを求めて〜
 

En vedette

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
 

En vedette (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
 

Similaire à 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
 

Similaire à 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
 

Dernier

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)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
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
 
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...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
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
 

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