SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 

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

Andere mochten auch

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
 

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
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
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 

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