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 :-(

```
<p>Hello world</p>
```
```
<p>{{Greeting}}</p>
```

Data Binding

Define a model
Binds it to a template
When you modify the model, templates updates automotically
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>

Name:

Hello

Concrete example: jQuery vs AngularJS


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

Name:

Hello {{yourName}}!

So Data Binding allows code that is

very simple
very recognizable
looks like the original HTML hello world

Thanks to...

Dirty checking
Only checks the current view
Only check when change may happen
Leverage the JIT
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>

<color-picker>

<unleash-your-imagination>

reusable components coming to a browser near you

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

Mozilla shim for web components: x-tags.org
W3C specs: http://www.w3.org/TR/2012/WD-components-intro-20120522/#custom-element-section

The whole package

to build kick ass web apps!

✓ Data binding
✓ Templating
✓ Routing and deep linking
✓ Dependency injection
✓ MVW (Model/View/Whatever!)

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.