Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
542 lines (350 sloc) 9.53 KB
<!doctype html>
<html lang="en" xmlns:ng="http://angularjs.org/">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AngularJS Intro</title>
<script src="../jquery-1.4.2.min.js"></script>
<script src="../angular-0.9.17.js" ng:autobind></script>
<script src="../syntaxhighlighter/shCore.js"></script>
<script src="../syntaxhighlighter/shBrushJScript.js"></script>
<script src="../syntaxhighlighter/shBrushXml.js"></script>
<link rel="stylesheet" href="../syntaxhighlighter/shCore.css" type="text/css"/>
<link rel="stylesheet" href="../syntaxhighlighter/shThemeDefault.css" type="text/css"/>
<script src="../slide.js"></script>
</head>
<body>
<slide>
<h1>AngularJS</h1>
<h2>HTML &amp; JavaScript
for web-apps
rather than documents</h2>
<p>Igor Minar</p>
</slide>
<!-- **** -->
<slide title="What is AngularJS?">
<ul>
<li>JavaScript Magic for building Web Apps</li>
<li>Pure JavaScript</li>
<li>Open Source (@github, MIT)</li>
<li>Google Funded</li>
</ul>
</slide>
<!-- **** -->
<slide title="The Problem">
<p class="center">
Why is web development hard?
</p>
</slide>
<!-- **** -->
<slide>
<h2>A bit of history...</h2>
</slide>
<!-- **** -->
<slide title="1989: HTML">
<center><img src="img/History_HTML.png" width="770" height="82"></center>
<p class="center">
Markup language for scientific documents
shared over the net.
</p>
</slide>
<!-- **** -->
<slide title="1995: JavaScript">
<center><img src="img/History_JS.png"></center>
<p class="center">
Scripting language
for HTML documents.
</p>
</slide>
<!-- **** -->
<slide title="2005: AJAX / Web 2.0">
<center><img src="img/History_AJAX.png"></center>
<center><img src="img/gmail-logo.jpg" height="150"><img src="img/google-map-logo.gif" height="150"></center>
<p class="center">
Amazing apps,
despite the primitive building blocks.
</p>
</slide>
<!-- **** -->
<slide title="It's 2011, what's different?">
<center><img src="img/History_today.png"></center>
<p class="center">
HTML and JavaScript have improved,
but the level of abstraction is same as in 1989.
</p>
</slide>
<!-- **** -->
<slide title="But what about ...?">
<center><img src="img/AlphabetSoup.png" width="750px"></center>
</slide>
<!-- **** -->
<slide>
<h2>Let's look at some examples...</h2>
</slide>
<!-- **** -->
<slide title="Hello HTML!" class="no-logo">
<pre class="code">
<p>Hello World!</p>
</pre>
</slide>
<!-- **** -->
<slide title="Hello JavaScript!" class="no-logo">
<pre class="code">
<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===
</pre>
</slide>
<!-- **** -->
<slide title="Hello jQuery!" class="no-logo">
<pre class="code">
<p id="greeting2"></p>
===script===
$(function(){
$('#greeting2').text('Hello World!');
});
===/script===
</pre>
</slide>
<!-- **** -->
<slide title="Hello AngularJS!" class="no-logo">
<pre class="code">
<p ng:init="greeting = 'Hello World!'">{{greeting}}</p>
</pre>
</slide>
<!-- **** -->
<slide title="Hello AngularJS MVC!" class="no-logo">
<pre class="code">
<p ng:controller="GreetingCtrl">{{greeting}}</p>
===script===
function GreetingCtrl(){
this.greeting = 'Hello World!';
}
===/script===
</pre>
</slide>
<!-- **** -->
<slide title="Hello jQuery form!" class="no-logo">
<pre class="code">
<input id="name3" value="John">
<p id="greeting3"></p>
===script===
$(function(){
var name = $('#name3');
var greeting = $('#greeting3');
function update(){
greeting.text('Hello ' + name.val() + '!');
}
update();
name.bind('keydown', function(){
setTimeout(update, 0);
});
});
===/script===
</pre>
</slide>
<!-- **** -->
<slide title="Hello AngularJS form!" class="no-logo">
<pre class="code">
<input name="firstName" value="John">
<p>Hello {{firstName}}!</p>
</pre>
</slide>
<!-- **** -->
<slide title="Hello jQuery form w/ dropdown!" class="no-logo">
<pre class="code">
<select id="salutation4">
<option>Hello</option>
<option>Greetings</option>
<option>Salut</option>
<option>Ahoj</option>
<option>Bonjour</option>
</select>
<input id="name4" value="John">
<p id="greeting4"></p>
===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===
</pre>
</slide>
<!-- **** -->
<slide title="Hello AngularJS form w/ dropdown!" class="no-logo">
<pre class="code">
<select name="salutation">
<option>Hello</option>
<option>Greetings</option>
<option>Salut</option>
<option>Ahoj</option>
<option>Bonjour</option>
</select>
<input name="name" value="John">
<p>{{salutation}} {{name}}!</p>
</pre>
</slide>
<!-- **** -->
<slide title="jQuery vs AngularJS">
<pre><h1>
So you are
saying that
jQuery sucks?!?
</h1></pre>
</slide>
<!-- **** -->
<slide title="jQuery vs AngularJS">
<pre><h2>
NO! NO! NO!
We <tt style="color: red; font-size: 1.5em;">&lt;3</tt> jQuery!
(for DOM manipulation)
</h2></pre>
</slide>
<!-- **** -->
<slide>
<h2>
Building webapps
is a lot more than
DOM manipulation!
</h2>
</slide>
<!-- **** -->
<slide title="AngularJS vs jQuery">
<h2 class="center">
AngularJS increases the
level of abstraction.
</h2>
<h2 class="center">
jQuery "just" allows you type less.
</h2>
</slide>
<!-- **** -->
<slide title="Hello XHR!" class="no-logo">
<pre class="code">
<div ng:controller="GreeterCtrl">
<input name="greetingName">
<button ng:click="greet()">greet</button>
<p>{{greeting}}</p>
</div>
===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===
</pre>
</slide>
<!-- **** -->
<slide title="Testing">
<p class="center">
Documents don't need to be tested,
web-apps <strong>do</strong>!
</p>
</slide>
<!-- **** -->
<slide title="Declarative DOM Manipulation">
<p>
AngularJS takes care of most DOM manipulation
</p>
</slide>
<!-- **** -->
<slide title="Separation of Concerns">
<p class="center">
Strict separation between
application logic
and
DOM manipulation
</p>
</slide>
<!-- **** -->
<slide title="Dependency Injection">
<p class="center">
Inversion of control
and
removal of global state
</p>
</slide>
<!-- **** -->
<slide title="Test Harness">
<p>
AngularJS has the following baked in:
&nbsp;&nbsp;&nbsp;&#x2713; unit / integration testing
&nbsp;&nbsp;&nbsp;&#x2713; end-to-end testing
</p>
</slide>
<!-- **** -->
<slide title="HTML & JS Future">
<ul>
<li>HTML & JS will be around for a few more years</li>
<li>HTML5 and ES5+ address low level issues and improvements</li>
<li>w3c is not addressing high level issues related to web-development</li>
</ul>
</slide>
<!-- **** -->
<slide title="AngularJS Summary">
<ul>
<li>Increase the level of abstraction</li>
<li>Helps to make your app testable</li>
<li>HTML / JS / Browser & Developer friendly</li>
</ul>
</slide>
<!-- **** -->
<slide title="Implementation">
<ul>
<li>Pure JavaScript</li>
<li>Pure Client-Side</li>
<li>Two Components:<ul><li>HTML Compiler</li><li>JavaScript Framework</li></ul></li>
<li>Tiny! (25kB)</li>
</ul>
</slide>
<!-- **** -->
<slide title="We are not done yet">
<p>
<strong>Warning</strong>:
We have yet to reach v1.0.
All APIs subject to change.
Documentation improving fast.
</p>
</slide>
<!-- **** -->
<slide title="Thank You!">
<h2 class="center">
AngularJS
@angularjs
<a href="http://angularjs.org">http://angularjs.org</a>
</h2>
</slide>
</body>
</html>
You can’t perform that action at this time.