AngularJS

HTML enhanced for web apps

...and how to make it work with Rails!

- Patrick Aljord / @patcito

What is AngularJS trying to fix?

HTML is great for declarative code for static web page

<p>Hello world!</p>

Not so for dynamic pages:

<p id="greeting1"></p>
 <script>
    var isIE = document.attachEvent;
    var addListener = isIE
      ? function(e, t, fn) {
          e.attachEvent('on' + t, fn);}
      : function(e, t, fn) {
          e.addEventListener(t, fn, false);};
    addListener(document, 'load', function(){
      var greeting = document.getElementById('greeting1');
      if (isIE) {
        greeting.innerText = 'Hello World!';
      } else {
        greeting.textContent = 'Hello World!';
      }
    });
 </script>
          

But...

= Imperative :-(


    Declarative FTW!
  1. <p>Hello world</p>
  2. <p>{{Greeting}}</p>

Data Binding

  1. Define a model
  2. Binds it to a template
  3. When you modify the model, templates updates automotically
  4. When the user intereacts with the UI, templates knows how to sync the data with the model.

Concrete example: jQuery vs AngularJS


<script type="text/javascript">
  $(function () {
    var name = $('#name').val();
    var greeting = $('#greeting');

    name.keyup(function () {
      greeting.text('Hello '+ name + '!');
    })
  })
</script>
<div>
<label>Name:</label>
<input type="text" id="name">
<p id="greeting"></p>
</div>
        

Hello

Concrete example: jQuery vs AngularJS


      <div ng-app>
      <label>Name:</label>
      <input type="text" ng-model="yourName">
      <p>Hello {{yourNameStr}}!</p>
      </div>
          

Hello {{yourName}}!

So Data Binding allows code that is

  1. very simple
  2. very recognizable
  3. looks like the original HTML hello world

Thanks to...

  1. Dirty checking
  2. Only checks the current view
  3. Only check when change may happen
  4. Leverage the JIT
  5. But... the DOM is slow

data binding coming to a browser near you

Implementation When?
AngularJS Javascript Now
Model Driven Views Native Future
Object.observe Native Future

There's already an AngularJS branch using Object.observe!

But HTML can be verbose!

↤ Beatiful widgets: Cool

Tricking the browser: Not Cool ↧↧

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#section1">Section 1</a></li>
  <li><a href="#profile">Section 2</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane active" id="section1">Hi, I'm Section 1</div>
  <div class="tab-pane" id="section2">Hi, I'm Section 2</div>
</div>
 
<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>
            
Declarative reusable components: Cool ↧↧

<tabs>
  <pane title="Section 1">
    Hi, I'm Section 1
  </pane>
  <pane title="Section 2">
    Hi, I'm Section 2
  </pane>
</tabs>
 

<google-map>

<tabs>

<tweet>

<avatar>

<color-picker>

<invoice>

<unleash-your-imagination>

reusable components coming to a browser near you

Implementation When?
AngularJS DOM+JS (directives) Now
Web Components Native Near Future

The whole package

to build kick ass web apps!

Link to demo

presenting...

angularjs_scaffold


            $ gem install angularjs_scaffold
            $ rails g angularjs:install # adds angular.js and a dummy welcome JS controller
            $ rails g scaffold Post title:string body:string
            $ rails g angularjs:scaffold Posts # adds everything needed using AngularJS
            Enjoy! (still beta!)
            
              https://github.com/patcito/angularjs_scaffold
            
          

angularjs_scaffold

  • generate views in app/assets/templates/controller_name
  • generate appcache for you
  • generate AngularJS routes, controllers and models scaffold
  • takes care of CSRF using AngularJS
  • so you can modify everything to your pleasure
Thanks!

Patrick Aljord @patcito

Credits for the slides: Vojta Jína, Miško Hevery, Igor Minar.