Check out myAngular article series with live demos

IIFE vs UMD

In the following post I will compare immediately-invoked function expressions (IIFE) to Universal Module Definition (UMD) bundles.

Tree Shaking modules in the same file

In this post I will show that putting multiple ES2015 modules in the same file does not impact Tree Shaking.

Size of Angular applications

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

Server-side Svelte

In the following post I will show how to make use of server-side rendering in Svelte.

Optimizing applications using Svelte

I believe build-time compilers will play a much more important role in JavaScript development in the coming years. I this post I will show how I reduced the payload size of my blog commenting feature from over 100k to 4.7k by switching to the compiler based framework Svelte.

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.

Using Svelte with Socket.io

In this article I will show how to create a simple chat application using Svelte and Socket.io.

Async Await Error handling

In this post I will show how to add error handling when using async/await in TypeScript.

Where is promise.finally?

At this point I've used so many different promise libraries that I've lost track of what's supported natively by ES6 promises. Today I learned that “finally” is not yet part of the standard even though it's commonly implemented by third party promise libraries. In this post I will show how to simulate “finally” while we wait for the standard to hopefully implement it.

Async and Await in TypeScript

In this post I will show how to simplify promise handling using async and await in TypeScript.

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).

Lazy Loading with the Closure Compiler

In the following post I will show how to do code splitting with the Closure compiler.

Using the Closure Compiler - ADVANCED_OPTIMIZATIONS

The Closure compiler is an amazing tool for optimizing JavaScript. In this post I will show how to use it in some common scenarios. For the purposes of this post I will be using the closure compiler with ADVANCED_OPTIMIZATIONS.

Creating a Treeview in Svelte

In the following post I will show how to create a Treeview using Svelte. I will also integrate it with the closure compiler (ADVANCED_OPTIMIZATION)

Creating a Treeview in Vue

In the following post I will show how to create a recursive Treeview using Vue.

Tree Shaking in JavaScript

In this post I will talk about how to apply Tree Shaking to JavaScript code.

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.

Comment component in Aurelia

In this article I will show how I built the commenting component for SyntaxSuccess.com using Aurelia.

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.

Elvis 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 Elvis 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.

Web workers in Angular 2.0

One really cool thing about Angular 2.0 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 my application using multiple web workers.

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.

Angular 2.0 vs Aurelia

Lately I have spent quite a bit of time working in both Angular 2.0 and Aurelia, so I figured I'd share some of my experiences here.

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.

Visual Studio Code

Microsoft has open sourced their entire .Net platform. This is huge since it opens up the .Net framework to a lot of new users who were previously blocked by the “Windows only” policy. As part of this effort Microsoft also released a new editor called Visual Studio Code. In this post I will summarize some of my experiences from taking the new editor for a quick spin.

TypeScript and implicit interfaces

TypeScript introduces interfaces – a concept very familiar to developers with experience from languages like C# and Java.

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.

Core Directives in Angular 2.0

In Angular 2.0 – core directives are not automatically available in your templates. Instead you have to opt in to the directives you plan to use in your components. In cases where you need several it may seem a bit tedious to list out every single one. In the following post I will show how to include all core directives using the predefined 'CORE_DIRECTIVES' constant.

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.

Unit Testable Code with MVVM

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.

Object.defineProperty explained

JavaScript lacks explicit access modifiers, so variable “privacy” is hard to come by :-) . Instead we have to come up with clever workarounds to encapsulate objects to simulate the type of private scope we are used to from other programming languages. In this post I will demonstrate how to use Object.defineProperty to lock down JavaScript properties.

Mock Exceptions Using MOQ

Mock Exceptions Using MOQ

Avoid Duplicate Mocking Code in Unit Tests

Avoid Duplicate Mocking Code in Unit Tests

How to Mock HttpContext

How to Mock HttpContext

Define Different Return Values in MOQ

Define Different Return Values in MOQ

How to Change Default Return Values in MOQ

How to Change Default Return Values in MOQ

JavaScript variable assignment explained

Variable assignment is a concept that many developers find confusing. In this post I will try to explain how JavaScript treats variable assignments and argument passing.

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.

Using Sql Server from NodeJS

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

How to mock http calls in Angular

For better testability, and other important reasons, it's generally advisable to add some form of abstraction around your http access layer. However, Angular offers its own “hook” for mocking if your code under test has a direct dependency on the $http service. In this post I will show how to tap into Angular's httpBackend service to define mocked responses to http requests.

How to inject Angular dependencies in Jasmine unit tests

Angular dependency injection is very flexible and easy to work with, but how do you inject dependencies in Jasmine tests. In the following short post I will show two common approaches

How to mock providers in Angular

Providers in Angular serve as a way to create independent components that can be injected into other components. There are several different variations on providers; service, factory, value, constant and provider, but the idea is very similar between all of them. In this post I will demonstrate how to mock the different types through Angular dependency injection.

How to unit test Angular run blocks

Run blocks in Angular are commonly used to bootstrap the application and run initial setup functions. In some cases the logic might be complex enough to warrant unit tests, so in the following post, I will demonstrate how to capture run block(s) from a unit test.

How to simulate and test failing promises in Angular

Whenever you make an asynchronous remote call there is always the chance that the call will fail. In this post I will demonstrate how to simulate and test failing promises when using Angular and $q.

How to mock promise based service dependencies in Angular

In this article I will show how to unit test an angular service by mocking its external dependency. The service under test is trivial, but the key point is to demonstrate how to mock its asynchronous dependencies using Angular and Jasmine.

How to Mock with NSubstitute

