Articles for June 2016

Angular 2: Connect your custom control to ngModel and ngControl with Control Value Accessor.

So you are starting to flex your new Angular 2 muscles and have built the mother of all custom form controls. I mean that thing can do everything except make coffee… And then the moment comes to extract and use it as a separate component in your application.

You plug it into your HTML form with ngControl, thinking your work is done and as your browser refreshes you start seeing all sorts of errors appearing on the console. Attaching it to ngModel produces similar errors.

As it turns out, your journey is far from over and today we will take a look at whatAngular2 expects from you if you want to build components that can talk to directives like ngControl and ngModel.

Source: Angular 2: Connect your custom control to ngModel and ngControl with Control Value Accessor.

The Taxonomy of Reactive Programming | Victor Savkin

We all build user interfaces using some form of reactive programming. A new todo was added? We need to render it on the screen. Someone changed the todo’s title? We need to update the text element in the DOM. And there are dozens of libraries out there that help us do that. They are similar in some ways and different in others.

In this article I will introduce four independent dimensions of reactive programming: events and state, deriving and executing, reified and transparent, self observation and external observation. And I will explain how using these dimensions, as well as the vocabulary that comes with them, we can make our discussions about different libraries and approaches more objective and concise.

Source: The Taxonomy of Reactive Programming | Victor Savkin

Angular 2 RC 3 (NEW FORM API)

We can’t always justify the cost and time to build handcrafted forms, especially if we’ll need a great number of them, they’re similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.

It may be more economical to create the forms dynamically, based on metadata that describe the business object model.

Angular is a development platform for building mobile and desktop web applications

Source: Angular

Security – ts

Web application security has many aspects. This documentation describes Angular’s built in protections against common web application vulnerabilities and attacks, such as Cross Site Scripting Attacks. It does not cover application level security, such as authentication (Who is this user?) or authorization (What can this user do?).

The Open Web Application Security Project (OWASP) has further information on the attacks and mitigations described below.

Angular is a development platform for building mobile and desktop web applications

Source: Security – ts

GitHub – toddmotto/angular-styleguide: Angular styleguide for teams

Angular 1.x styleguide (ES2015)

Architecture, file structure, components, one-way dataflow and best practices

A sensible styleguide for teams by @toddmotto

This architecture and styleguide has been rewritten from the ground up for ES2015, the changes in Angular 1.5+ for future-upgrading your application to Angular 2. This guide includes new best practices for one-way dataflow, event delegation, component architecture and component routing.

You can find the old styleguide here, and the reasoning behind the new one here.

angular-styleguide – Angular styleguide for teams

Source: GitHub – toddmotto/angular-styleguide: Angular styleguide for teams

Animations – ts

Motion is an important aspect in the design of modern web applications. We want our user interfaces to have smooth transitions between states, and engaging animations that call attention where it’s needed. Well-designed animations can make a UI not only more fun but also easier to use.

Angular’s animation system gives us what we need to make the kinds of animations we want. We can build animations that run with the same kind of native performance that we’re used to with pure CSS animations. But we can also have our animation logic tightly integrated with the rest of our application code, where they can be easily triggered and controlled.

Source: Animations – ts