In the following post I will show an example where I use Bazel to build an Angular application and a nodejs api.
In this post I will show how to use Angular to render server side templates.
Here is an early prototype of an Angular application with lazy loading, built using Bazel and Rollup.
Rollup is currently working on support for code splitting. In this post I will use this new, experimental, feature to bundle a mid size Angular application.
In this post I will evaluate the most common Angular bundlers to see how they compare in terms of bundle size.
In my demo project I have examples of how to bundle Angular applications with pretty much any bundler under the sun. Today I added Parcel to the collection. Let’s see how it compares to one of my existing Webpack configurations.
Today I will test if there is a noticeable change in Angular bundle size from using ESM2015 bundles vs ESM5 bundles when using Rollup.
In this post I will show how to wire up a simple implementation of a Bazel build with a “live refresh” dev server.
In this post I will take a look at the new downgradeModule in ngUpgrade.
In this post I will show how to use RxJs “lettable” operators in an Angular application.
This weekend I decided to experiment with using Bazel as the build tool for a simple Angular application. This post is a quick write-up of my learnings so far.
In this post I will show how to use @angular-devkit/build-optimizer to further optimize Angular Webpack builds.
In a previous article I showed how to add conditional retry logic to RxJs based http requests. In the following post I will show how to unit test the retry logic.
In this post I will show how to retry http requests using RxJs.
One of the really cool things in Angular 5 is watch mode for the ngc (AoT) compiler. In this post I will look at how this works.
This post is a write-up of an experiment where I measure the impact of removing whitespace from Ahead of Time Compiled (AoT) templates.
Working with subjects usually involves “next-ing” out values that subscribers can subscribe to. In this post I will show that the “next-ed” values are received synchronously by the subscriber(s).
In this post I will show how to avoid subscriptions in RxJs by utilizing the async pipe.
In this post I will show how to mock http requests in unit tests using HttpClient.
The goal of this post is to show how to fix a few common anti patterns I’ve seen in rxjs code.
In this post I will show how to make external API responses compatible with Closure compiled code.
In this post I will do a comparison between Webpack 3 and Webpack 2.
In this post I will show how to integrate a simple ngrx sample with the Closure compiler.
In the following post I will show that you can shrink the footprint of your Angular Webpack build by switching to ES6 and Babili.
In this post I will talk about error handling in complex RxJs streams.
In this article I will discuss some of the alternatives for preparing an Angular application for production. I will look at several different approaches, and highlight the pros and cons.
In this post I will talk about integrating the Closure compiler with an NgUpgrade application.
In this post I will show how to optimize NgUpgrade through lazy loading.
In this post I will show a potential pitfall from combining ng-upgrade with long running intervals.
In the following post I will show how to use momentJS in a closure compiled Angular application.
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.
In this post I will show one of the pitfalls of bundling in Angular.
In this post I will discuss an experiment where I set out to create the smallest Angular application possible using Angular 4-rc.5.
In the following post I will show how to implement pub/sub in an NgUpgrade application.
In this post I will talk about some of the issues with Tree Shaking of decorators.
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.
In the following post I will show how to combine the Angular router with ui-router in an Ng-Upgrade application.
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.
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).
In this post I will examine how Angular applications grow in size when moving beyond the “Hello World” baseline example.
In this post I will show how to integrate Firebase with an Angular application.
In this post I will show how to use Angular Universal with Sql Server.
I have created a demo project with lots of live samples to support my articles.
In the following post I will show how to combine i18n translations with Ahead of Time Compilation (AoT).
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.
In this article I will show how to use the ahead of time compiler (AOT) in Angular to improve performance.
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.
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.
In this article we will discuss how to combine socket.io with RxJs Observables in Angular.
I this post I will show how to use Angular Universal to generate Angular applications on the server.
RxJs is all about managing event streams. In this post we will look at buffering emitted values in an rxjs stream.
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.
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.
In this article I will show how to create a lazy loaded treeview using RxJs Observables.
In this short post I will show you how to unit test EventEmitters in Angular
In this post I will explain the purpose of the new @Input and @Output annotations in Angular.
In this article I will attempt to use the Redux pattern in an Angular component.
In this article I will show how to use dynamic forms 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.
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.
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.
In this article I will demonstrate how we can use Observables to implement a basic pub sub example.
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.
In the following article I will show how to use ComponentFactoryResolver in Angular to insert components dynamically into the DOM
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.
In this article I will cover some of the details of Angular dependency injection and highlight some of the changes from Angular 1.x.
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.
In the following post I will describe how to integrate jQuery code 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.
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.
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.
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.
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.
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.
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.
In this post I will give an introduction to the new Angular router.
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.
I am continuing to experiments with Angular. In this article I will demonstrate how to create a grid component using Angular.
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.
In this post I will demonstrate how to create a simple treeview using Angular and TypeScript.
In this article I will provide some details about how $q promise chaining works in Angular.
Most developers are already familiar with unit testing, but in this article I will describe a second category of automated tests – integration tests.
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.
The purpose of this post is to demonstrate how to use RequireJS AMD in combination with regular Angular dependency injection.
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 1.3 introduced the ability to bind validation expressions using the ng-pattern directive. Here is a quick description of how to use it.
In this post I will talk about a few of the benefits of the ControllerAs syntax 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.
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.
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.
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.
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.
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.