There are several great mocking frameworks available for .Net, but <a href='http://nsubstitute.github.io/' target='_blank'>NSubstitute</a> stands out because of its simple and elegant syntax. Perhaps the biggest benefit is how easy it is to integrate mocked objects with the code under test. There is no need for framework specific bootstrapping, or extra properties to access the objects you are mocking.

How to Create Xpath Using Linq

As an alternative to my previous xpath library, XpathItUp, I've created a lambda based framework for generating xpath expressions. The goal is to improve and address some of the short comings of my previous library.

JavaScript ES6 Linq

EcmaScript 6 offers some new really nice syntax additions to JavaScript. One of them is arrow functions. Arrow functions provide a compact way to create filter functions, so to take advantage of this I have created a lightweight library for querying arrays using ES6 arrow functions.

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.

JavaScript and bind

One confusing thing about JavaScript is how the meaning of 'this' changes based on execution context. In this post I will demonstrate how to use bind() to inject the meaning of 'this' in functions where it's referenced directly.

Getting started with React Native

In a previous post I showed how to use React to create both client side and server side web components. In this post I will demonstrate how to use React Native to create an IOS application.

Writing Jasmine unit tests in ES6

Previously I showed how to write application code using ES6, but wouldn't it be nice to use ES6 when writing unit tests as well? In the following post I will demonstrate how to write Jasmine tests using ES6 syntax.

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.

Aurelia Treeview on GitHub

I have added a cleaned up version of my Aurelia treeview project to Github and here is a quick tutorial showing you how to use it.

Building a Treeview in Aurelia

I have started exploring Aurelia and figured building a treeview would be a good way to learn more about the framework. The following post is a write up of how I built my treeview.

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.

Converting React jsx files using Webpack

In this post I will demonstrate how to use Webpack to bundle React jsx files into regular JavaScript code.

Creating a Treeview using React and Flux

In this post I will demonstrate how to create a Treeview component using React and Flux.

Appending to child collection in MongoDB

In the following post I will show how to append documents to an existing array of sub documents using Mongoose and MongoDB.

Sorting by ObjectId in MongoDB

It's common practice in databases to keep a column or field to indicate when a record or document was created. This is useful for audit purposes, but also for sorting. You can add add your own audit fields, but in MongoDB we get a timestamp for free if we define our primary key as an ObjectId. This is because the 12 byte ObjectId type contains a 4 byte time component. In this post I will show how to add simple sorting to a Mongoose query based on the timestamp component of ObjectId.

Object models and inheritance in TypeScript

Proper object modeling is becoming more important in JavaScript development as client side features are growing in complexity. Most object models don't require inheritance, but for those that do, JavaScript is lacking proper/intuitive constructs to support it natively. True, it is possible to inherit objects in JavaScript through the prototype chain, but it still leaves a lot to be desired compared to languages where object oriented code is more of a first class citizen. In this post I have added an example of how to bring more streamlined inheritance to JavaScript through TypeScript.

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.

React components - server side and client side

One of the great things about React is the ability to easily share components between server and browser. In the following post I will demonstrate how to run the same exact React component server side and client side. The server used in this example is NodeJS/Express.

Decoupled object models in React

A common criticism of React seems to be that it's tearing down the barrier between view and object model - better known as separation of concerns. Some are even claiming that React is taking us back in time by reintroducing anti patterns from the past where Html and JavaScript were tightly coupled and intertwined like spaghetti. I find this view to be misguided, and will through a simple example, demonstrate how to integrate decoupled object models in React.

Hiding and showing elements in React

In the following post I will demonstrate how to conditionally render content in a React component.

JavaScript websites and SEO

Modern websites make heavy use of JavaScript to support a better user experience, but what is the impact on SEO?

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.

JavaScript and its crutches

There is a growing sentiment among developers that the community is saturated with frameworks that all promise to fix “JavaScript problems”. Some are just frustrated with the high number of frameworks available, but there is also the DIY crowd that opposes any form of JavaScript frameworks. I personally fall somewhere in the middle since I would love for JavaScript to be natively “self-sufficient”, but the current state of the language is just not there yet.

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.

Is jQuery still relevant

As so many other developers I got my first introduction to complex client side web applications through jQuery. It was essentially the gateway drug that got most developers hooked on JavaScript during a time when JavaScript played a relatively modest role in most web projects. I will always be grateful for the productivity boost I got from adding jQuery to my, back then, very limited repertoire of client side skills. However, as project requirements got more and more complicated, developers started to realize that the traditional jQuery pattern of very little separation between object model and markup was not scalable. I think this and a few other factors beg the question, is jQuery still relevant today?

Which JavaScript framework do I choose

Since JavaScript has made a big comeback as one of the most sought after skills in the job market there has been a lot of talk about which frameworks to focus on. Developers have several frameworks to choose from today; Angular, Ember, Knockout, Durandal, React and the list goes on.... Granted some of these are not in direct competition since they serve different purposes, but they all deserve to be on the list of notable frameworks in today's market. In this post I will talk about why I don't think it really matters which one you end up going with.

Exciting new features in ECMAScript 6

JavaScript is everywhere these days! Both front end and the back end can be written in JavaScript, and in fact, this blog is an example of an application written entirely in JavaScript. Even though JavaScript has been around for a long time it's definitely a language in constant transition. The next really exciting milestone will be ECMAScript 6, which will usher in a whole host of new exciting additions to the language. In this post I will write about a few of the changes that excite me the most.

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.

Nuget packages

I have created two helper libraries for building xpath xpressions in c#. Here are the nuget packages to get them.

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.