Introducing AngularJS

Introducing AngularJS

Loc Nguyen● Java, Ruby, JavaScript, C#, PHP

● Sr Engineer at SignNow, full stack consultant

● AngularJS OC and Code for OC meetup

organizer

● @locn

● [email protected]

Agenda● The single page app● Live coding…

o Data bindingo Controllerso Serviceso Directives

● Examine an app….?

Not on Agenda● REST integration● Promises● Routing● Testing● Angular UI● Yeoman, Bower, Grunt, Gulp● Integrating non-Angular libraries● Performance gotchas* egghead.io

Thick client pains● Tight coupling to server technologies

● Model or DOM as the truth

● Promoting maintainability

○ Responding to change

○ Ease of testing

○ Organized codeOOP

}

History for hipsters● DHTML● Web 2.0● Rich Internet Applications● Ambitious web apps™

State of the MVC

The Trend of Things

(Rock) Stars

Double Jeopardy?

Web vs Desktop MVCModel2 MVC● Model notifies no one● Controller pulls

changes into view with each request

● Browser renders model state

MVC● Model notifies

observers● View observes

models● View reflect model

state

Data binding in Angular*● $scope

o application glueo source of truth, or a view modelo provides observers for state changes

Data binding example(Angularians plz ignore anti-patterns)

Data binding in Angular*● $watch list

// pseudo code, implicit watchers from example

$watchList = [$watch('scope.tweet'),$watch('scope.imageUrl')

]

Data binding in Angular*● $watch function, explicit watcher

$scope.$watch(function () {

return map.currentCity;}, function (center) {

// update OKCupid match list});

Explicit watcher example

Data binding in Angular*● $digest loop

o Loop through the $watch list and do a dirty check

o Keep track of new valueso Keep looping until no values have changedo Finally, repaint DOM

● $digest triggerso ng-events, ng built-in services, $scope.

$apply()

Dependency Injection● Reduce coupling● Improves testability● Promotes reusability

Dependency Injectionfunction travel(a, z) {

setOrigin(a);setDest(z);var route =

getRoute();

var car = new Car();car.go(route);

}

travel('Irvine', 'Orange')

Dependency Injection

function travel(a, z, transport) {

setOrigin(a);setDest(z);

var route = getRoute();transport.go(route);

}

travel(1985, 1955);

travel(1985, 1955, new TimeMachine());

Controllers● More glue between view and model● Manage data models● Created and destroyed with route/view

changes

Services● Singleton objects● Communication between controllers● Maintain state for lifetime of app

Controller & Service Example

DirectivesThe Awesome Sauce™ in AngularJS● Good on anything● Apply liberally● Carry extra

Directives● Built-in directives

○ ng-show, ng-click, ng-repeat

● Custom directives○ reusable widgets○ declarative programming○ wrap non Angular libraries

Directive Examples

Mobile web app example

meetup.com/angularjs-oc

meetup.com/CodeforOC