Check out myAngular article series with live demos

NgUpgrade and long running intervals

In this post I will show a potential pitfall from combining ng-upgrade with long running intervals.

Using MomentJs with Angular and the Closure compiler

In the following post I will show how to use momentJS in a closure compiled Angular application.

Closure Compiler vs Rollup vs Webpack

I have migrated my demo application to use the Closure compiler for bundling. In this post I will do a quick comparison of bundle sizes between Closure, Rollup and Webpack.

Pitfalls in Angular bundling

In this post I will show one of the pitfalls of bundling in Angular.

Minimal Angular Application

In this post I will discuss an experiment where I set out to create the smallest Angular application possible using Angular 4-rc.5.

NgUpgrade Pub Sub in Angular

In the following post I will show how to implement pub/sub in an NgUpgrade application.

Tree Shaking Decorators in Angular

In this post I will talk about some of the issues with Tree Shaking of decorators.

Angular bundling formats

I just updated my Angular samples to version 4 of Angular. Since version 2 the Angular team has made a few tweaks to the Angular distribution format. In this post I will point out a few of the differences.

NgUpgrade with the Angular router and ui-router

In the following post I will show how to combine the Angular router with ui-router in an Ng-Upgrade application.

Migrating my Angular demo to use the Closure compiler

Now that the Closure compiler is closer to becoming a viable option in Angular, I have decided to start migrating my Angular demo components to use it. I will give you updates on my progress as I continue to work on the migration.

Angular application bundles

In this post I will discuss different ways to generate Angular application bundles. I will show examples using Rollup, Webpack and the Closure compiler (ADVANCED_OPTIMIZATION).

Size of Angular applications

In this post I will examine how Angular applications grow in size when moving beyond the “Hello World” baseline example.

Using Firebase with Angular

In this post I will show how to integrate Firebase with an Angular application.

Using Angular Universal with Sql Server

In this post I will show how to use Angular Universal with Sql Server.

Angular examples

I have created a demo project with lots of live samples to support my articles.

i18n and Ahead of Time Compilation (AoT) in Angular

In the following post I will show how to combine i18n translations with Ahead of Time Compilation (AoT).

Optimizing NgUpgrade bundle sizes in Angular

Many existing Angular 1 projects are looking to NgUpgrade to help with the transition to post 1.x versions of Angular. In this post I will show how to create an optimized Angular bundle for the NgUpgrade scenario.

Ahead of Time Compilation in Angular

In this article I will show how to use the ahead of time compiler (AOT) in Angular to improve performance.

Using NativeScript with Angular

Angular code is decoupled from the underlying runtime environment, so in theory our code could run on any type of host. In this post we will show how to use NativeScript in combination with Angular to create a native app.

web workers in angular

One really cool thing about Angular is that the framework is decoupled from the DOM via a higher level API. In the following post I will show how to take advantage of this by running an Angular application in a web worker.

Socket.io with RxJs in Angular

In this article we will discuss how to combine socket.io with RxJs Observables in Angular.

Server Side Rendering in Angular

I this post I will show how to use Angular Universal to generate Angular applications on the server.

Buffering with RxJs in Angular

RxJs is all about managing event streams. In this post we will look at buffering emitted values in an rxjs stream.

Caching with RxJs Observables in Angular

Caching is important for performance, especially on bandwidth restricted devices and slow networks. In this article we will discuss how to cache http calls using rxjs observables.

Combining multiple RxJs streams in Angular

In RxJs we often deal with multiple streams, but the end consumer typically only subscribes to a single stream. In this article we will look at ways to combine multiple streams into a single stream.

Lazy Loaded TreeView in Angular

In this article I will show how to create a lazy loaded treeview using RxJs Observables.

Unit Testing EventEmitter in Angular

In this short post I will show you how to unit test EventEmitters in Angular

Input and Output in Angular

In this post I will explain the purpose of the new @Input and @Output annotations in Angular.

Redux in Angular

In this article I will attempt to use the Redux pattern in an Angular component.

Dynamic Form in Angular

In this article I will show how to use dynamic forms in Angular.

Change Detection in Angular

One of the most common criticisms of Angular 1.x is the potentially inefficient change detection algorithm tied to the digest cycle. In this post I will discuss some of the major improvements to change detection in Angular.

Angular Unit Testing

The new component based architecture in Angular is great for unit testing, so in the following article I will demonstrate how to unit test Angular 2.0 code using Jasmine and TypeScript.

Observables in Angular

The RxJs community has presented the idea that any series of events can be modeled as one or many asynchronous or synchronous arrays. In the following post I want to explore this by modeling a series of different user inputs as Observables.

Pub Sub in Angular

In this article I will demonstrate how we can use Observables to implement a basic pub sub example.

Save Navigation Operator in Angular

Angular is now a lot less forgiving about undefined references in binding expressions than Angular 1.x is. In this post I will show how to use the safe navigation operator to safe guard against undefined references in view templates.

Loading Components Dynamically in Angular

In the following article I will show how to use ComponentFactoryResolver in Angular to insert components dynamically into the DOM

Forms and Validation in Angular

In the following post I will show how to use the built in form functionality in Angular. Through an example I will wire up some common controls and show how to do data binding and validation in the form.

Dependency Injection in Angular

In this article I will cover some of the details of Angular dependency injection and highlight some of the changes from Angular 1.x.

Input controls in Angular

Capturing user input is an important part of web development, so in the following post I will demonstrate how to use common input controls like textbox, checkbox and radio button in Angular.

Using jQuery with Angular

