AngularJS-WebDesign-130415x - Goal Designs

yrekazzyzxamuckInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

160 εμφανίσεις

Richard Johnson Goal Designs Inc.

Minnesota Web Design
Meetup



April 15, 2013

Slides available:
http://goaldesigns.com/presentations
-
2013

rjohnson@goaldesigns.com


Web designed for documents


Server creates pages / browser displays


Data input sent to and processed by the server


Updated pages created on the server and resent

<!
doctype

html>

<html>

<head>

</head>

<body>


<form method="post" action="
hello.php
">


<label>Name:</label>


<input type="text" id="
yourName
”>


<input type="submit" value="Say Hello" />


<
hr
>

<?
php


echo "<h1>Hello ".$HTTP_POST_VARS["
yourName
"]."!</h1>";

?>


</form>

</body>

</html>


Interactive client
-
side web


Collect input from user


Update display


Communicate with server


Client
-
side processing enabled by


JavaScript


DOM manipulation


HTTP server messaging

<!
doctype

html>

<html>

<head>


<script
src
="http://
code.jquery.com
/jquery
-
1.9.1.min.js"></script>


<script type="text/
javascript
">


$(function() {


$("#
yourName
").
keyup
(function () {


$("#
helloName
").text("Hello " +
this.value

+ "!");


});


});


</script>

</head>

<body>


<div>


<label>Name:</label>


<input type="text" id="
yourName
">


<
hr
>


<h1 id="
helloName
"></h1>


</div>

</body>

</html>


Simplifies event binding and DOM
manipulation


Common API across multiple browsers


Supports plug
-
in modules to extend
functionality


Requires writing JavaScript code to wire


Follow good programming practices


Separate: data / display / processing


Simplify connecting data to display


Let us focus on the technologies of the web


HTML


CSS


JavaScript

<!
doctype

html>

<html
ng
-
app>

<head>


<script
src
="https://
ajax.googleapis.com
/
ajax
/
libs/



angularjs
/1.0.6/
angular.min.js
"></script>

</head>

<body>


<div>


<label>Name:</label>


<input type="text"
ng
-
model="
yourName
">


<
hr
>


<h1>Hello {{
yourName
}}!</h1>


</div>

</body>

</html>


Compare
jQuery

imperative wiring






to
AngularJS

declarative relationships

<input type="text"
ng
-
model="
yourName
">

<h1>Hello {{
yourName
}}!</h1>


<input type="text" id="
yourName
">

<h1 id="
helloName
"></h1
>

<script type="text/
javascript
”>


$(function() {


$("#
yourName
").
keyup
(function () {


$("#
helloName
").text("Hello " +
this.value

+ "!");


});


});

</script>


jQuery

abstracts browser functionality


e.g. DOM traversal, event binding


AngularJS

abstracts relationships
(and more)



Note:
AngularJS
, and all web apps, are built
on browser functionality


HTML is a declarative document language


Browser translates HTML into a Document
Object Model (DOM)


DOM is the browser’s in
-
memory document
representation


JavaScript can manipulate the DOM


Browsers send a document (i.e. DOM) ready
event


AngularJS

can intercede and rewrite the
DOM


The rewrite is driven by markup in the DOM


Software
architectural pattern


Separates display
from
data


Originated with Smalltalk programmers


From
work at Xerox PARC
in the late 70’s



Models
represent
knowledge


Views provide a (visual) representation of attached
model
data


Controllers connect to and control views and
models


Different variations of the pattern


Model
-
View
-
ViewModel

(MVVM)


Model
-
View
-
Presenter (MVP)


Variations differ on…


… connectivity


… cardinality


… directionality

“MVC
vs

MVVM
vs

MVP
. What a controversial topic that many developers
can spend hours and hours debating and arguing about.


For several years

AngularJS

was
closer to MVC

(or rather one of its client
-
side variants), but over time and thanks to many
refactorings

and
api

improvements, it's

now closer to MVVM



the $scope object could be
considered the
ViewModel

that is being decorated by a function that we call
a Controller.



I hereby declare
AngularJS

to be MVW framework
-

Model
-
View
-
Whatever
.

…”



Igor
Minar



Google
AngularJS

Development Team



Backbone.js


Ember.js


Knockout


Others



Summary from
2012 Throne of JS conference


Library (Backbone
and
Knockout)


passive functionality


invoked by the application


Framework (Ember)


provides application architecture


handles common requirements


invokes application code



AngularJS

is closer to a framework


*I ported my Backbone application to angular. The Code
size went down from 5k lines of code to guess what? 750
lines. Not just that.. The code is much cleaner.. Earlier,
there was a huge technical debt attached to this
implementation in backbone.. Each time I had to sit with
it. It took me quite a while to understand all the hooks and
how the individual models and classes and views
interacted together.. ..Now its a breeze.. *



http://
stackoverflow.com
/a/10264263


Working with AJAX in
mid
-
2011


XML for data


XSLT to map XML data to HTML



Considered changing to JSON


Found a link to
AngularJS

(alpha)


AngularJS

website:
angularjs.org



Examples are live


Phonecat

tutorial is worthwhile


My “
goto
” sources:


Developer guide


API reference


Load
AngularJS


<
script
src
="https://
ajax.googleapis.com
/
ajax
/libs
/



angularjs
/1.0.6
/
angular.min.js
"></script>


Bootstrap



<
html
ng
-
app>


Declare relationships


ng
-
model="
yourName



{
{
yourName
}}


One created with each controller


Prototypically inherits from parent


AngularJS

has a root scope


Can create isolated scopes (e.g. in directive)


Automatic
propagation of
data changes


Model is single
source of truth


Digest cycle


Contains the
code behind
the view


Try to keep
lightweight


Added to a
WordPress

site


Custom theme


Page templates with
shortcodes


Built summer 2012 (just as
AngularJS

1.0
shipped)


Created
order form
and
product location
pages


Note


it’s a live site (and good wine

)


Too much code in the controller
-

modularize


Provides declarative form validation


Input fields declared as: required, email


Form has flags for: $valid, $dirty


Usable as a standalone validation library


Directives enhance HTML


Custom element name or attribute
(also class
and comment)


AngularJS

provides over 50


form


element directive


ng
-
repeat



attribute directive
(it’s amazing!)


Declarative way to


format
displayed data


filter
and
sort
data arrays


Software architectural components


Services provide data and compute


Exist across views


Depend on other services


AngularJS

has 20+


$http


service to communicate with servers


$http service


Input
config

object


Returns promise


Communication is asynchronous

$
http({method:
‘GET’,
url
:
fetchUrl
}
)

.
success(function(data, status) {


// process the data here

}
)

.
error(function(data, status) {


// error handling

}
);


Promises
represent result of an action


Particularly used with asynchronous actions


They are either resolved or rejected


DI is a software architectural pattern


Separation of concerns


Service creation independent from usage


Good for


Modular code


Allows
AngularJS

to wire in correct order


Supports substitution (for patching and testing)


Services identified by parameter name


Minification

obfuscates the name


Pass names as strings in array

angular.module
('
GoaleryServices
')


.factory('
StatusManager
',


[ '
CloudLogin
', '$q',


function (
cloudLogin
, $q) {





Prototype
-
based scripting language


Dynamic, weakly typed, first
-
class functions



Great JavaScript book:


Crockford

(2008) JavaScript: The Good Parts


O’Reilly


JavaScript doesn’t have a compiler


Must execute code to test


Testability was a fundamental objective of
AngularJS


Miško

Hevery

(
AngularJS

creator)


Previously created
JsTestDriver


Unit testing

support


JsTestDriver


Jasmine


DI allows substituting mocks for hard to test code


Server communication


Logging


Angular Scenario Runner


E2E testing


Simulates user
interations


Single web page


Loads the base HTML and included sources once


App changes views dynamically


Server is called upon when needed


Prefer using asynchronous server calls


Data changes


Fetch more data


Declarative view specification


HTML augmented with:


Directives, Markup, Filter, Form Controls


Loaded either


with a simple single web page


dynamically into a
view

as partials


Define the mapping from URL to view


Can also bind controller


Define URL parameters

$
routeProvider.when
('/Book/:
bookId
', {


templateUrl
: '
book.html
',


controller:
BookCntl


});


$
routeProvider.when
('/Book/:
bookId
/
ch
/:
chapterId
', {


templateUrl
: '
chapter.html
',


controller:
ChapterCntl


});


AngularJS

navigation updates the browser
address bar


Uses the HTML5 history API


fallback to
hash
-
bang (#!) URL


Users can link to pages in you app


Server must recognize the link pattern and
serve the application


Directives
package reusable HTML


Naming nuance: “
myDir
” becomes “my
-
dir



Conceptual compile and link phases


Can specify: scope, binding, restrictions,
etc


Supports
transclusion


Consider creating a custom DSL


Packaging of JavaScript code


Modules
declare dependencies


AngularJS

instantiates in correct order


Provides separation of namespaces




Open source


MIT License


Built by Google and community


1.0 released June 2012


1.0.6 current (April 2013)


http://
angularjs.org
/


AngularJS

1.0.X are considered stable production
releases


Contains bug fixes and documentation updates


AngularJS

1.1.X is unstable development


Next stable feature release will be 1.2.X


Available on the Google CDN


https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/
angul
ar.js


Both full source and minified (
angular.min.js
)


AngularJS

includes a
jQuery

“lite”


Provides the minimal features directly used


Including
jQuery

will be used instead



Note


jQuery

must be included before
AngularJS


Chrome


Internet Explorer 9+ (others see next slide)


Firefox


Safari


Opera


mobile browsers (Android, Chrome Mobile,
iOS

Safari)


IE 8 is officially supported and tested


Declare custom element tags


Routing uses #! mode (IE9 also has no HTML 5 history)


A few other XML namespace declarations


See
http://docs.angularjs.org/guide/ie


IE 6 & 7 support is possible “in theory”


Google doesn’t test these versions


< 1% of U.S. browsers (March 2013)


Chrome debugger plugin


Jasmine testing framework plugin


AngularJS

UI


https://github.com/angular
-
ui


Compilation of several projects


AngularJS

UI


calendar, date, map, if


UI Bootstrap


Twitter bootstrap components


ng
-
grid


data grid


UI
-
Router


enhanced routing with UI states


AngularStrap

-

http://mgcrea.github.io/angular
-
strap/


Blog



official
announcments


Forums



support


JSFiddle Examples


Cheat Sheet


AngularJS

(April 29, 2013)



Green &
Seshadri



O’Reilly



AngularJS

in Action (Fall 2013)



Ford &
Ruebbelke


Manning


Coding in Angular


http://www.egghead.io/



Front
-
end Masters


AngularJS

&Testability


Misko

Hevery


Javascript

the Good Parts


Douglas
Crockford


A
nimation support


M
ore flexible (and faster)
ngRepeat

directive


P
owerful promise
-
based http request
interceptors


D
ynamically generated directive templates


I
nitial batch of mobile/touch support


“What a web browser would have been had it
been designed for web applications”


-

Miško

Hevery



Upcoming
AngularJS

presentation


Google Developer Group


Twin Cities


May 1, 2013 at
CoCo