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