Building Better Web Apps with Angular.js (SXSW 2014)

44 %
56 %
Information about Building Better Web Apps with Angular.js (SXSW 2014)
Technology

Published on March 11, 2014

Author: kbekessy

Source: slideshare.net

Description

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

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.

Add a comment

Related presentations

Related pages

Schedule | sxsw.com

Building Better Web Apps with Angular.js. ... sxsw.com/schedule/IAP20591. The best web apps ... your own app up and running. Since Angular.js has ...
Read more

SXSW: Building Better Web Apps with Angular.js | News | R ...

SXSW: Building Better Web Apps with Angular.js. Speaker. Ian MacDowell ... 2014 12:00 AM. Location. Austin, TX. Link to the Event . Save Page. Share ...
Read more

SXSW PanelPicker - South by Southwest

Building Better Web Apps with Angular.js. The best web apps handle dynamic ... SXSW Interactive 2014. Show me ... All SXSW art and text on this ...
Read more

Building a Single Page Application with ASP.NET and ...

You’ll learn how to get started building web ap. ... Building a Single Page Application with ASP.NET and AngularJS. ... The Consensus app ...
Read more

AngularJS — Superheroic JavaScript MVW Framework

HTML enhanced for web apps! Download AngularJS 1 ... views in web-applications. AngularJS lets you ... AngularJS is a toolset for building the ...
Read more

Best Practices for Building Angular.js Apps — Medium

Best Practices for Building Angular.js Apps ... no context to say if this is still the best practice I considered it to be in 2014. ... Why Concat is Better.
Read more

SharePoint 2013 Apps with AngularJS | Build 2014 | Channel 9

SharePoint 2013 Apps with ... separation of view layer to allow a GUI Web developer to control the look ... in to Channel 9 to use ...
Read more

Creating Single Page Apps With Angular.JS and ASP.NET

Web API; Featured in ... InfoQ Homepage News Creating Single Page Apps With Angular.JS and ASP.NET. ... 2014 | Share | Read later; My Reading List;
Read more

5 Best Mobile Web App Frameworks: Ionic (AngularJS ...

Angular JS used to be an MVC framework, ... Ionic offers somewhat simpler building blocks that can be combined to deliver rich ... Five Best Mobile Web App ...
Read more