say yo to angularJS

http://goo.gl/lXk4g

Who Am i ?

i am zack yang

PIXNET 程式設計工程師

前言

user wants good user experience

Complex application

複雜的邏輯

developer work overtime

team work overtime

current state

User: : )

Developer: :-(

Developer needs to improve the workflow!

在遇到 angularjs 之前

HTML + CSS + $('') + 兜兜哲學 = ?

jQuery rules the world

imperative code using jQuery

                        
$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  console.log( "Data Saved: " + msg );
  // put anything yout want to do.
});

完勝

有必要用 Framework 嗎?

但是...

有時候案子不是那麼單純

write once & dom everywhere

write once & 洞 everywhere

Framework Benifits

Organization

Reusable code

Testing

再加上...

要潮

所以先來玩玩 angularjs 吧

起手式

Dynamic Hello world

The old way

Dynamic Hello world

                        
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(window, 'load', function() {
    var greeting = doucment.getElementById('greeting');
    if (isIE) {
        greeting.innerText = 'Hello World!';
    } else {
        greeting.textContent = 'Hello World!';
    }
});

HTML

ng-app ? ng-model ?

未來的 HTML ?

阿 js 勒?

這不科學

how it works

explain hello world

還是不清楚

做就對了

angular feature

HTML extension
Dependency injection
Two way data-binding
Separation of concerns
and more...

HTML Extension

declaritive ui design

<foo-element></foo-element>

dependency injection

                        
    var app = angualr.module('diDemo');
    app.controller('MainCtrl', function($scope) {
        // $scope object is from DI
    });

Follow convention

The reason: minification tool breaks the code.

                        
    var app = angualr.module('diDemo');
    app.controller('MainCtrl', ['$scope', function($scope) {
        // $scope object is from DI
    }]);