Beginner Angular.js For Drupalers
Christopher Bloom, Phase2
Portland Drupal Frontend Users Group
What we're building
"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
});
});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();
});
});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>JS
HTML
Drupal-Javascript Brain Rewiring
"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.
(It's not.)
Architecture: We need
- An array of tea objects
- To show these tea objects in a pretty way
- To be able to add tea objects to the tea array
- To store this tea array between page refreshes
- To see new teas added to the tea array immediately
- To edit teas by clicking any visible tea
- To change various UI elements to indicate editing a tea
Helpful Links
- https://thinkster.io/angulartutorial/learn-to-build-realtime-webapps/
- https://www.angularcourse.com/#/videos
- http://www.airpair.com/angularjs
- https://github.com/jmcunningham/AngularJS-Learning
Headless Drupal feeding data to Angular!
http://dev-headless-drupal-8.gotpantheon.com/headless/angular/index.html
