{"id":1237,"date":"2012-12-02T22:12:29","date_gmt":"2012-12-03T05:12:29","guid":{"rendered":"http:\/\/thesmithfam.org\/blog\/?p=1237"},"modified":"2019-08-12T07:15:07","modified_gmt":"2019-08-12T13:15:07","slug":"angularjs-is-too-humble-to-say-youre-doing-it-wrong","status":"publish","type":"post","link":"https:\/\/thesmithfam.org\/blog\/2012\/12\/02\/angularjs-is-too-humble-to-say-youre-doing-it-wrong\/","title":{"rendered":"AngularJS is too humble to say you’re doing it wrong"},"content":{"rendered":"

For years, web application developers have used DOM manipulation tools like jQuery<\/a> to control their user interface. Astute developers have taken it to the next level with client-side templating tools like Mustache<\/a> and Handlebars.js<\/a> to build sophisticated user interfaces on the client side.<\/p>\n

And then AngularJS<\/a> came along.<\/p>\n

And we all realized we’ve been doing it wrong.<\/p>\n

Way wrong.<\/p>\n

The Old Way<\/h2>\n

Remember before you discovered AngularJS? Back when your code was organized like this:<\/p>\n

    \n
  1. HTML that defines your page<\/li>\n
  2. JavaScript that downloads AJAX data<\/li>\n
  3. HTML that defines a client side template
    (yeah, this: <script type=\"text\/html\">...<\/script><\/tt>)<\/li>\n
  4. JavaScript that renders the client-side template<\/li>\n
  5. JavaScript that injects the rendered template HTML into the DOM<\/li>\n<\/ol>\n

    You thought that was pretty cool. “Hey look,” you said, “I’ve off-loaded template rendering to the browser!”. Yeah, you were pretty cool.<\/p>\n

    But then AngularJS showed you how you were wrong. You could accomplish the same client-side magic with a lot<\/strong> less code.<\/p>\n

    The New Way<\/h2>\n

    Under AngularJS, your code can be organized like this:<\/p>\n

      \n
    1. HTML that defines your page and client-side templates inline<\/li>\n
    2. JavaScript that downloads AJAX data<\/li>\n<\/ol>\n

      How does that even work? I mean, you’ve got like less than half of the bullet points<\/strong> now.<\/p>\n

      The answer: Data Binding<\/strong>.<\/p>\n

      Data Binding is the secret sauce of AngularJS (along with a couple dozen other delicious spices and condiments). Oh, and it’s not a secret at all. The code is actually pretty easy to read<\/a>, despite being pure magic awesomeness on environmentally-friendly steroids.<\/p>\n

      Shall We Do Show-and-Tell?<\/h2>\n

      The old way<\/h3>\n

      This should be very familiar. You’ve got an HTML page, and you want to add some dynamic content with a client-side template:<\/p>\n

      Here’s the page HTML:<\/p>\n

      \r\n<html>\r\n  <body>\r\n    <div id="my-list-of-animals">\r\n    <\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
      Let’s use Handlebars for the client-side template:<\/p>\n
      \r\n<script id="animal-template" type="text\/x-handlebars-template">\r\n  <div>\r\n    <div>{{animalName}}<\/div>\r\n    <div>{{favoriteFood}}<\/div>\r\n  <\/div>\r\n<\/script>\r\n<\/pre>\n
      And you need some JavaScript to download the AJAX data, render the client side template, and inject it into the DOM:<\/p>\n
      \r\n$.get("\/api\/animals\/", function(response) {\r\n  var source = $("#animal-template").html();\r\n  var template = Handlebars.compile(source);\r\n  $.each(response, function() {\r\n    var html = template(this);\r\n    $("#my-list-of-animals").append(html);\r\n  });\r\n});\r\n<\/pre>\n
      Put all that together somehow, and wow, that’s a lot of code to do something that should be very simple.<\/p>\n
      That covers all 5 bullet points above. You’re still cool, right?<\/p>\n
      The AngularJS Way<\/h3>\n
      Remember how there are only two bullet points. Well, here they are:<\/p>\n
      First, your page HTML:<\/p>\n
      \r\n<html ng-app>\r\n  <body>\r\n    <div ng-controller="MyAnimalController">\r\n      <div ng-repeat="animal in animals">\r\n        <div>{{animal.animalName}}<\/div>\r\n        <div>{{animal.favoriteFood}}<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
      Did you see that? There’s no <script> hack. The template is right inside the page! Right there. In-line. Right where you wanted it all along, but never had the guts to ask. But I digress.<\/p>\n
      Second, the JavaScript:<\/p>\n
      \r\nfunction MyAnimalController($scope, $http) {\r\n  $http.get("\/api\/animals\/").success(function(response) {\r\n    $scope.animals = response;\r\n  });\r\n}\r\n<\/pre>\n
      And that’s it. It really is glorious. The AngularJS team really distilled the client-side template problem to its essence and produced an elegant solution. But don’t take my word for it. Check out the win list below.<\/p>\n
      Win List<\/h2>\n
      Look at all the prizes you won by using AngularJS:<\/p>\n
        \n
      1. CSS classes are just for CSS now.<\/b>
        \nYou used to abuse the HTML class attribute so you could find elements in the DOM with jQuery. Now, your class attributes are only<\/b> for CSS. You don’t have to wonder anymore whether a particular class is used by JavaScript or CSS. The answer is always CSS: The way nature intended<\/li>\n
      2. No <script> hacks.<\/b>
        \nYou don’t have to trick the browser into ignoring your client-side templates anymore. Don’t you feel cleaner?<\/li>\n
      3. Client side templates are cohesive with your page<\/b>
        \nYou used to have a pile of client-side template files scattered throughout your project, or all crammed into your HTML <head>. Now they are right in the page, exactly where you wanted to read them in the first place.<\/li>\n
      4. You don’t have to name every template<\/b>
        \nYou used to name each <script> element with an “id” attribute to make it findable by jQuery. You can nuke those strings in your JavaScript and HTML, and not worry about them getting out-of-sync.<\/li>\n
      5. You have control over the scope of your JavaScript<\/b>
        \nPreviously you had to worry about your jQuery selectors casting too wide a net and selecting elements beyond what you intended. For example, suppose there happened<\/b> to be an element in the page somewhere with class “animal”, and you didn’t know about it. Then you wrote a jQuery selector like $(“.animal”). Boom<\/b>, you just mofidied an element you didn’t intend to. With AngularJS, your JavaScript cannot<\/b> reach outside the ng-controller demarkation.<\/li>\n
      6. You don’t have to remember to clean up HTML on refresh<\/b>
        \nLet’s say I want to refresh the animal list in this example. Under jQuery, I have to remember to do this: $(\"#my-list-of-animals\").html(\"\")<\/tt> before I start .append()<\/tt>ing new animals. In AngularJS, I just replace $scope.animals<\/tt> with the newly downloaded list, and it automatically clears out the old HTML.<\/li>\n
      7. Your JavaScript is cleaner<\/b>
        \nYour JavaScript has no CSS selectors anymore. It used to be littered with strings to locate elemenents in the DOM. Now it’s just got business logic. Pure, sweet business logic.<\/li>\n
      8. You can unit test your JavaScript without a DOM<\/b>
        \nI should have mentioned this first<\/b>. Notice how my JavaScript has no knowledge of a DOM? It doesn’t even know there’s HTML involved at all. This makes it much easier to unit test, because you don’t need to load a big chunk of fixture HTML to test your JavaScript. AngularJS provides some great docs on testing<\/a> too.\n<\/li>\n<\/ol>\n
        Almost Too Humble<\/h2>\n
        I started reading about AngularJS and re-working parts of my projects to use it in earnest only a few weeks ago. A day into the effort, the light bulb went on for me:<\/p>\n
        I’ve been doing this all wrong<\/b><\/center><\/p>\n
        At that point, I started to wonder why the AngularJS team didn’t write article after article with the same title: “You’re Doing It Wrong”. And that’s what inspired me to write this.<\/p>\n
        So there you have it. An opinionated blog post about an opinionated framework.<\/p>\n","protected":false},"excerpt":{"rendered":"
        For years, web application developers have used DOM manipulation tools like jQuery to control their user interface. Astute developers have taken it to the next level with client-side templating tools like Mustache and Handlebars.js to build sophisticated user interfaces on the client side. And then AngularJS came along. And we all realized we’ve been doing […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1237","post","type-post","status-publish","format-standard","hentry","category-code-and-cruft"],"_links":{"self":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/1237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/comments?post=1237"}],"version-history":[{"count":39,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/1237\/revisions"}],"predecessor-version":[{"id":1502,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/1237\/revisions\/1502"}],"wp:attachment":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/media?parent=1237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/categories?post=1237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/tags?post=1237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}