Using Angular Content Projection to Draw Smiley Faces

When working in Angular, it’s pretty straightforward to create components and nest those components inside of other components. However, it is a bit more complicated to design customizable components that will display content based on the components passed to them (content projection). Read more on Using Angular Content Projection to Draw Smiley Faces…

Reactive Programming: A Timed Popup Component with RxJS

Reactive programming is all about streams. It involves combining streams, filtering streams, and transforming streams. In reactive programming, the application does not need to pull for data, but it is notified whenever a new event occurs.

A few months ago, I wrote a post on reactive programming in WPF using ReactiveUI. Recently, we’ve been working on an Angular project and have been using the RxJS library for reactive programming in JavaScript. RxJS follows the reactive programming pattern of observers consuming data by subscribing to the observables. It also implements a set of operators such as map, filter, and reduce, which (generally speaking) take an observable, mutate it in some way, and then return the mutated observable. Read more on Reactive Programming: A Timed Popup Component with RxJS…

Multiple HTTP Requests for an AngularJS + Google Sheets Prototype

As I continued to build out my AngularJS + Google Sheets prototype, I ran into another problem. I wanted to load the data from two Google Sheets and access the data in the same function. I created this example, which loads in one Sheet with weather forecasts and another with weather types and descriptions, as a proxy. Read more on Multiple HTTP Requests for an AngularJS + Google Sheets Prototype…

Adding Google Analytics to an AngularJS App with ngRoutes

As my recent project using Google Sheets and AngularJS grew into a successful prototype, I ran into a series of issues creating a feedback loop. I wanted to set up a tracking tool for page hits and log searches by users. My goal was to identify the pages that were used the most and the least in order to understand which tools were popular and which were not. Tracking this information would allow us to do more internal teaching or start phasing out the tools that were not helpful. So, I thought hey, I’ll just use Google Analytics; it’s easy. Wow, was I mistaken.
Read more on Adding Google Analytics to an AngularJS App with ngRoutes…

Wrangling a Legacy Angular Project in 3 Steps

The value of having test coverage in any software application is pretty obvious: making features is a lot less scary when you have a test suite that will yell at you if you break something. The value of adding test coverage to a large legacy project, however, is not as clear—especially to stakeholders who need new features, not new tests for old features.

Read more on Wrangling a Legacy Angular Project in 3 Steps…

Safely Binding Unescaped Content in Web Applications

“Snakecharmers,” a chromolithograph by Alfred Brehm, c.1883

Binding unescaped HTML or CSS content on a web page is a scary proposition for most web developers. The idea conjures up black-hat hackers attacking your company’s infrastructure and high-visibility hacks. In fact, cross-site scripting vulnerabilities may exist on as many as 70% of all web sites.

In this post, I’ll explain what cross-site scripting vulnerability is, when it’s OK to silence warnings, and how to do so in two popular JavaScript frameworks: Angular and Ember.js. Read more on Safely Binding Unescaped Content in Web Applications…

Comparing Directive Scope Options in AngularJS

When defining directives in AngularJS, there are three different ways to pass in variables: no scope, inherited scope, or isolated scope. Whether or not you’re using the “controller as” syntax (and I hope you are), you still have to decide which one to use. In this post, I’ll explain the differences and suggest why you might—or might not—want to use each one.
Read more on Comparing Directive Scope Options in AngularJS…

Asynchronous Testing with Protractor’s ControlFlow

Protractor is an end-to-end testing framework for AngularJS applications that uses a real browser, just as a real user would. It is built on top of NodeJS and WebDriverJS and taps into the internals of Angular to know when Angular is done processing and updating bindings.

The joy of Protractor and WebDriverJS is that we can write our tests in a synchronous style, and still have the added benefits of asynchronous code. Read more on Asynchronous Testing with Protractor’s ControlFlow…