Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Pearl Chen

March 03, 2013
Tweet

More Decks by Pearl Chen

Other Decks in Technology

Transcript

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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
    ^

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  11. 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!
    {{hello}}

    View full-size slide

  12. A simple AngularJS HTML file


       
           
               Name:
                                 ng-­‐model="yourName"  
                     placeholder="What’s  your  name?">
               Hello  {{yourName}}!
           
                         angularjs/1.0.5/angular.min.js">
       

    View full-size slide

  13. A slightly more complex AngularJS app
    <br/>    .highlight  {  /*  some  CSS  styles  */  }<br/>

       
           
               {{tada}}!
           
           Add  Highlight
           Fade  Highlight
       
       
       

    View full-size slide

  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;
       };
    }

    View full-size slide

  15. Let’s see this in
    practice!

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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+

    View full-size slide

  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 )

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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
    [email protected]

    View full-size slide