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…
angular.js
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.
How to Unit Test AngularJS Events with Karma
Events are useful for communicating changes across components while keeping them decoupled. AngularJS provides a nice interface for this, including $broadcast and $on for publishing and subscribing. Luckily, these aspects of an application can be easily tested using Karma.
Read more on How to Unit Test AngularJS Events with Karma…
Safely Binding Unescaped Content in Web Applications
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…
Deconstructing Single Page Applications at CodeMash
In such a rapidly changing industry as the web, we can’t be expected to keep track of everything that’s going on. But by taking a few minutes to look around and see what the other approaches are, it’s easier to stay on top of the technology as it evolves and grows. Read more on Deconstructing Single Page Applications at CodeMash…
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…
