Igor Minar
Why is web development hard?
Markup language for scientific documents shared over the net.
Scripting language for HTML documents.
Amazing apps, despite the primitive building blocks.
HTML and JavaScript have improved, but the level of abstraction is same as in 1989.
Hello World!
===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===
===script=== $(function(){ $('#greeting2').text('Hello World!'); }); ===/script===
{{greeting}}
{{greeting}}
===script=== function GreetingCtrl(){ this.greeting = 'Hello World!'; } ===/script===
===script=== $(function(){ var name = $('#name3'); var greeting = $('#greeting3'); function update(){ greeting.text('Hello ' + name.val() + '!'); } update(); name.bind('keydown', function(){ setTimeout(update, 0); }); }); ===/script===
Hello {{firstName}}!
===script=== $(function(){ var salutation = $('#salutation4'); var name = $('#name4'); var greeting = $('#greeting4'); function update(){ greeting.text( salutation.val() + ' ' + name.val() + '!'); } update(); name.bind('keydown', function(){ setTimeout(update, 0); }); salutation.bind('change', update); }); ===/script===
{{salutation}} {{name}}!
So you are saying that jQuery sucks?!?
NO! NO! NO! We <3 jQuery! (for DOM manipulation)
===script=== function GreeterCtrl($xhr){ var self = this; this.greetingName = 'World'; this.greet = function() { var url = 'http://angularjs.org/greet.php'; url += '?callback=JSON_CALLBACK'; url += '&name=' + this.greetingName; $xhr('JSON', url, function(code, response){ self.greeting = response.greeting; }); } } ===/script==={{greeting}}
Documents don't need to be tested, web-apps do!
AngularJS takes care of most DOM manipulation
Strict separation between application logic and DOM manipulation
Inversion of control and removal of global state
AngularJS has the following baked in: ✓ unit / integration testing ✓ end-to-end testing
Warning: We have yet to reach v1.0. All APIs subject to change. Documentation improving fast.