Tag Archives: AngularJS

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

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

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

Ionic and UI Router

Building iOS App with Ionic – Part 2 (Nested States)

Click Here for TL;DR

Part 2 of this series were going to talk about nested states. Specifically states nested deeper than two levels.

UI Router

Ionic uses Ui Router to handle all of it’s routing and state change.  Ionic uses many  directive throughout it’s framework to add functionality or mimic functionality of angular directives.  Ionic uses ion-nav-view to replace UI Routers ui-view and add additional functionality. From their site:

The ion-nav-view is our container. Ionic’s router will look for this directive throughout our code to insert templates. ion-nav-view supports inheritance, named views, and other features that we will discuss in depth throughout this series.

Note: If you’re familiar with angular-ui-router, ion-nav-view is equivalent to ui-view. On top of that, ion-nav-view provides for animations, history, and more.

Continue reading

Geolocation and Ionic

Building iOS App with Ionic – Part 1 (Geolocation)

Click Here for TL;DR

I am just about finished building my first *complete* mobile application with the Ionic Framework.  There were several things I got hung up on and found useful solutions too after doing some research.  Some of the answers were on the Ionic website while some were buried on the web.  The first post will be in regards to geolocation.

Geolocation:

Continue reading

Lazy Load with RequireJS and AngularJS

Lazy Load Angular Components with RequireJS

Lazy Loading in Angular and Integrating AMDs

Click Here for TL;DR

Angular’s Dependency Injection

Dependency injection (DI) as defined by Angular… DI in Angular allows you to use modules, services, controllers, directives, and filters that can depend on one another to operate.

By $injecting these dependencies into each other they can reference each others public APIs and operate accordingly.  This concept of DI loads all files upfront so that they are available for use whenever necessary (which may be never for certain use cases).

Require JS

From RequireJS site: “RequireJS is a JavaScript file and module loader. ” RequireJS has two main functionalities. Continue reading