building better web apps with angular.js (sxsw 2014)

Building Better Web Apps with Angular.js

@KatrinaBekessy Director, Technology & Design!

@IanMacDowell Sr. Open Standards Developer!!

#angularsx

http://bit.ly/angularsx

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.]!

How might you build a Mad Libs app?

Angular: what’s the deal?

Web Apps Have Evolved

The web can do stuff.

“Web 2.0!” A viable non-native option.

An elegant non-native option.

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.!

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

SPAs(Single Page Applications)

Need some “magic” to make them work without a bunch of spaghetti code!

Dynamic Data Updating views every time data updates get clunky!

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

“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).”

“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).”

“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).”

“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).”

“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).”

“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).”

“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).”

“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).”

Maintainability!

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!

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>  

OK, but how?

With great power…

http://www.bennadel.com/resources/uploads/2013/feelings_about_angularjs_over_time.png!

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!

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>  

The magic $scope

Source: http://devgirl.org/wp-content/uploads/2013/03/concepts-controller.png!

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’!

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’,  …]);  

Key Components of Angular

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!!!

Views and Routes

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>  

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’              })  }]);  

Directives and Filters

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.!!

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!

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      

Angular Modules

Everything is a type of Module

MODULES

Config Factory Controllers Directives Filters

Routes Service

Provider

Values/Constants

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’]);          

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)  {...}          ]);  

Angular’s Cycles

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!

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!

Getting it all working is an art form.

http://nathanleclaire.com/images/smooth-angular-tips/js-learning-curves.jpeg!

Let’s build something! !

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

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.)!

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!!

Getting Real (Time)

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

Thank You.