React Fundamentals For Angular Developers

Apr 5 2016

TL;DR: Angular is a complex, monolithic framework that makes lots of choices for you. React is a DOM manipulation library that fits into a dynamic evolving ecosystem. Both are actually rather good.

React vs. Angular. Fight!

React is often compared to Angular. We commonly hear shouty, unpleasant arguments such as:

"React is better than Angular because it's faster and has one-way binding!"

And the answering call:

"No, you're comparing Apples with Oranges!"

We hear that React is a library and...

read more...

Organising your Angular code with Browserify

Apr 1 2016

TL;DR: Browserify automatically works out what code depends on what. It will bundle our code into a single file, and make sure that everything is run only once and in the correct order. We specify an order of execution in Browserify using require statements. If A requires B, B will be executed first, and the result will be passed into A.

Organising JavaScript in a larger app becomes quite painful quite quickly. The issue is that order of inclusion matters. If I write a service that belongs to...

read more...

How to do transclusion in Angular 2 (ES5)

Mar 24 2016

TL;DR: Angular 1 had transclusion which allowed us to access the content inside a directive's tag. Angular 2 has contentChildren which does the same thing. contentChildren are bound to their own component, not to the component they are included in.

Transclusion in Angular 1

Angular 1 gaves us the concept of transclusion. Transclusion is made of 2 words:

  • trans- from cross
  • -clusion from inclusion

It is the ability to bring in content from somewhere else, specifically the parent template...

read more...

How to do Everything in Angular 2 using vanilla ES5 or ES6

Feb 26 2016

Most of the information and tutorials on Angular 2 currently available focus on TypeScript, with perhaps a handwavy gesture towards ES5 somewhere at the start.

The few JavaScript tutorials that do exist, generally resort to such abominations as hand coded decorators or a manually populated parameters attribute, neither of which are needed any more.

  • DI can be done by passing an array of newables to the constructor.
  • Decorators can be inserted using the fluent API wrapper, without ever having...

read more...

How does the TypeScript Angular DI magic work?

Feb 26 2016

TL;DR: Using decorators and a Reflect.metadata polyfill.

Angular 2 comes with a brand new DI mechanism. The premier way to do DI in Angular 2 is using TypeScript "Magic". Most articles gloss over this magic. In this article, we dive through the magic and look at the mechanism.

DI in Angular 1

DI is a pattern we all...

read more...

What's the difference between annotations and decorators in Angular 2?

Feb 21 2016

TL;DR: Annotations and decorators are two competing and incompatible ways to compile the @ symbols that we often see attached to Angular components. Annotations create an "annotations" array. Decorators are functions that receive the decorated object and can make any changes to it they like.

Traceur gives us annotations. TypeScript gives us decorators. Angular 2 supports both.

One of the humps you'll likely run into when learning about Angular 2 is this initially non-obvious distinction between...

read more...

Angular 1 vs. Angular 2

Feb 15 2016

Angular 1 and Angular 2 are philosophically different.

Angular 1

Angular 1 is at heart a DOM compiler. We write HTML, and the Angular compiler takes care of compiling it into a web application.

It was originally designed to allow designers to create web applications without writing any code, and you can actually build some pretty complex applications without any JavaScript at all (other than angular.js)

If we want extra behaviour, we extend the compiler by adding more directives.

The template...

read more...

What is Babel, and how will it help you write JavaScript?

Feb 15 2016

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

It makes available all the syntactical sugar that was added to JavaScript with the new ES6 specification, including classes, fat arrows and multiline strings.

Installation

Babel comes packaged as an node module. Installation, as you might expect, is via npm:

npm install –save-dev 'babel-cli'

There are plugins for webpack, gulp, grunt, Sublime, Webstorm...

read more...

Creating Read-Only & Virtual Attributes with JavaScript Getters and Setters

Jan 10 2016

TL;DR Getters and setters let us create read only attributes of JSON objects. They work in all current browsers (except IE8), so you can use them today

Getters and Setters allow us to create functions to set attributes on our JavaScript objects. This allows us to create pseudoelements and store and retrieve computed values, much as we can with Ruby.

They allow us to write code such that, when we access an attribute of an object, we are actually calling a function. We can use them to create read...

read more...

Why you should (sometimes) use MongoDB

Jul 17 2015

I should start out by saying that I have no axe to grind here. I'm just a guy who enjoys learning things and using new technology.

Mongo as a technology has taken some heavy flak, particularly from the SQL crowd. It's missing a few features, has bugs, and does things in an unfamiliar way. This has made a lot of people rather cross which has lead to a surprising outpouring of hate for a technology that is actually rather good.

I have very much enjoyed my Mongo journey. Perhaps you will too.

...

read more...

Angular from Scratch with Matthieu Lux

Jun 12 2015

Watch as Matthieu rebuilds angular complete with $scope, $digest, $apply, $compile, ng-bind and ng-model in half an hour and a hundred lines of code or so.

Done in front of a live audience at ng-europe 2014, which makes it even more impressive.

read more...

How does ng-app work?

Jun 2 2015

Today's Angular is the angularInit function. This is the function which makes ng-app work.

tldr; It selects elements, discovers the root module name, and then shells out to bootstrap, sending it the element and the module.

Here it is:

function angularInit(element, bootstrap) {
var elements = [element],
appElement,
module,
names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'],
NG_APP_CLASS_REGEXP = / ng[:-]app(: *([wd_]+);?)? /;
function append(element) {
element

read more...

The Angular Book

Feb 20 2014

AngularJS

Step by Logical Step

By Nicholas Johnson

version 0.1.4 - beta

Image credit: San Diego Air and Space Museum Archives

Welcome to Angular!

Angular gives you super powers. You will be able to see through walls, climb tall buildings with your hands and shoot laser beams from your eyes.

With Angular you will be unstoppable. You will be able to pull in live streams of data from across the Internet and mash them into your page like...

read more...

MVC JavaScript without a Framework

Jul 10 2013

Looking at Rails or Angular there's a tendency to think of MVC as something rather complicated and difficult to achieve, something that really demands a framework.

In fact, MV* style JavaScript really is trivially easy to write. It's a pattern I'll often drop into if I need to make anything beyond the basics, but I don't want to break out Angular's big guns.

In this post, we'll create a simple MV pattern. We'll build a Model and a View and wire these together using events.

Wiring with Events

read more...

Using a Rails concern to dry up Paperclip Attachments

Jun 10 2013

Rails concerns have come in for a bit of a kicking lately, service objects clearly being a better solution in many instances, but I think there are valid use cases.

Concerns address the "bloated model" problem that plagues older Rails instances, where more and more methods are added to your fat models until they become huge and unwieldy. This slows your development as you now need to spend longer reading through code in order to get work done.

A concern is simply a module that you can mix in...

read more...

Do you like Email? Do You Like JavaScript?

Sign up for occasional emails covering modern Web Development topics such as Angular 2 and React. You can unsubscribe at any time.

We totally respect your email privacy