In the following post I will describe how to integrate jQuery code with Angular.

Integrating React with Angular

I am continuing my Angular article series and today I want to show you how to integrate non Angular code in Angular. Specifically I will be integrating an existing React/Flux component with an Angular host component.

Timeouts in Angular

Most Angular developers are probably already familiar with the $timeout service. This service serves an important role in Angular 1.x, so today I decided to go digging for its counterpart in the new Angular world.

Is Angular 2.0 worth it

I have over the past months spent quite a bit of time working with Angular 2.0 by writing sample components and going through the Angular 2.0 source code. At this point I have decided to write down some of my thoughts around my experiences with Angular 2.0. Keep in mind, these are just my own personal experiences, so I am very interested in hearing from other developers who might have totally different views on this.

Virtualized spreadsheet component in Angular

I am continuing my series of POC components using Angular. Today I have decided to create a virtualized spreadsheet component. The idea is to make a highly scalable grid by limiting the number of rendered DOM rows to a fixed number – backed by a virtual data source. The point of all this is not really to recreate Excel, but to play around with some new Angular concepts.

Comprehensive guide to Unit Testing in AngularJS

Angular allows you to build amazing user interfaces, but as complexity increases, unit testing becomes a very important part of your project. In this article I will provide a comprehensive guide for how to successfully write unit tests in AngularJS. The examples are created using Jasmine, but the concepts are not directly tied to a specific testing framework.

Angular promises – then vs success

The Angular team has just announced that the convenience wrappers success and error for promise handling have been deprecated. This is not surprising as the success/error API is not only non standard, but might also lead to unexpected results. In this post I will highlight some of the potential pitfalls from using success.

Angular and Http

Being able to make http requests is a very important part of a single page application. In this post I will show a quick demo of how to make requests using the Angular http module.

Routing in Angular

In this post I will give an introduction to the new Angular router.

Ignoring Angular bindings

Angular includes a directive that tells Angular to not compile or evaluate bindings in the contents of a specified DOM element. In this simple example I will demo how to wire this up.

Experiences with Angular

Angular is probably still the undisputed heavy weight champion of JavaScript frameworks, but other frameworks are emerging as solid alternatives. In this post I will share some of my experiences from working with Angular on large enterprise projects.

Angular Grid

I am continuing to experiments with Angular. In this article I will demonstrate how to create a grid component using Angular.

Angular input values and binding

In this post I am continuing my series of Angular articles by showing how to set up two way binding between input elements and model.

Recursive TreeView in Angular

In this post I will demonstrate how to create a simple treeview using Angular and TypeScript.

Angular promise chaining explained

In this article I will provide some details about how $q promise chaining works in Angular.

Angular integration tests

Most developers are already familiar with unit testing, but in this article I will describe a second category of automated tests – integration tests.

Angular with RequireJS AMD and ocLazyLoad

In a previous post I showed how to combine RequireJS AMD with regular Angular DI. In this post I will demonstrate how to enhance this further by adding ocLazyLoad to support true on demand lazy loading of resources.

Angular with RequireJS AMD

The purpose of this post is to demonstrate how to use RequireJS AMD in combination with regular Angular dependency injection.

Including EcmaScript 6 code in Angular 1.x

Despite lack of browser support, ES6 is beginning to leave its mark on modern web development. We still have to transpile ES6 code down to ES5, but improvements in transpilers and automation make the process almost seamless. In this post I will demonstrate how to benefit from ES6 JavaScript in Angular 1.x.

Unit Testing bindToController and ControllerAs

The bindToController property makes it really easy to tie a directive's isolate scope to the controller when using controllerAs. BindToConroller effectively binds the scope properties to the controller, but how can we simulate this in a unit test without having to include the directive in the test? In this post I will show an example of how to do it.

Angular - binding validation expressions to ng-pattern

Angular 1.3 introduced the ability to bind validation expressions using the ng-pattern directive. Here is a quick description of how to use it.

Angular and benefits of ControllerAs syntax

In this post I will talk about a few of the benefits of the ControllerAs syntax in Angular.

Caching promises in Angular

Caching typically translates into an instant performance win in most applications. In this post I will demonstrate how to add basic cache handling to promise based http calls.

Angular vs React

Lately there has been a lot of buzz about React. People are already comparing it to Angular – another very popular framework. In this post I will look at some of the differences between React and Angular.

Decoupled object models in JavaScript

I have always advocated in favor of decoupled object models for testability and flexibility, but what does that really mean? In this post I will, through an example, demonstrate what I mean by a decoupled object model and highlight the major benefits of the approach.

Thoughts on Angular 2.0

A while back the Angular team made an announcement about their plans for the next generation of Angular – Angular 2.0. The presentation revealed changes that represent a big departure from the current 1.x version. Developers everywhere responded with a mixture of shock and disbelief after learning that core concepts of Angular 1.x would be dropped in 2.0. In fact it almost seemed as if the team had decided to create a brand new framework, but still name it Angular for brand recognition. However, in this post I want to explain why I think the new Angular approach is the right one.

Integrating React components in Angular

React has emerged as a popular library for creating complicated user interfaces, most notably Facebook and Instagram. React is great for building reusable components and one of its strengths is how easily it integrates with other frameworks. In this post I will demonstrate how to integrate a simple React component in an existing Angular application.

Removing watches in Angular applications

Angular is a great framework for composing complicated data driven user interfaces. Most of the time Angular does a good job of balancing flexibility and performance, but in large complicated UIs, performance may become an issue if you're not careful. In this post I will discuss some effective techniques that may help you tune your application.