AngularJS 1.5: component router with NPM

The new angular component router is changing quickly.

The current docs on angular which can be found here seems to be outdated

The documentation ask for the following
npm install @angular/router –save

As of April 2016, the way to install the new angular component router using NPM is
npm install @angular/router@0.2.0 --save


Once installed, include it in your script
<script src="/node_modules/@angular/router/angular1/angular_1_router.js">

AngularJS: DOM manipulation the angular way.

At first, when trying to manipulate a DOM with jQuery, you are tempted to do it in the controller. That is highly discouraged to enforce the concept of declarative approach.

Here is a very simple concept of DOM manipulation in AngularJS.
For example, say we have a box, and on click we want to fade it out.
The html would look like this (including 3 ways to pass in value):

<div ng-app="myApp">
  <div ng-controller="MyCtrl">

simple css:

.box {
  width: 100px;
  height: 100px;
  background-color: red;

And the javascript:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.boxClick = function(value) {

myApp.directive("mmBox", function() {
  return {
    link: function(scope, elem, attrs) {
      var duration = parseInt(attrs.mmBox);
       scope.doBoxClick = function(value) {
         console.log("1. " + value);
         console.log("2. " + attrs.mmBox);
         console.log("3. " + attrs.fadeDuration); 

Notice I put in two other ways to pass in values so the directive is not hard coded to any value and can be reused.

List of all the HTML/Javascript/CSS online app


I think that is it.

Javascript: A better alternative to setInterval

setInterval can be bad js because of its nature to continuously get called rather the methods inside is lagging or not.

setInterval(function() {
}, 100)

A better approach is to use a self executing anonymous function.

(function() {

	setTimeout(arguments.callee, 100)

The only problem is that arguments.callee is deprecated so a work around is to name the anonymous function.

(function blah() {

	setTimeout(blah, 100)

GIT learning resources

Still using SVN? It’s time to switch to GIT. Here is a round up of resources:

– Git Roundup by @kevinSuttle

– Git, the Simple Guide
– Gitimmersion
– Github’s help documents
– Let’s suck at Github together by +Chris Coyier
– Git for Designers
– Think Like a Git via +Ryan Anklam

– Pro Git
– Git from the Ground Up
– Getting Good with Git via +Paul de Wouters

– Gitref
– Github’s help documents

– A Successful Git Branching Model

– Git Tower
– Git Box

– Online Github Training

Originally posted here: