SlideShare a Scribd company logo
ONE PAGE APP WITH


adam.stipak@gmail.com | @new_POPE
WTF, WHICH TOOL I NEED ???
   Backbone.js
   Ember.js
   Google Closure
   Spine
   jQuery (non FW)
   Este.js (Is it not dead? ;-))
   ...
   No thanks, AngularJS is cool ;-)
WHY ?
Bootstrapping
Module based
Templates
2-way data binding (It's fucking good)
Dependency Injection
Routing
Directives
BOOTSTRAPPING
                     Step 1:
<citsc"i/saglrmnj"<srp>
 srp r=lbj/nua.i.s>/cit


                     Step 2:
<tln-p>
 hm gap


                     Result:
{12}i 3
 {+} s


          I'm using this way (RequireJS)
vrap=aglrmdl(ap,[*dp *];
 a p  nua.oue'p' / es /)
aglrbosrpdcmn,[ap];
 nua.otta(ouet 'p')
MODULE BASED
               HTML
<tln-p=mAp>
 hm gap"yp"


                JS
vrmAp=aglrmdl(mAp,[) / N dp.
 a yp nua.oue'yp' ]; / o es

/ Cleto o U drcie.
 / olcin f I ietvs
aglrmdl(uDrcie' [*.*];
 nua.oue'iietvs, /../)

vrmAp=aglrmdl(mAp,[uDrcie')
 a yp nua.oue'yp' 'iietvs];
TEMPLATES
<l
 u>
 <in-eet"tmi [wb,'lmn' '1'"
 l grpa=ie n 'e' eeet, #4]>
 {ie}
  {tm}
 <l>
 /i
<dv
 /i>


               web
               element
               #14
WITH CONTROLLERS
                    JS
mApcnrle(Tmltsotolr,fnto(soe {
 yp.otolr'epaeCnrle' ucin$cp)
    $cp.tm =[wb,'lmn' '1';
     soeies 'e' eeet, #4]
};
 )

                 Template
<i n-otolr"epaeCnrle"
 dv gcnrle=Tmltsotolr>
     <pnn-eet"tmi ies>
      sa grpa=ie n tm"
          {ie}<ml>{idx}/ml>
           {tm}sal{$ne}<sal
     <sa>
      /pn
<dv
 /i>


                   Result
         web 0   element 1 #14 2
ASYNC TEMPLATES
<i n-iw <- Ol oeo tepg ->
 dv gve> !- ny n n h ae -


             But, you can use this
<i n-nld=tmltsfohm"
 dv gicue"epae/o.tl>

             with nested levels ;-)

 AngularJS loads the templates asynchronously.
2-WAY DATA BINDING
              Controller
$cp.nu =";
 soeipt  "
$cp.laIpt=fnto( {
 soecernu   ucin)
    $cp.nu =";
     soeipt  "
};


              Template
<nu n-oe=ipt>
 ipt gmdl"nu"
<nu n-lc=cernu("tp=bto"vle"la!>
 ipt gcik"laIpt) ye"utn au=Cer"


                Result
                         Clear!


           $scope.input = ""
HOW IT WORKS?
  ONE WAY DATA BINGING
HOW IT WORKS?
 TWO IS MORE THAN ONE, BRO
HOW IT WORKS?
     SCOPES
DEPENDENCY INJECTION
  Dependecny injector is better than Chuck N.
mApsrie'yevc' fnto( {*.*};
 yp.evc(mSrie, ucin) /../)

mApcnrle(SmIesotolr,fnto(yevc){
 yp.otolr'oetmCnrle' ucinmSrie
 / mSriewsatmtclyijce
  / yevc a uoaial netd

  mSriegt'oept'.ucs(ucindt){
   yevc.e(sm/ah)scesfnto(aa
    $cp.tm =dt.tm;
     soeies aaies
  };
   )
};
 )
HOW IT WORKS?
ROUTING
           $routeProvider
mApcni('ruervdr,fnto(r){
 yp.ofg[$otPoie' ucin$p
 $p
  r
   .hn'fo,{
    we(/o'
     tmltUl 'p/o.tl,
      epaer: tlfohm'
     cnrle:Footolr
      otolr oCnrle
   })
   .tews(rdrcT:'br};
    ohrie{eieto /a')
})
 ];
DIRECTIVES
          It's all about directives.
mApdrcie'ldr,fnto( {
 yp.ietv(sie' ucin)
  rtr {
   eun
    ln:fnto(cp,eeet ats {
     ik ucinsoe lmn, tr)
      $eeet.ldr)
       (lmn)sie(;
    }
  }
};
 )




             Value of slider: 5
and so much more on angularjs.org
        Thanks for coming

   @new_POPE | newpope.org

More Related Content

What's hot

Mysql:Operators
Mysql:OperatorsMysql:Operators
Mysql:Operators
DataminingTools Inc
 
Bestpractices nl
Bestpractices nlBestpractices nl
Bestpractices nl
Wilfred Nas
 
Debugging: Rules & Tools
Debugging: Rules & ToolsDebugging: Rules & Tools
Debugging: Rules & Tools
Ian Barber
 
Four Ways to add Features to Ext JS
Four Ways to add Features to Ext JSFour Ways to add Features to Ext JS
Four Ways to add Features to Ext JSShea Frederick
 
Ext oo
Ext ooExt oo
Ext oo
o52tiger
 
Starting out with Ember.js
Starting out with Ember.jsStarting out with Ember.js
Starting out with Ember.js
Anirudh Shivanand
 
Increase productivity with doctrine2 extensions
Increase productivity with doctrine2 extensionsIncrease productivity with doctrine2 extensions
Increase productivity with doctrine2 extensions
Gediminas Morkevicius
 
Mocking Dependencies in PHPUnit
Mocking Dependencies in PHPUnitMocking Dependencies in PHPUnit
Mocking Dependencies in PHPUnit
mfrost503
 
Wso2 esb-rest-integration
Wso2 esb-rest-integrationWso2 esb-rest-integration
Wso2 esb-rest-integration
Chanaka Fernando
 
Ejercicio 3
Ejercicio 3Ejercicio 3
Ejercicio 3ismaxmax
 
Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Não alimente os trolls: JavaScript é bonito - FrontInSM 2015Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Não alimente os trolls: JavaScript é bonito - FrontInSM 2015Rafael Specht da Silva
 
Introdução a worker 2.0
Introdução a worker 2.0Introdução a worker 2.0
Introdução a worker 2.0
Sérgio Rafael Siqueira
 
JavaOne2010 Groovy/Spring Roo
JavaOne2010 Groovy/Spring RooJavaOne2010 Groovy/Spring Roo
JavaOne2010 Groovy/Spring Roo
Yasuharu Nakano
 
Algoritma 5 november wiwik p.l
Algoritma 5 november wiwik p.lAlgoritma 5 november wiwik p.l
Algoritma 5 november wiwik p.l
Wiwik Puji Lestarii
 
Capture and replay hardware behaviour for regression testing and bug reporting
Capture and replay hardware behaviour for regression testing and bug reportingCapture and replay hardware behaviour for regression testing and bug reporting
Capture and replay hardware behaviour for regression testing and bug reporting
martin-pitt
 

What's hot (19)

Mysql:Operators
Mysql:OperatorsMysql:Operators
Mysql:Operators
 
Bestpractices nl
Bestpractices nlBestpractices nl
Bestpractices nl
 
Debugging: Rules & Tools
Debugging: Rules & ToolsDebugging: Rules & Tools
Debugging: Rules & Tools
 
Kumpulan script jahil
Kumpulan script jahilKumpulan script jahil
Kumpulan script jahil
 
Four Ways to add Features to Ext JS
Four Ways to add Features to Ext JSFour Ways to add Features to Ext JS
Four Ways to add Features to Ext JS
 
Ext oo
Ext ooExt oo
Ext oo
 
Sencha Touch Intro
Sencha Touch IntroSencha Touch Intro
Sencha Touch Intro
 
Starting out with Ember.js
Starting out with Ember.jsStarting out with Ember.js
Starting out with Ember.js
 
Increase productivity with doctrine2 extensions
Increase productivity with doctrine2 extensionsIncrease productivity with doctrine2 extensions
Increase productivity with doctrine2 extensions
 
Mocking Dependencies in PHPUnit
Mocking Dependencies in PHPUnitMocking Dependencies in PHPUnit
Mocking Dependencies in PHPUnit
 
Wso2 esb-rest-integration
Wso2 esb-rest-integrationWso2 esb-rest-integration
Wso2 esb-rest-integration
 
Introduction to lua
Introduction to luaIntroduction to lua
Introduction to lua
 
Ejercicio 3
Ejercicio 3Ejercicio 3
Ejercicio 3
 
Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Não alimente os trolls: JavaScript é bonito - FrontInSM 2015Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
 
Introdução a worker 2.0
Introdução a worker 2.0Introdução a worker 2.0
Introdução a worker 2.0
 
JavaOne2010 Groovy/Spring Roo
JavaOne2010 Groovy/Spring RooJavaOne2010 Groovy/Spring Roo
JavaOne2010 Groovy/Spring Roo
 
Algoritma 5 november wiwik p.l
Algoritma 5 november wiwik p.lAlgoritma 5 november wiwik p.l
Algoritma 5 november wiwik p.l
 
Send mail-oracle11g-det
Send mail-oracle11g-detSend mail-oracle11g-det
Send mail-oracle11g-det
 
Capture and replay hardware behaviour for regression testing and bug reporting
Capture and replay hardware behaviour for regression testing and bug reportingCapture and replay hardware behaviour for regression testing and bug reporting
Capture and replay hardware behaviour for regression testing and bug reporting
 

Similar to One page app with AngularJS

Refactoring to symfony components
Refactoring to symfony componentsRefactoring to symfony components
Refactoring to symfony componentsMichael Peacock
 
Build a custom (micro)framework with ZF2 Components (as building blocks)
Build a custom (micro)framework with ZF2 Components (as building blocks)Build a custom (micro)framework with ZF2 Components (as building blocks)
Build a custom (micro)framework with ZF2 Components (as building blocks)
Corley S.r.l.
 
A Backbone.js Tutorial for the Impatient - Part 1
A Backbone.js Tutorial for the Impatient - Part 1A Backbone.js Tutorial for the Impatient - Part 1
A Backbone.js Tutorial for the Impatient - Part 1
jsalonen Salonen
 
Angular.js + Rails at WeWork or: The Accidental Feature
Angular.js + Rails at WeWork or: The Accidental FeatureAngular.js + Rails at WeWork or: The Accidental Feature
Angular.js + Rails at WeWork or: The Accidental Feature
Jonathan Magen
 
Automated tests - facts and myths
Automated tests - facts and mythsAutomated tests - facts and myths
Automated tests - facts and myths
Wojciech Sznapka
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSPat Cito
 
Advanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingAdvanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit Testing
Lars Thorup
 
Beginner workshop to angularjs presentation at Google
Beginner workshop to angularjs presentation at GoogleBeginner workshop to angularjs presentation at Google
Beginner workshop to angularjs presentation at Google
Ari Lerner
 
Front End Dependency Management at CascadiaJS
Front End Dependency Management at CascadiaJSFront End Dependency Management at CascadiaJS
Front End Dependency Management at CascadiaJS
Joe Sepi
 
Javascript: The Important Bits
Javascript: The Important BitsJavascript: The Important Bits
Javascript: The Important Bits
Zumba Fitness - Technology Team
 
Learn Frontend Testing
Learn Frontend TestingLearn Frontend Testing
Learn Frontend Testing
Ryan Roemer
 
Drupal 8 in action, the route to the method
Drupal 8 in action, the route to the methodDrupal 8 in action, the route to the method
Drupal 8 in action, the route to the methodjuanolalla
 
Flow of events during Media Player creation in Android
Flow of events during Media Player creation in AndroidFlow of events during Media Player creation in Android
Flow of events during Media Player creation in Android
Somenath Mukhopadhyay
 
PhpUnit Best Practices
PhpUnit Best PracticesPhpUnit Best Practices
PhpUnit Best Practices
Edorian
 
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJ...
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJ...How to create a 3.2 billion dollar business in 20 minutes: combining AngularJ...
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJ...
Ari Lerner
 
Joker 2015 - Валеев Тагир - Что же мы измеряем?
Joker 2015 - Валеев Тагир - Что же мы измеряем?Joker 2015 - Валеев Тагир - Что же мы измеряем?
Joker 2015 - Валеев Тагир - Что же мы измеряем?
tvaleev
 
49368010 projectreportontraininganddevelopment(1)
49368010 projectreportontraininganddevelopment(1)49368010 projectreportontraininganddevelopment(1)
49368010 projectreportontraininganddevelopment(1)Kritika910
 
Building modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and javaBuilding modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and java
Alexander Gyoshev
 
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
John Ford
 

Similar to One page app with AngularJS (20)

Refactoring to symfony components
Refactoring to symfony componentsRefactoring to symfony components
Refactoring to symfony components
 
Build a custom (micro)framework with ZF2 Components (as building blocks)
Build a custom (micro)framework with ZF2 Components (as building blocks)Build a custom (micro)framework with ZF2 Components (as building blocks)
Build a custom (micro)framework with ZF2 Components (as building blocks)
 
A Backbone.js Tutorial for the Impatient - Part 1
A Backbone.js Tutorial for the Impatient - Part 1A Backbone.js Tutorial for the Impatient - Part 1
A Backbone.js Tutorial for the Impatient - Part 1
 
Angular.js + Rails at WeWork or: The Accidental Feature
Angular.js + Rails at WeWork or: The Accidental FeatureAngular.js + Rails at WeWork or: The Accidental Feature
Angular.js + Rails at WeWork or: The Accidental Feature
 
Automated tests - facts and myths
Automated tests - facts and mythsAutomated tests - facts and myths
Automated tests - facts and myths
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Advanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingAdvanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit Testing
 
Beginner workshop to angularjs presentation at Google
Beginner workshop to angularjs presentation at GoogleBeginner workshop to angularjs presentation at Google
Beginner workshop to angularjs presentation at Google
 
Front End Dependency Management at CascadiaJS
Front End Dependency Management at CascadiaJSFront End Dependency Management at CascadiaJS
Front End Dependency Management at CascadiaJS
 
Javascript: The Important Bits
Javascript: The Important BitsJavascript: The Important Bits
Javascript: The Important Bits
 
Learn Frontend Testing
Learn Frontend TestingLearn Frontend Testing
Learn Frontend Testing
 
Drupal 8 in action, the route to the method
Drupal 8 in action, the route to the methodDrupal 8 in action, the route to the method
Drupal 8 in action, the route to the method
 
Flow of events during Media Player creation in Android
Flow of events during Media Player creation in AndroidFlow of events during Media Player creation in Android
Flow of events during Media Player creation in Android
 
PhpUnit Best Practices
PhpUnit Best PracticesPhpUnit Best Practices
PhpUnit Best Practices
 
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJ...
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJ...How to create a 3.2 billion dollar business in 20 minutes: combining AngularJ...
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJ...
 
PL/SQL Unit Testing Can Be Fun!
PL/SQL Unit Testing Can Be Fun!PL/SQL Unit Testing Can Be Fun!
PL/SQL Unit Testing Can Be Fun!
 
Joker 2015 - Валеев Тагир - Что же мы измеряем?
Joker 2015 - Валеев Тагир - Что же мы измеряем?Joker 2015 - Валеев Тагир - Что же мы измеряем?
Joker 2015 - Валеев Тагир - Что же мы измеряем?
 
49368010 projectreportontraininganddevelopment(1)
49368010 projectreportontraininganddevelopment(1)49368010 projectreportontraininganddevelopment(1)
49368010 projectreportontraininganddevelopment(1)
 
Building modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and javaBuilding modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and java
 
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
 

More from Adam Štipák

Techforce #5 es in 2018
Techforce #5   es in 2018Techforce #5   es in 2018
Techforce #5 es in 2018
Adam Štipák
 
Rubyslava #66 (container edition)
Rubyslava #66 (container edition) Rubyslava #66 (container edition)
Rubyslava #66 (container edition)
Adam Štipák
 
FEI Bratislava 2017 - Docker
FEI Bratislava 2017 - DockerFEI Bratislava 2017 - Docker
FEI Bratislava 2017 - Docker
Adam Štipák
 
Wordcamp Bratislava 2017 - Docker! Why?
Wordcamp Bratislava 2017 - Docker! Why?Wordcamp Bratislava 2017 - Docker! Why?
Wordcamp Bratislava 2017 - Docker! Why?
Adam Štipák
 
Introduction to Domain Driven Design (Webtlak #7)
Introduction to Domain Driven Design (Webtlak #7)Introduction to Domain Driven Design (Webtlak #7)
Introduction to Domain Driven Design (Webtlak #7)
Adam Štipák
 
Introduction to Docker
Introduction to DockerIntroduction to Docker
Introduction to Docker
Adam Štipák
 
from docker run to docker compose (Webelement #36)
from docker run to docker compose (Webelement #36)from docker run to docker compose (Webelement #36)
from docker run to docker compose (Webelement #36)
Adam Štipák
 
Docker for local development
Docker for local developmentDocker for local development
Docker for local development
Adam Štipák
 
Improve your workflow
Improve your workflowImprove your workflow
Improve your workflow
Adam Štipák
 
Docker on OSX without pain
Docker on OSX without painDocker on OSX without pain
Docker on OSX without pain
Adam Štipák
 
Testing with Codeception (Webelement #30)
Testing with Codeception (Webelement #30)Testing with Codeception (Webelement #30)
Testing with Codeception (Webelement #30)
Adam Štipák
 
How to be a full stack developer
How to be a full stack developerHow to be a full stack developer
How to be a full stack developer
Adam Štipák
 
Independent components in Nette Framework
Independent components in Nette FrameworkIndependent components in Nette Framework
Independent components in Nette Framework
Adam Štipák
 
Nette framework (WebElement #28)
Nette framework (WebElement #28)Nette framework (WebElement #28)
Nette framework (WebElement #28)Adam Štipák
 
Nette framework (WebElement #27 lightning talk)
Nette framework (WebElement #27 lightning talk)Nette framework (WebElement #27 lightning talk)
Nette framework (WebElement #27 lightning talk)Adam Štipák
 
FEI 2013 - Nette framework
FEI 2013 - Nette frameworkFEI 2013 - Nette framework
FEI 2013 - Nette framework
Adam Štipák
 
FEI - Nette framework
FEI - Nette frameworkFEI - Nette framework
FEI - Nette frameworkAdam Štipák
 

More from Adam Štipák (19)

Techforce #5 es in 2018
Techforce #5   es in 2018Techforce #5   es in 2018
Techforce #5 es in 2018
 
Rubyslava #66 (container edition)
Rubyslava #66 (container edition) Rubyslava #66 (container edition)
Rubyslava #66 (container edition)
 
FEI Bratislava 2017 - Docker
FEI Bratislava 2017 - DockerFEI Bratislava 2017 - Docker
FEI Bratislava 2017 - Docker
 
Wordcamp Bratislava 2017 - Docker! Why?
Wordcamp Bratislava 2017 - Docker! Why?Wordcamp Bratislava 2017 - Docker! Why?
Wordcamp Bratislava 2017 - Docker! Why?
 
Introduction to Domain Driven Design (Webtlak #7)
Introduction to Domain Driven Design (Webtlak #7)Introduction to Domain Driven Design (Webtlak #7)
Introduction to Domain Driven Design (Webtlak #7)
 
Introduction to Docker
Introduction to DockerIntroduction to Docker
Introduction to Docker
 
from docker run to docker compose (Webelement #36)
from docker run to docker compose (Webelement #36)from docker run to docker compose (Webelement #36)
from docker run to docker compose (Webelement #36)
 
Docker for local development
Docker for local developmentDocker for local development
Docker for local development
 
Improve your workflow
Improve your workflowImprove your workflow
Improve your workflow
 
Docker on OSX without pain
Docker on OSX without painDocker on OSX without pain
Docker on OSX without pain
 
Testing with Codeception (Webelement #30)
Testing with Codeception (Webelement #30)Testing with Codeception (Webelement #30)
Testing with Codeception (Webelement #30)
 
How to be a full stack developer
How to be a full stack developerHow to be a full stack developer
How to be a full stack developer
 
Independent components in Nette Framework
Independent components in Nette FrameworkIndependent components in Nette Framework
Independent components in Nette Framework
 
Nette framework (WebElement #28)
Nette framework (WebElement #28)Nette framework (WebElement #28)
Nette framework (WebElement #28)
 
Nette framework (WebElement #27 lightning talk)
Nette framework (WebElement #27 lightning talk)Nette framework (WebElement #27 lightning talk)
Nette framework (WebElement #27 lightning talk)
 
FEI 2013 - Nette framework
FEI 2013 - Nette frameworkFEI 2013 - Nette framework
FEI 2013 - Nette framework
 
Why PhpStorm?
Why PhpStorm?Why PhpStorm?
Why PhpStorm?
 
FEI - Nette framework
FEI - Nette frameworkFEI - Nette framework
FEI - Nette framework
 
DP1
DP1DP1
DP1
 

Recently uploaded

JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 

Recently uploaded (20)

JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 

One page app with AngularJS

  • 1. ONE PAGE APP WITH adam.stipak@gmail.com | @new_POPE
  • 2. WTF, WHICH TOOL I NEED ??? Backbone.js Ember.js Google Closure Spine jQuery (non FW) Este.js (Is it not dead? ;-)) ... No thanks, AngularJS is cool ;-)
  • 3. WHY ? Bootstrapping Module based Templates 2-way data binding (It's fucking good) Dependency Injection Routing Directives
  • 4. BOOTSTRAPPING Step 1: <citsc"i/saglrmnj"<srp> srp r=lbj/nua.i.s>/cit Step 2: <tln-p> hm gap Result: {12}i 3 {+} s I'm using this way (RequireJS) vrap=aglrmdl(ap,[*dp *]; a p nua.oue'p' / es /) aglrbosrpdcmn,[ap]; nua.otta(ouet 'p')
  • 5. MODULE BASED HTML <tln-p=mAp> hm gap"yp" JS vrmAp=aglrmdl(mAp,[) / N dp. a yp nua.oue'yp' ]; / o es / Cleto o U drcie. / olcin f I ietvs aglrmdl(uDrcie' [*.*]; nua.oue'iietvs, /../) vrmAp=aglrmdl(mAp,[uDrcie') a yp nua.oue'yp' 'iietvs];
  • 6. TEMPLATES <l u> <in-eet"tmi [wb,'lmn' '1'" l grpa=ie n 'e' eeet, #4]> {ie} {tm} <l> /i <dv /i> web element #14
  • 7. WITH CONTROLLERS JS mApcnrle(Tmltsotolr,fnto(soe { yp.otolr'epaeCnrle' ucin$cp) $cp.tm =[wb,'lmn' '1'; soeies 'e' eeet, #4] }; ) Template <i n-otolr"epaeCnrle" dv gcnrle=Tmltsotolr> <pnn-eet"tmi ies> sa grpa=ie n tm" {ie}<ml>{idx}/ml> {tm}sal{$ne}<sal <sa> /pn <dv /i> Result web 0 element 1 #14 2
  • 8. ASYNC TEMPLATES <i n-iw <- Ol oeo tepg -> dv gve> !- ny n n h ae - But, you can use this <i n-nld=tmltsfohm" dv gicue"epae/o.tl> with nested levels ;-) AngularJS loads the templates asynchronously.
  • 9. 2-WAY DATA BINDING Controller $cp.nu ="; soeipt " $cp.laIpt=fnto( { soecernu ucin) $cp.nu ="; soeipt " }; Template <nu n-oe=ipt> ipt gmdl"nu" <nu n-lc=cernu("tp=bto"vle"la!> ipt gcik"laIpt) ye"utn au=Cer" Result Clear! $scope.input = ""
  • 10. HOW IT WORKS? ONE WAY DATA BINGING
  • 11. HOW IT WORKS? TWO IS MORE THAN ONE, BRO
  • 12. HOW IT WORKS? SCOPES
  • 13. DEPENDENCY INJECTION Dependecny injector is better than Chuck N. mApsrie'yevc' fnto( {*.*}; yp.evc(mSrie, ucin) /../) mApcnrle(SmIesotolr,fnto(yevc){ yp.otolr'oetmCnrle' ucinmSrie / mSriewsatmtclyijce / yevc a uoaial netd mSriegt'oept'.ucs(ucindt){ yevc.e(sm/ah)scesfnto(aa $cp.tm =dt.tm; soeies aaies }; ) }; )
  • 15. ROUTING $routeProvider mApcni('ruervdr,fnto(r){ yp.ofg[$otPoie' ucin$p $p r .hn'fo,{ we(/o' tmltUl 'p/o.tl, epaer: tlfohm' cnrle:Footolr otolr oCnrle }) .tews(rdrcT:'br}; ohrie{eieto /a') }) ];
  • 16. DIRECTIVES It's all about directives. mApdrcie'ldr,fnto( { yp.ietv(sie' ucin) rtr { eun ln:fnto(cp,eeet ats { ik ucinsoe lmn, tr) $eeet.ldr) (lmn)sie(; } } }; ) Value of slider: 5
  • 17. and so much more on angularjs.org Thanks for coming @new_POPE | newpope.org