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.