A 2.5 hour workshop at SXSW 2014 to teach Angular.js. Code and examples from the workshop can be found here: http://bit.ly/angularsx

1. Building Better Web Apps
with Angular.js

2. @KatrinaBekessy Director, Technology & Design!
@IanMacDowell Sr. Open Standards Developer!
!
#angularsx

3. http://bit.ly/angularsx

4. The Plan
Angular: What’s the Deal? [20 min.]!
Core Components of Angular [30 min.]!
Let’s build something! [60 min.]!
Make it real time [15 min.]!
Wrap up [10 min.]!

5. How might you build a Mad Libs app?

6. Angular: what’s the deal?

7. Web Apps Have Evolved
The web can
do stuff.
“Web 2.0!”
A viable
non-native option.
An elegant
non-native option.

8. Advanced front-end framework for building modern web applications!
!
Created in 2009 by Google developers to solve their own problem!
!
It’s smart. Truly leverages JavaScript’s prototypical nature to take care of things
so your own code won’t have to.!

9. The MEAN Stack
MongoDB, Express.js, Angular.js, Node.js!

10. SPAs (Single Page Applications)
Need some “magic” to make them work without a bunch of spaghetti code!

11. Dynamic Data
Updating views every time data updates get clunky!

12. Utility Apps
Managing states and frequent user input is hard with so much event handling!

