Category: AngularJS

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

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

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.