Technology tidbits

Deploy an Angular CLI Application to Github Pages with a Custom Domain

March 14, 2017 by Chris Sherman

This is part three of a three part series on deploying Angular CLI applications to Github Pages.

In the angular-cli.json file, modify the assets object to look like the following:

"assets": [
This configuration tells angular-cli to copy these files to the /dist directory of the project when it builds. Angular CLI deletes all unknown files from the /dist directory each time it builds.

Continue reading

Fix 404 Errors from Angular Projects Hosted on Github Pages

March 7, 2017 by Chris Sherman

This is part two of a three part series on deploying Angular CLI projects to Github Pages. To view part one, visit deploy an Angular project to Github Pages.

If you deploy an Angular project to Github Pages, you may notice that refreshing or navigating directly to a view other than the base domain redirects you to Github’s 404.html page. This is somewhat unavoidable since Github Pages is simply looking for a directory with a corresponding HTML file. For example, a request to will search for a habitat-for-humanity.html file located within the opportunities directory.

Continue reading

Deploy an Angular CLI Application to Github Pages

February 28, 2017 by Chris Sherman

To follow this tutorial, you will need to generate an Angular CLI project.

You will also need to create a Github repository with the following naming convention: <your-github-username>

Once you create the repository, in the root of your project, configure the existing application to point to the new repository: git remote add origin ssh://[email protected]/<your-username>/<your-github-repository>.git

Continue reading

Angular NgPlural Directive for Localization

February 22, 2017 by Chris Sherman

The Angular ngPlural directive adds or removes DOM templates based on a numeric value. It comes in handy when you’re doing localization (l10n) to adapt your content to meet the language and cultural requirements of a specific market.

When you want to use the plural rules, enter the plural category in the ngPluralCase directive. When you want an exact match, such as “4” in the example below, use the equal sign before the value in the ngPluralCase directive.

Continue reading

Wait for Data Before Rendering Views in Angular 2

December 12, 2016 by Chris Sherman

When you have an Angular view that combines static elements, such as a navigation bar and footer, with dynamic elements that depend on data from an HTTP request, the browser will initially render only the static elements. Since we don’t want to display a blank dynamic component while waiting for the HTTP request, we can pre-fetch the data prior to activating the route. In Angular 2, you accomplish this using the Resolve guard.

Continue reading

AngularJS AJAX Validation

December 6, 2016 by Chris Sherman

Sometimes client-side validation needs information from a datastore to determine whether input is valid. For instance, you may want to check if a username is already taken. To do this in an Angular application, we can use a custom directive along with the $http service to validate user input on the fly.

To get started, create a directive, naming it something that will allow you to easily identify its use in HTML markup. We’ll wrap the directive in an immediately-invoked function expression (IIFE) to make sure we don’t accidentally leak any variables into the global scope.

Continue reading

CSRF Protection with AngularJS and Spring

May 18, 2016 by Chris Sherman

Spring Framework, and other web application frameworks like it, comes with Cross-Site Request Forgery (CSRF) protection built-in and enabled by default. However, many tutorials assume that you will be performing a full post-back for each request, thereby allowing the CSRF token to be included in a hidden metadata attribute on the view.

Continue reading

Bootstrap Modal with AngularJS

September 22, 2015 by Chris Sherman

To use demonstrate using the Bootstrap frameworks’s modal component within an AngularJS project, we’ll create a custom directive for editing text properties throughout an application. This example makes use the modal.js file that is part of the core Bootstrap framework.

In the directive below, you’ll notice we restrict the directive to being instantiated as an attribute only. This provides us with a nice hook on the element upon which the attribute appears. We take advantage of this hook within the link property at the bottom of the directive. Access to the element enables us to add a dismiss function to the directive’s scope, which hides the modal.

Continue reading

Sticky Foundation Alert Elements

March 11, 2015 by Chris Sherman

Zurb’s Foundation front-end framework comes with built-in alert elements you can drop into a page, but my guess is you’ll want to make them sticky (fixed to the top of the view). To accomplish this behavior, we just need to add a bit of CSS.

Continue reading

Integrate Foundation Abide Validation with Razor HTML Helpers

March 10, 2015 by Chris Sherman

Razor HTML Helpers are convenient methods that return HTML strings representing different types of content. In this tutorial I’ll explain how to extend the Razor validation message helper so it integrates with Foundation’s Abide Validation library.

Continue reading