Google+: klab.ca/+ Twitter: @PearlChen ain’t just another MVC framework Pearl Chen [email protected] AngularJS

Me Technologist + Educator frontend web developer hardware hacker emerging technology & user experience (‘artist’) Ladies Learning Code instructor Teach Android & Arduino workshops former CFC Media Lab Research & Tech Manager Teach kids Scratch programming

Day job: Frontend Tech Lead Can you build responsive web sites? Come work with me -- TELUS is hiring!

The Superheroic JavaScript MVW Framework Beginner to intermediate? AngularJS is opinionated and will save you from the spaghetti code monster. More advanced? Create complex web apps in a simpler way. Write code with unit testing in mind. Model-View- Whatever ^

MVC refresher Model your application data (e.g. Values typed into a form field. Or the results of a database call.) Controller mediator between the model & view (e.g. When a form field is updated, it takes care of saving that data. Or when data comes back from an API call, tells the view to update.) View a representation of the model data (e.g. What the user sees on a webpage.)

MVC -- the Angular Way Model your application data (e.g. An array of values) Whatever mediator between the model & view (e.g. Passes data back and forth seamlessly* via data binding) View a representation of the model data (html fragment w/ ng-controller attribute)

Other MVC frameworks? Backbone.js (backbonejs.org) was one of the first and has huge traction due to its early beginnings. • Gives you a way to organize your code via an API after extending Backbone classes. • It is very un-opinionated. • It’s up to you to use it as much, or as little as you want to. “If the framework doesn’t write the code, YOU have to.” - Backbonejs vs Angularjs : Demystifying the myths

Angular is a MVC Framework but... There is nothing to inherit, nothing to call, and no complex life cycle for your controllers to follow. [...] It really is just a better browser.”- Misko Hevery

In contrast... Angular: • Is very opinionated. (e.g. There is typically a “right” way to do it.) • Gives you a way to organize your code but feels like you’re just writing HTML and JS, not extending classes. • Does a lot of heavy lifting for you (Mainly around DOM manipulation using data binding.)

Re-envision web development “Angular is what the web browser would have been, had it been designed for applications.” - Misko Hevery, Appliness (Feb #11): appliness.com

Remember document.getElementById()? var  hello  =  “Hey,  jQueryTO!”; Old school way to dynamically update text: document.getElementBy(‘message’).textContent  =  hello; Then that got replaced by $(selector)...   $(‘#message’).text(  hello  ); Now, with Angular!

A simple AngularJS HTML file                        

A slightly more complex AngularJS app    .highlight  {  /*  some  CSS  styles  */  }            

Its matching application JavaScript file function  MagicCtrl($scope)  {    $scope.tada  =  “It’s  like  magic!”;    $scope.highlight  =  false;      $scope.glow  =  function()  {        $scope.highlight  =  true;    };    $scope.fade  =  function()  {        $scope.highlight  =  false;    }; }

Let’s see this in practice!

Being built on AngularJS... codehuddle.org And being built open source: github.com/CodeHuddle/

Use Yeoman to build your Angular apps Yeoman is an opinionated* way to quickly scaffold out the basic web files of a web application. *Although less opinionated for version 1.0

Warning!!! Examples based on Yeoman version 0.9.6. (Version 1.0 beta was released just last week.)

AngularJS has a Yeoman generator! • Packaged by default with Yeoman 0.9.6. • Found in your Yeoman generators directory. (/usr/local/lib/node_modules/yeoman/node_modules/yeoman-generators/lib/generators) • Or update/install it locally to your project folder: npm  install  generator-­‐angular Github project (github.com/yeoman/generator-angular) maintained by Brian Ford on the AngularJS team so follow him on Google+

Using the default generator... (1) Start with an empty folder*. *Generator will automatically use folder name to create a namespace for your app so don’t use numbers or non-letter characters ** demo ** yeoman  init  angular ( v1.0: yo  init  angular )

Other commands: route (1) Creates both a view (an html fragment) and a controller (a JS file) (2) Links to the controller file in index.html (3) Updates the $routeProvider in app.js. (4) Creates stubs for your unit tests in /tests ** demo ** yeoman  init  angular:route  name-­‐of-­‐your-­‐route

Other commands: directive (1) Creates a directive (a way to encapsulate DOM manipulation) (2) Links to the directive file in index.html ** demo ** yeoman  init  angular:directive  name-­‐of-­‐your-­‐directive Check out AngularUI (angular-ui.github.com) for more UI directives.

Other commands: filter (1) Creates a filter (logic to manipulate data so the view can use it) (2) Links to the filter file in index.html ** demo ** yeoman  init  angular:filter  name-­‐of-­‐your-­‐filter

Learning more about Angular • Official AngularJS website: angularjs.org • AngularJS Google+ Community: plus.google.com/communities/ 115368820700870330756 • Egghead.io video tutorials: egghead.io

Thank you! Upcoming workshops: MaKey MaKey for Game Makers: klab.ca/makeymakey Intro to Arduino + Breadboarding: klab.ca/events Reminder: TELUS is hiring! Come talk to me. Google+: klab.ca/+ Twitter: @PearlChen Pearl Chen [email protected]