Category Archives: AngularJS

Event Binding in Angular 2

Event Binding in Angular 2

No TL;DR Required 🙂

In my previous post I mentioned some of the many differences in Angular 2 from what we have grown used to in Angular 1.x. We covered property binding and how Angular is now binding directly to the DOM Object’s properties, and as a result of this we have been able to get rid of dozens of directives that come out of the box with Angular 1.x.

Some examples of directives we gave were ngShow, ngHref, etc. These old attribute directives were examples of one way and two way binding in Angular 1.x. In Angular 1.x we also have method binding. For this post we will focus on ngClick. In Angular 1.x ngClick is used to associate a function with an event on a DOM element. Continue reading

Property Binding in Angular 2

Property Binding in Angular 2

NO TL;DR Required 🙂

Property Binding in Angular 2 Explained

Angular 2 is full of drastic changes from what Angular 1.x developers have come to know. Fortunately the guys over at Google have put a lot of thought into this and all these changes seem to have very intelligent reasons behind them. The first change I want to talk about and probably the most easy to grasp is Property Binding in Angular 2.

Angular 1.x is filled with out of the box directives that manipulate DOM elements. Some of these you may be familiar with are ngDisable, ngShow, ngHide, ngClass, ngChecked, ngHref, and so on…

By including these attribute directives in your DOM element you can bind to those attributes, gather information, and set information accordingly. What the Angular Team at Google has done with Angular 2 is bind to the elements properties rather than the elements attributes. Continue reading

using-promises-in-angularjs

Using Promises in AngularJS

Click here for TL;DR

As I am learning some of the new features of ES6 it has gotten me thinking about how we are currently using them is ES5. Specifically Promises. Using Promises in ES5 has been made possible by several libraries out there. Most known would be the q library by Kris Kowal. Because of my love for, and general focus on, Angular I want to talk a little about the $q Service and using Promises in AngularJS.

Using Promises in AngularJS

It is important to note that Angular’s $q Service does not actually contain Kris Kowal’s q library. However like Kris’s library it allows us to write Promises in ES5. I have seen Promises used in Angular many different ways. I wanted to touch upon how I use them and why.

What is a Promise

Many would think of a Promise as replacement for callback functions. While this is true to some extent I think this is an unfair over simplification of the power Promises really give to JavaScript developers. Continue reading

submitting a new directive to angular js

Submitting a New Directive to Angular

Click here for TL;DR

Recently I embarked on the task of submitting a new directive to angular js. I am involved in several open source projects and am familiar with the process of contributing but I wasn’t ready for the carefully contstructed contribution process to Angular. I thought I’d get out a quick post about some trouble I ran into and how I solved it.

**This is up to date for angular.js repo as of June 17th 2015**

Submitting A New Directive to Angular

First things first. Continue reading

Twitter API with JavaScript

Twitter API with JavaScript

Click Here for TL;DR

Recently I needed to use Twitter’s REST API for a project. I was building a web app with JavaScript using AngularJS framework. I am not a back end developer so my projects end up using a combination of BaaS (Back End As A Service) software like Firebase and utilizing node.js environment. So my question was “How do I use the Twitter API with JavaScript?”

Using Twitter API with JavaScript

On Twitter’s website they list some libraries for leveraging their API. Under javascript/node you can find @BoyCook’s Twitter JS Client. This is a useful library for using node.js to access Twitter’s API. What I wanted to do was walk you through setting up your node/express environment to utilize BoyCook’s Twitter JS Client so that you can access Twitter’s API effortlessly with your client side application.
Continue reading

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

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

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

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