AngularJS just ain't another MVC framework

AngularJS just ain't another MVC framework

Demo source code: https://dl.dropbox.com/u/6578923/simple-angularjs-demo.zip

You've probably heard of BackboneJS as a JavaScript MVC (Model-View-Controller) framework for building web apps but it's worth exploring other options when you want to get more out of your framework. AngularJS is highly opinionated which makes it easier for beginners to grasp core MVC concepts, while experts will enjoy its integration with Yeoman. And anyone who wants to write less boilerplate code will enjoy its data binding abilities. If you're like me, AngularJS just might turn into your favourite MVC framework.

F6c4a7544807fe0b8a874e83eb84b481?s=128

Pearl Chen

March 03, 2013
Tweet

Transcript

  1. Google+: klab.ca/+ Twitter: @PearlChen ain’t just another MVC framework Pearl

    Chen pearl@karma-laboratory.com AngularJS
  2. 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
  3. Day job: Frontend Tech Lead Can you build responsive web

    sites? Come work with me -- TELUS is hiring!
  4. 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 ^
  5. 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.)
  6. 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)
  7. 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
  8. 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
  9. 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.)
  10. 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
  11. Remember document.getElementById()? var  hello  =  “Hey,  jQueryTO!”; Old school way

    to dynamically update text: <div  id=“message”></div> document.getElementBy(‘message’).textContent  =  hello; Then that got replaced by $(selector)... <div  id=“message”></div>   $(‘#message’).text(  hello  ); Now, with Angular! <div>{{hello}}</div>
  12. A simple AngularJS HTML file <!DOCTYPE  html> <html  ng-­‐app>  

     <body>        <div>            <label>Name:</label>            <input  type="text"                    ng-­‐model="yourName"                    placeholder="What’s  your  name?">            <h1>Hello  {{yourName}}!</h1>        </div>        <script  src="https://ajax.googleapis.com/ajax/libs/              angularjs/1.0.5/angular.min.js"></script>    </body> </html>
  13. A slightly more complex AngularJS app <style>    .highlight  {

     /*  some  CSS  styles  */  } </style> <body  ng-­‐app>    <div  ng-­‐controller="MagicCtrl">        <div  ng-­‐class="{'highlight':highlight}">            {{tada}}!        </div>        <button  ng-­‐click="glow()">Add  Highlight</button>        <button  ng-­‐click="fade()">Fade  Highlight</button>    </div>    <script  src="angular.min.js"></script>    <script  src="magic.js"></script> </body>
  14. 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;    }; }
  15. Let’s see this in practice!

  16. Being built on AngularJS... codehuddle.org And being built open source:

    github.com/CodeHuddle/
  17. 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
  18. Warning!!! Examples based on Yeoman version 0.9.6. (Version 1.0 beta

    was released just last week.)
  19. 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+
  20. 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 )
  21. 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
  22. 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.
  23. 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
  24. Learning more about Angular • Official AngularJS website: angularjs.org •

    AngularJS Google+ Community: plus.google.com/communities/ 115368820700870330756 • Egghead.io video tutorials: egghead.io
  25. 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 pearl@karma-laboratory.com