As I started working on my Angular CLI-managed Angular 2 project, I discovered that making code changes while Angular CLI was either serving my application or waiting to re-execute unit tests would cause my IntelliJ IDE to start re-indexing my project files.  Each indexing run took several minutes and during that time IntelliJ was slow to respond t...

While there is still a lot out there for me to read regarding Angular 2, I tend to learn by coding and solving problems.  Even though there are a few aspects of Angular 2 that are in flux at this time (like forms), I feel that I can start writing an application without much fear that I'd have to go back and redo things because the API has changed. ...

(NOTE: When I first started this post, I was working off of the 1.0.0-beta.10 version of Angular CLI, the version prior to the version where the CLI was refactored to use Webpack instead of SystemJS, on or around 8/2/2016.  So it's probably only useful for folks who haven't started using the Webpack version of the CLI yet) As of version 1.0.0-beta....

I realized today that the latest update (version 2016.2) for my IDE of choice - IntelliJ IDEA (Ultimate version) - includes additional support for Angular 2: A collection of live templates for Angular 2 files such as components and services. A better understanding of template syntax. The ability to create a new IntelliJ project via the Angular CLI...

While I was exploring the current Angular 2 documentation regarding forms and form field validity, I caught myself wondering why the Angular code wouldn't block or complain about an attempt to assign an incorrect data type value to an object property.  Given the following TypeScript object: export class Villain { id: number; name: string; ag...

The final lesson of the Tour of Heroes tutorial covers using Angular 2 with HTTP. It starts off with what seems to be a bit of a contradiction:  it shows how to add the set of HTTP services to the application via the bootstrap invocation in main.ts (following the pattern set to add the router), but then makes a point of mentioning that usually appl...

The next lesson in the Tour of Heroes tutorial covers an important topic: routing.  I've been looking forward to this particular lesson because I was curious as to how routing would work given the new component-structured architecture. The first step of the lesson involves renaming the current AppComponent to HeroesComponent (renaming the file, ren...

Lesson 5 of the Tour of Heroes tutorial introduces services. On a recent episode of the Adventures in Angular podcast, guest Pascal Precht made the recommendation that developers should get in the habit of always applying the @Injectable decorator to a service. The reason behind that recommendation is because the decorators (@Component, @Injectable...

This lesson starts off with creating a new component and a separate Hero class file which is then imported into both of the current components: import { Hero } from './hero'; Worth noting that './' is relative path syntax that indicates that the file we're importing from lives in the same directory as the current file.   The manner of embedding t...

Building on the lesson 2 coding exercises in the Tour of Heroes tutorial, the next lesson involves displaying a list of Hero objects. The "*ngFor" syntax is obviously a departure from the "ng-repeat" syntax of Angular 1.  Less obvious is the fact that now the iteration syntax includes a standard variable declaration ("let").  Leave it off and you g...

Now that I've gone through the official Angular 2 quick start tutorial, it's time to start the longer "Tour of Heroes" tutorial, starting with lesson 2 (lesson 1 is just an overview of what will be covered in the entire tutorial). Decided to start with a fresh IntelliJ project in a new "angular-io-tourofheroes" directory. I set up the same way as I...

I'm starting my Angular 2 journey with the official quick start guide on the Angular 2 website, https://angular.io/.  I'm going to use the TypeScript version of the quick start guide, since I plan on coding Angular 2 with TypeScript.   I already have Node installed on my Mac laptop via nvm (Node Version Manager), so that's taken care of. I want to ...

When I'm observing a multi-step process during a debugging exercise, I often take screenshots at each breakpoint.  It gives me a record of the data values and behavior at particular points in the process, sometimes recording something I didn't realize I needed to pay attention to until after the fact. On Windows computers, I use the freeware applic...

I'm pleased to announce the release of my new open-source project, ncline. ncline stands for "Node Command Line", and it's a platform for writing Node-powered JavaScript functions ("commands") that can be executed from a command line interface. When you launch ncline, it loops through the collections of module folders within the master "cmdModules...

When writing unit tests for Node.js applications, you can use the proxyquire npm module to override the modules pulled in by the file under test using require(), replacing them with your own.  So say your file containing the methods you want to test pulls in two other modules using require: //underTest.js var moduleA = require( './moduleA' ); var ...

(UPDATE: While the technique described here enables CORS for GET requests and non-preflighted POST requests, it does not work for the typical POST requests involving JSON used in Angular.  A better solution is the servlet filter posted by the author of the CORS plugin for Grails 2.x, David Tinker, found here: https://github.com/davidtinker/grails-c...

Recently I've been playing around with the current beta distribution (0.8.3) of Angular Material Design: a set of Angular modules and resources that apply the "Material Design" style and behaviors used in Android 5.0 to an Angular website. One of the services added by the Angular Material modules is the $mdToast service,  which provides an easy way...

In Angular 1.x, the run() method of a module behaves similar to the main method or constructor method concept found in other languages:  it's a method that runs as soon as all of the dependencies have been resovled and the module has been configured. Because of this, even if you use run() to execute a named method that can be called separately in y...

Suppose for a moment that you have an AngularJS single-page application, one with view routes managed with then ngRoute module, that is used by users with different roles.  A user in your company's Sales group has access to certain areas of the application, while a user in Accounting works in other parts of the application.  And there are also some...

Sometimes projects take on a life of their own, and you end up with something unexpected. I set out to create an template for CRUD-focused single page AngularJS web applications, something I and perhaps my colleagues could use as a foundation for writing new applications.  But under the momentum of self-applied scope creep, what I ended up creating...