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
https://docs.angularjs.org/guide/component-router

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

angular_router_installation_banner

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">
     <div 
       class="box" 
       data-ng-click="boxClick(100)" 
       data-mm-box="200"
       data-fade-duration="300">
     </div>
  </div>
</div>

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) {
      this.doBoxClick(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); 
         elem.fadeOut(duration);
      }
    } 
  }
});

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

  • http://jsfiddle.net/
  • http://jsbin.com/
  • http://jsdo.it/
  • http://plunker.no.de/
  • http://dabblet.com/
  • https://thimble.webmaker.org
  • http://fiddlesalad.com/
  • http://www.webdevout.net/
  • http://codepen.io/

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() {
	doStuff..
}, 100)

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

(function() {
	
	doStuff..

	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() {
	
	doStuff..

	setTimeout(blah, 100)
})();

GIT learning resources

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

Roundups
– Git Roundup by @kevinSuttle http://answers.oreilly.com/topic/801-how-to-learn-git-a-link-roundup/

Walkthroughs
– Git, the Simple Guide http://rogerdudler.github.com/git-guide/
– Gitimmersion http://gitimmersion.com/
– Github’s help documents http://help.github.com/
– Let’s suck at Github together by +Chris Coyier http://css-tricks.com/video-screencasts/101-lets-suck-at-github-together/
– Git for Designers http://hoth.entp.com/output/git_for_designers.html
– Think Like a Git http://think-like-a-git.net/ via +Ryan Anklam

eBooks
– Pro Git http://progit.org/book/
– Git from the Ground Up http://ftp.newartisans.com/pub/git.from.bottom.up.pdf
– Getting Good with Git http://rockablepress.com/books/getting-good-with-git via +Paul de Wouters

References
– Gitref http://gitref.org/
– Github’s help documents http://help.github.com/

Articles
– A Successful Git Branching Model http://nvie.com/posts/a-successful-git-branching-model/

Clients
– Git Tower http://www.git-tower.com/
– Git Box http://www.gitboxapp.com/

Training
– Online Github Training https://github.com/training/free

Originally posted here: https://plus.google.com/103751101313992876152/posts/XRT3CsuwBTo