April 14, 2017 by Christopher Sherman
The resolve property of UI Router’s state definition delays changing state until data is loaded. This allows us to avoid entering states for which we don’t have necessary data, as well as prevents views from rendering in an unpredictable fashion when asynchronous requests finish at different times.
April 13, 2017 by Christopher Sherman
Requests made with the AngularJS $http service execute asynchronously. In certain situations, we may want to avoid executing the request’s success callback function and effectively cancel the request.
In the $http service docs, you’ll find a timeout configuration property. According to the docs, this property represents a “timeout in milliseconds, or promise that should abort the request when resolved.”
March 28, 2017 by Christopher Sherman
Create a new Angular CLI project with the SASS style option:ng new my-foundation-app --style=sass
cd my-foundation-app
March 21, 2017 by Christopher Sherman
Create a new Angular CLI project with the SASS style option:
ng new my-app --style=sass
cd my-appMarch 14, 2017 by Christopher 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": [
"assets",
"favicon.ico",
"404.html",
"CNAME"
]/dist directory of the project when it builds. Angular CLI deletes all unknown files from the /dist directory each time it builds.March 7, 2017 by Christopher 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 http://dcvolunteer.com/opportunities/habitat-for-humanity will search for a habitat-for-humanity.html file located within the opportunities directory.
February 28, 2017 by Christopher 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>.github.io
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
February 22, 2017 by Christopher 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.
December 12, 2016 by Christopher 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.
December 6, 2016 by Christopher 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.