Angular Introduction



Angular Introduction

0 1


angular-introduction

slides for angular introduction presentation

On Github wrozka / angular-introduction

Angular Introduction

Paweł Pierzchała @zwrozka 3.09.2013 GDG Kraków

Workshop

Old browsers

Modern browsers

Static content

<p>Hello World!</p>

Dynamic content

window.addEventListener('load', function() {
  var greet = document.getElementById('greet');
  greet.textContent = 'Hello World';
});

jQuery

$(window).load(function() {
  $('#greet').text('Hello World');
});

AngularJS

<p>{{greeting}}</p>

Data binding

  • no dom inspection
  • model becomes the single source of truth

Changing the standards

  • model driven views
  • object observe

Boilerplate

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

Directives

  • DSL
  • single source of truth

Changing the standards

  • web components

More demos

The end!!!111