Beginner Angular.js For Drupalers

Christopher Bloom, Phase2

Portland Drupal Frontend Users Group

What we're building

http://plnkr.co/edit/DPeXl7ASvO3abZI6MW9e?p=preview

"Bloom wants to try all the teas in the tea shop below the Phase2 office but he can't remember which ones he tried. Let's make a grid of teas he can take notes on."

jQuery: use it to add contained interactivity

$(document).ready(function(){
    $('#some-element').click(function(e){
        e.preventDefault();
        //some interaction
    });
});

http://antjanus.com/blog/web-development-tutorials/front-end-development/comprehensive-beginner-guide-angularjs/

jQuery: falls over for apps

$(document).ready(function() {
    $('#some-element').click(function(e){
        $.get('/api/list-comments', function(data) {
            var $comments = $('<div></div>');
            $comments.addClass('comment-list');

            for(comment in data.comments) {
                var $comment = $('<div></div>');
                $comment.addClass('comment');

                var $link = $('<a></a>');
                $link.attr('href', comment.userUrl);
                $link.addClass('user');
                $comment.append($link);

                var $content = $('<div></div>');
                $content.addClass('comment-content');
                $content.html(comment.content);
            }

            $('.comment-list').html('');
            $('.comment-list').append($comments);
        });
        e.preventDefault();
    });

});

http://antjanus.com/blog/web-development-tutorials/front-end-development/comprehensive-beginner-guide-angularjs/

Barf.

Angular is made for apps

app.controller('mainCtrl', ['$scope', '$http',
  function($scope, $http) {
    
    $scope.getRepos = function() {
      $http.get('https://api.github.com/users/illepic/repos').success(
        function(data) {
          $scope.repos = data;
        }
      );
    };
  }
]);

    <div ng-controller="mainCtrl">
      <button ng-click="getRepos()" id="some-element">Get repos</button>
      <div class="comments">
        <div ng-repeat="repo in repos" class="comment">
          <a href="{{repo.url}}" class="user">{{repo.owner.login}}</a>
          <div class="comment-content">{{repo.name}}</div>
        </div>
      </div>
    </div>

HTML

Drupal-Javascript Brain Rewiring

https://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

"In jQuery, you design a page, and then you make it dynamic. This is because jQuery was designed for augmentation and has grown incredibly from that simple premise."

Drupal-Javascript Brain Rewiring

"But in AngularJS, you must start from the ground up with your architecture in mind. Instead of starting by thinking "I have this piece of the DOM and I want to make it do X", you have to start with what you want to accomplish, then go about designing your application, and then finally go about designing your view."

Hands-on: Keep In Mind

Most things happen by changing data (the "model")
Changing values in the page (the "view"), automagically change values/triggers events in our module (handled through our "controller")
HTML is a first-class citizen: we decorate it with functions and "directives". We are building an app, not a document.
We'll try to build up to the final demo code from simpler pieces.