Access HTTP Response Headers

Access HTTP Response Headers – AngularJS

Learn to Access HTTP Response Headers In Your AngularJS $http Request

Having been playing around with Angular for over 2 years, I found myself recently – for the first time – needing to access HTTP response headers in the success callback of my Angular $http request.

Looking around I found very little documentation on this so I thought I would write a short article.

First let’s look at a typical $http request:
Continue reading

Bower Installer

Bower Installer

Click Here for TL;DR

Using Bower Installer in Your Build Process

I am currently working on an enterprise application that, it goes without saying, is very large. I rely heavily on bower to install my dependencies that I use throughout the application. I would say that we are about 5% done with the application and already our bower.json file has 20 dependencies (not to mention the dependencies those dependencies download…). Continue reading

Ionic Push Notifications

Ionic Push Notifications with iOS

Click Here for TL;DR

Learning Ionic Push Notifications

Okay so my latest hurdle I had to jump with Ionic Framework – Ionic Push Notifications with iOS.

Below are the steps I ended up taking to successfully set up Push Notifications.

An important note is that I am only working up to successfully returning a registration token. I am using Amazon’s SNS to manage my push notifications so I will not be going into generating and sending notifications.

Another important note is that push notifications are not currently supported in the iPhone emulator. You will need to run the application build on your actual device which requires an Apple Developer’s License.

Step 1
Continue reading

API Helper with Angular and RESTful APIs

API Helper – Connecting with RESTful APIs

Click Here for TL;DR

API Helper with AngularJS and RESTful Endpoints

Okay our short break from new posts is over! With this post I want to talk about integrating your AngularJS SPA with RESTful APIs and best practices.

RESTful APIs

For a quick overview on RESTful APIs. Perhaps you have been involved in a project or working on one alone where integration with the back-end of your app is done via endpoints. Angular offers the $httpProvider which allows you to easily make XHR requests and handle success and error callbacks. Click here for more on Angular’s $httpProvider.
Continue reading

bower

Bower, an Introduction

Click Here for TL;DR

Understanding Bower

Modularity in code is great for a number of reasons:

  1. less work (someone else did it for you)
  2. tested for more use cases than you can think of on your own (might not seem important until your user base goes up)
  3. update easily
  4. reasons

Humans and computers are good at different tasks. So while you as a human will still need to hunt down _which_ module will work best, there are machine tools to do the well-defined, rote work of getting modules into your project. Enter bower. Continue reading

famo.us and angular

Creating Beautiful Animations with Famo.us-AngularJS

Click Here for TL;DR
Click here to see completed ng-famous boilerplate.

Famo.us and AngularJS

Today we will be Creating Beautiful Animations with Famo.us-AngularJS Using ng-repeat. Yeah, the title doesn’t exactly roll off the tongue. If you are a Javascript fanboy, there is a good chance that you have heard of Famo.us and Famo.us-AngularJS (can we just call this ng-famous for now on!? Yeah, I’m going to do that..). If you haven’t, prepared to be learned. Here is the Famo.us elevator pitch: 

Famo.us is a free, open source JavaScript framework that helps you create smooth, complex UIs for any screen.

What does this mean? It means Famo.us is a front-end rendering library that allows you to create animated UI’s that are both beautiful and wicked fast (like 60 fps fast) that can move on all 3 axis! And if there is latency it handles it well, and interpolates instead of lags behind. So now that we have Famo.us for rendering our front-end, we still need a modular architecture for our code and maybe a solution that’s a little less opaque to the feign of heart. Continue reading

gulp-less

Gulp LESS Fails Silently – Add Some Logging

Click Here for TL;DR

Gulp LESS Nightmare (due to operator error)

I recently wrote a post about GulpJS and all of it’s awesomeness. Almost immediately following that post I spent several hours pulling my hair out because I couldn’t figure out why my Gulp LESS task wasn’t working. So I did the research and suffered through the misery so you don’t have to 😉

Let Me Set Up Our Environment For My Failing Gulp LESS Task Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp     = require('gulp'),
    notify   = require('gulp-notify'),
    less     = require('gulp-less'),
    paths    = {
        less : ['app/less/*.less']
    };

gulp.task('less', function() {
    return gulp.src(paths.less)
        .pipe(less())
        .pipe(concat('master.css'))
        .pipe(gulp.dest('app/build/css'))
        .pipe(notify({ message: 'Finished LESS Gulp Tasks'}));
});

Continue reading

Disable Debug Data

Disabling Debug Data in Angular

Click Here for TL;DR

Like most frameworks out there Angular has certain methods/procedures for getting your application ready for production. Some of those methods include Strict Dependency Injection Mode, Disabling Debug Data, and more. On this post we will focus on Disabling Debug Data.

Disabling Debug Data

“By default AngularJS attaches information about scopes to DOM nodes, and adds CSS classes to data-bound elements.”

You may noticed while viewing the source of your web app built with Angular that many of your DOM elements have the class ng-scope added to them. This is something Angular does when the compiler creates a new scope by either ngBind or double mustache interpolation {{.....}} Below is an example of a portion of the DOM tree from an angular application. Continue reading

GulpJS

GulpJS Setup and Configuration

Click Here for TL;DR

GulpJS is a Task/Build Runner. For more information on GulpJS you can visit there website. GulpJS is different from other solutions out there (i.e. Grunt) for several reasons. I’m going to touch on some of those reasons and show some example gulpjs files below:

Streaming Through Pipes

Gulp uses node streams. In a quick way, what this means and the benefit to us is that we can pass data straight from one task to another. This is one way in which GulpJS differs from another task runner like Grunt.

Lets say, for example, you want to concat and then minify some javascript files. To do this with grunt you needs to concat all your files into a new file (lets say contact.js) and then minify that file to a new file (lets say minify.js). When this process is done you have a leftover file that was written to disk (concat.js) that you must now go and delete.
Continue reading

Angular Breadcrumbs

Breadcrumbs in Angular

Click Here for TL;DR

Breadcrumbs are a trail of history of your navigation through something. In our example, a single page web app. I have started creating a breadcrumb module anyone can use in there angular application. It is still a work in progress so feel free to tear it apart with criticism! I’d love to hear everyones thoughts and make it better.

This module is for Angular applications that use uiRouter. A version for ngRoute is coming soon!

You can find the Git Repo Here.
Continue reading