14.
“As I mentioned, we ended up using Knockout because,
for our project, focusing on view binding was more
important. We also ended up using RequireJS for
modularization, crossroads and Hasher to handle routing
and history, Jasmine for testing, as well as JQuery,
Twitter Bootstrap, and Underscore.js (and probably more
libraries I'm forgetting at the moment).”

15.
“As I mentioned, we ended up using Knockout because,
for our project, focusing on view binding was more
important. We also ended up using RequireJS for
modularization, crossroads and Hasher to handle routing
and history, Jasmine for testing, as well as JQuery,
Twitter Bootstrap, and Underscore.js (and probably more
libraries I'm forgetting at the moment).”

16.
“As I mentioned, we ended up using Knockout because,
for our project, focusing on view binding was more
important. We also ended up using RequireJS for
modularization, crossroads and Hasher to handle routing
and history, Jasmine for testing, as well as JQuery,
Twitter Bootstrap, and Underscore.js (and probably more
libraries I'm forgetting at the moment).”

17.
“As I mentioned, we ended up using Knockout because,
for our project, focusing on view binding was more
important. We also ended up using RequireJS for
modularization, crossroads and Hasher to handle routing
and history, Jasmine for testing, as well as JQuery,
Twitter Bootstrap, and Underscore.js (and probably more
libraries I'm forgetting at the moment).”

18.
“As I mentioned, we ended up using Knockout because,
for our project, focusing on view binding was more
important. We also ended up using RequireJS for
modularization, crossroads and Hasher to handle routing
and history, Jasmine for testing, as well as JQuery,
Twitter Bootstrap, and Underscore.js (and probably more
libraries I'm forgetting at the moment).”

19.
“As I mentioned, we ended up using Knockout because,
for our project, focusing on view binding was more
important. We also ended up using RequireJS for
modularization, crossroads and Hasher to handle routing
and history, Jasmine for testing, as well as JQuery,
Twitter Bootstrap, and Underscore.js (and probably more
libraries I'm forgetting at the moment).”

20.
“As I mentioned, we ended up using Knockout because,
for our project, focusing on view binding was more
important. We also ended up using RequireJS for
modularization, crossroads and Hasher to handle routing
and history, Jasmine for testing, as well as JQuery,
Twitter Bootstrap, and Underscore.js (and probably more
libraries I'm forgetting at the moment).”

21.
“As I mentioned, we ended up using Knockout because,
for our project, focusing on view binding was more
important. We also ended up using RequireJS for
modularization, crossroads and Hasher to handle routing
and history, Jasmine for testing, as well as JQuery,
Twitter Bootstrap, and Underscore.js (and probably more
libraries I'm forgetting at the moment).”

22. Maintainability!

23. Angular’s Approach
The Views call the shots. Angular gives HTML the power to drive the app.!
!
Declarative programming (focus on the what, not the how)!
!
Enforce modularity and separation of concerns, but make it easy for all the parts
to work together.!
!
Emphasis on testing, and making testing easy!

24. HTML on Steroids
Angular extends the capabilities of HTML, by sprinkling new attributes throughout
the DOM.!
!
For example:!
!
!
<body
ng-­‐app=“myApp”>
<div
ng-­‐controller=“myController”>
<button
ng-­‐click=“doSomething()”>Click
me!</button>
</div>
</body>

25. OK, but how?

26. With great power…
http://www.bennadel.com/resources/uploads/2013/feelings_about_angularjs_over_time.png!

27. Magic Trick #1:
Two-Way Data Binding
View!
Merge
Once!
Template! Model!
View!
Template!
Model!
Constant
Updates!
One-Way Data Binding! Two-Way Data Binding!

28. Magic Trick #2:
The Angular $scope
• The glue that holds it all together!
• Maintains states and keeps things contained throughout the DOM!
• Enables the View to function as the Model!
!
!
In our controller:
$scope.myData
=
‘someValue’;
In our view:
<input
type=“text”
ng-­‐model=“myData”
/>
<p>{{myData}}</p>

29. The magic $scope
Source: http://devgirl.org/wp-content/uploads/2013/03/concepts-controller.png!

30. Scopes can be nested
• Apps have exactly one $rootScope to rule them all.!
• Views can have multiple children scopes. They can be nested and tend to
follow the nesting of DOM elements.!
!
! <body
ng-­‐app=“myAppName”>
<div
ng-­‐controller=“myController”>
<ul>
<li
ng-­‐repeat=“item
in
items”>
<li
ng-­‐repeat=“item
in
items”>
<li
ng-­‐repeat=“item
in
items”>
$scope!
$scope.items= […]!
$scope.item=‘item1’!
$scope.item=‘item2’!
$scope.item=‘item3’!

31. Magic Trick #3:
Dependency Injection
• State what you need, not how you need to get it.!
• Makes objects and modules easily interchangeable!
!
!
var
app
=
angular.module(‘myAppName’,
[‘dependency1’,
‘dependency2’,
…]);

32. Key Components of Angular

33. Main Concepts
Views and Routes: getting your app to load!
!
Directives and Filters: sprinkling the DOM with special sauce!
!
Angular Modules: giving the Views what they need!
!
Angular’s Cycles: the “engine” that keeps it all running!
!
!

34. Views and Routes

35. It starts with Views
• Angular extends HTML by providing new functionality with special DOM
elements, attributes, and classes!
• View dictates the Model!
• Partial Views can be loaded in as needed and inherit the current $scope
In our index.html:!
<body
ng-­‐app=“myAppName”>
<div
ng-­‐view></div>
</body>

36. Routes
• Angular ships with a built-in $routeProvider!
• Supports apps by getting necessary files to assemble the layout based on URL!
!
var
app
=
angular.module(‘myAppName’,
[‘ngRoute’]);
app.config([‘$routeProvider’,
function($routeProvider)
{
$routeProvider
.when(‘/foo’,
{
templateUrl:
‘views/foo.html’,
controller:
‘fooController’
})
.when(‘/bar’,
{
templateUrl:
‘views/bar.html’,
controller:
‘barController’
})
}]);

37. Directives and Filters

38. Directives
• Directives are the markers in the DOM that allow the view to tell the controllers
what they need (usually using the ‘ng’ prefix)!
• Handle behaviors and transformations of the DOM and connect the DOM to
Angular’s capabilities.!
• Transform elements, attach events, and bind the Scope.!
• Easy to write custom Directives to manage behavior specific for your app.!
!

39. a!
form!
input!
input[checkbox]!
input[email]!
input[number]!
input[radio]!
input[text]!
input[url]!
ngAnimate!
ngApp!
ngBind!
ngBindHtml!
ngBindTemplate!
ngBlur!
ngChange!
ngChecked!
ngClass!
ngClassEven!
ngClassOdd!
ngClick!
!
ngCloak!
ngController!
ngCopy!
ngCsp!
ngCut!
ngDblclick!
ngDisabled!
ngFocus!
ngForm!
ngHide!
ngHref!
ngInclude!
ngInit!
ngKeydown!
ngKeypress!
ngKeyup!
ngList!
ngModel!
ngMousedown!
ngMouseenter!
ngMouseleave!
!
ngMousemove!
ngMouseover!
ngMouseup!
ngNonBindable!
ngOpen!
ngPaste!
ngPluralize!
ngReadonly!
ngRepeat!
ngSelected!
ngShow!
ngSrc!
ngSrcset!
ngStyle!
ngSubmit!
ngSwitch!
ngTransclude!
ngValue!
script!
select!
textarea!

40. Filters
• Help with special formatting!
• Can be used in Views, Controllers, and Services!
• Easy to build custom filters!
In the Controller:!
$scope.amount
=
4321.99;
$scope.name
=
‘bobby’;
In
the
View:
<span>{{amount
|
currency}}</span>
//
$4,321.99
<span>{{name
|
uppercase}}</span>
//
BOBBY

41. Angular Modules

42. Everything is a type of Module
MODULES
Config Factory Controllers Directives Filters
Routes Service
Provider
Values/
Constants

43. Main App Wrapper Module
• Creates a shell that we can chain other modules to!
• Typically declare the app in the <html> or <body> tags, but can put it
anywhere!
!
In our View:
<html
ng-­‐app=‘myAppName’>
In our JS
var
app
=
angular.module(‘myAppName’,
[‘dependency1’,‘dependency2’]);

44. Other Modules attach to the app
• Register all other modules as part of your main app!
• Order or where the modules are located doesn’t matter!
!
var
app
=
angular.module(‘myAppName’,
[‘ngRoute’,
‘myService’]);
Register a Factory Module:
app.factory(‘myService’,
function
()
{
return
something;
});
Register a Controller Module:!
app.controller(‘myController’,
[‘$scope’,
function
($scope)
{...}
]);

45. Angular’s Cycles

46. Angular’s HTML Compiler
• Enables new capabilities of the DOM!
• Runs in 2 phases:!
• Compile: traverse the DOM and note all the directives!
• Link: hook up the directives with a scope, produce a live view!

47. Digest Cycles
Angular runs its own digest cycles in
addition to the browser’s event loop!
!
2 main steps:!
• $watch observes changes to the
view and scope!
• $apply pushes changes that need
to be made!
!
http://docs.angularjs.org/img/guide/concepts-runtime.png!

48. Getting it all working is an art form.
http://nathanleclaire.com/images/smooth-angular-tips/js-learning-curves.jpeg!

49. Let’s build something!
!

50. Nerd Libs!
• Mad Libs game built as a SPA!
• Try it out: https://angularsxsw.firebaseapp.com!

51. Setup and Tooling
• Grab the code: http://bit.ly/angularsx!
• Install Batarang Chrome Extenstion!
• Make sure you have a local server ready (Node, Grunt, Mamp, etc.)!

52. How do I “think” in Angular?
• Start with your data and Models!
• Set up your Routes!
• Create your Services!
• Get Controllers for each View!
• Create Views (HTML templates)!
• Add directives and event handlers for behaviors!
!

53. Getting Real (Time)

55. Firebase is Cool
• Database as a Service!
• 3-Way data binding!
• Near real time updates!
• Built-in RESTful API!
• Firebase Forge!

57. Thank You.