AngularJS Cheat Sheet

Paul Sterl — Fri, 23 Jun 2017 04:26:07 +0000

Create vs. Get AngularJS application

The module dependency array tells AngularJS to create an app, otherwise to load it:

Create myApp	`var app = angular.module('myApp', []);`
Get myApp	`var app = angular.module('myApp');`

Binding

@ Text binding, expressions are supported using {{ }}
= Two-way binding
& Method binding
< One-way binding (usually for components)
? for an optional binding e.g. @? for an optional string binding

Service, Factory, Provider, Value & Controller

AngularJS Doc

A Service is a singleton instance of a custom object. In can be used to share state or usually to wrap the remote REST API in a reuseable faction. It is injected using the name (review sample).
Basically simple AngularJs beans we want to inject later.

angular.module('myApp').service('myServiceName', ['depedency', function(depedency) {
    var privateState = {foo: 'bar'}; // this will be shared between any we inject this service
    this.publicApi = function(newConfig) {
        return privateState.foo; // shared singleton state
    };
}]);

The Factory follows as the name already tells the factory pattern and so allows us to construct either a complex value we want to inject into our controllers or even already existing JS objects which require any dependencies upfront. Basically wrap beans which need a constructor injection (review sample).

// any bean
function myService($log) {
  this.log = $log;
}
myService.prototype.getState = function() {
  return this.state; // still shared if we like
}
//-- AngularJS starts here
// construct the bean and inject what is needed
angular.module('myApp', []).factory(
    'myServiceFactory', ['$log', function($log) {
  // here is the main difference to service,
  // manually call new
  return new myService($log);
}]);

Provider

A Provider is the base for factory and service and has the biggest flexibility. Most important it can be injected into the config method and so configured before the first usage (review sample).

// my service / or just bean
function myService($log, initValue) {
  this.log = $log;
  this.state = {
    foo: initValue || 'Default state'
  };
  $log.info('Service Constructor called ...');
}
myService.prototype.getState = function() {
  this.log.info('getState called ...');
  return this.state;
}

// create angular myApp
var myApp = angular.module('myApp', []);
// register the provider providing our service
// function name is here only to how that this is the provider
myApp.provider('myService', function myServiceProvider() {
  // config area
  var providerState;
  this.config = function(newState) {
  	providerState = newState;
  };
  // constructor like in factory
  // again the name only indicates that here is where the factory function goes...
  this.$get = ['$log', function myServiceFactory($log) {
  	return new myService($log, providerState);
  }] 
});
// configure the provider / service
myApp.config(['myServiceProvider', function (myServiceProvider) {
	console.info('config:', myServiceProvider);
  myServiceProvider.config('configured state');
}]);
// just use it
myApp.component('c1', {
  controller: ['myService', function(myService) {
    this.state = myService.getState();
  }],
  template: 'C1: '
});
myApp.component('c2', {
  controller: ['myService', function(myService) {
    this.state = myService.getState();
  }],
  template: 'C2: '
});

A Value is a simple object, int or string we want to make available for injection

HTML elements in AngularJS

Access HTML element Directive

The easiest way is just to use the link method:

angular.module('myApp).directive('myDirective', function () {
    return {
        restrict: 'A',
        replace : false,
        // scope, the element and the attributes
        link: function ($scope, element, attr) {
            // controller not needed if we have no public API
        }
    }
}

Access HTML element in Component

In a component we can just inject the $element.

jsui.component('myComponent', {
        // first we can always inject the element of the component
        controller: ['$element', function ($element) {
            var subEl  = $element.find('.any-class'), // optional search by class
                rawDomEl = subEl[0]; // get the raw DOM element

            });
        }],
        templateUrl: 'app/myTemplate.html'
    });

Access raw HTML element

As you can see in the last example we can access the raw DOM element using [0] on the wrapped element.

Restrict in Angular Directive

The restrict option is typically set to:

'A' – only matches attribute name
'E' – only matches element name
'C' – only matches class name
'M' – only matches comment

These restrictions can all be combined as needed:

'AEC' – matches either attribute or element or class name

URL Routing to AngularJS components

app.config(['$urlRouterProvider', '$stateProvider',
    function($urlRouterProvider, $stateProvider) {
            
        $urlRouterProvider.otherwise('/home');
            .state('home', {
                url: '/home',
                component: 'homeComponent'
            })
    })
    // this could be in an own file
    .component('homeComponent', {
        controller: function () {
            // this.title is available
            console.info("homeComponent loaded ...");
        },
        templateUrl: 'home/home.html'
    })
;

ocLazyLoad angular components during routing

As the lifecycle of components is a bit different we have to eager load them using ocLazyLoad:

.state('home', {
    url: '/home',
    component: 'homeComponent',
    resolvePolicy: { deps: { when: "EAGER" } }, // LOAD EAGERLY
    resolve: {
        deps: ['$ocLazyLoad', function ($ocLazyLoad) {
          return $ocLazyLoad.load(
            { // best to store it static somewhere if needed more than once ...
              name: "lazyHome",
              files: ["home/homeComponent.js"]
            }
          );
        }]
    }
});

Access URL parameters

The easiest way to access the URL params is just to inject $stateParams into the component get read it. A bit cleaner is using the resolve of the state to inject the parameters into the component. As so we have to keep in mind that happens async, which means we have to implement the $onInit method to get hold of the injected values into our component. More to components.

// given this state router we want to pass the vin to our component
.state('app.vehicle', {
    url: '/vehicle/:vin',
    component: 'vehicleComponent',
    // pass the vin from the URL to the component
    resolve: { 
        // could have the same name
        vehicleId: function($stateParams) { return $stateParams.vin; }
   }
})

// component using the VIN, here string binding
app.component('vehicleComponent', {
    bindings: {
        vehicleId: '@'
    },
    // we could access state passing here function($stateParams) 
    // and later with $stateParams.vin, which would couple URL id to components
    // and so we should better inject it ...
    controller: function () { 
        // async called INIT method vinComponent is set
        this.$onInit = function() {
            console.info(this.vehicleId);
        };
        // this is most likely not defined, as the resolve happens async
        console.info(this.vehicleId);
    },
    templateUrl: 'vehicle.html'
});

Dynamic ncyBreadcrumb label for AngularJS Components

Accessing just the $scope doesn’t always work well during the reload of the page furthermore, it doesn’t work for components anyhow. The easiest way is just to inject the $breadcrumb service and be done with it:

// state definition
.state('app.customer', {
    url: '/customer/:customerId',
    component: 'customer',
    ncyBreadcrumb: {
        parent: 'app.customers',
        label: '{{ pageLabel || "New Customer" }}'
    }
});

// in the component just assign the label attribute in the ncyBreadcrumb
angular.module('myApp').component('customer', {
    bindings: {
        customerId: '@'
    },
    controller: ['$breadcrumb', function ($breadcrumb) {
        // set the page label
        $breadcrumb.$getLastViewScope().pageLabel = "my page label";

    }],
    templateUrl: 'customer.html'
});

JavaScript Module Pattern or Just Private Variables

Paul Sterl — Sat, 11 Jul 2015 14:14:01 +0000

JavaScript is a wonderful language to get thinks fundamentally wrong from the start. As so where are many patters around to help us to avoid some of these challenges ;-).

The module pattern is one of the most known and used. It helps us to create private variables or better to avoid side effects in a larger JS application between the different JS files we load or frameworks we use.

The problem

Overall the problem is that in JavaScript everything is more or less public. Currently, most frameworks register their name in the Global space, also known as the window Object. You know them as angular or just $ or maybe even as Y.

Imagine the following code (jsBin):

// first JS file
var CLASS_NAME = "A1";
function A1() {}
A1.prototype.sayHallo = function() {
  $('#out').html(CLASS_NAME + ": says hallo!");
};

// second class in a different JS file
var CLASS_NAME = "B1";
function B1() {}
B1.prototype.sayHallo = function() {
  $('#out').html(CLASS_NAME + ": says hallo!");
};

// some code
$('#cmdA1').click(function() {
  new A1().sayHallo();
});
$('#cmdB1').click(function() {
  new B1().sayHallo();
});

It doesn’t matter which button you press the result will always be B1 because we have overwritten the value in CLASS_NAME in the second part.

Even if this sample is somehow of course constructed, this problem can easily happen in a larger JS application. We must take this into account an protect ourself.

The solution

The solution is pretty straight forward. We just wrap our class definition into an anonymous function. This does not only protect us but it allows us to create really private variables in JS which can’t be overwritten from outside — we can protect the access to them with functions.

jsBin again

// first JS file
MyGlobal = {};
(function($) {
  var CLASS_NAME = "A1";
  function A1() {}
  A1.prototype.sayHallo = function() {
    $('#out').html(CLASS_NAME + ": says hallo!");
  };
  MyGlobal.A1 = A1;
})(window.$); // pass any global scope

// second class in a different JS file
(function($) {
  var CLASS_NAME = "B1";
  function B1() {}
  B1.prototype.sayHallo = function() {
    $('#out').html(CLASS_NAME + ": says hallo!");
  };
  MyGlobal.B1 = B1;
})(window.$);

// some code
$('#cmdA1').click(function() {
  new MyGlobal.A1().sayHallo();
});
$('#cmdB1').click(function() {
  new MyGlobal.B1().sayHallo();
});

What have we learned?

In JavaScript, the best practice is to wrap our code into anonymous functions
Define one global scope variable which we use to register all our classes (here MyGlobal)
Anonymous function also allow us to create private/ protected variables

JavaScript – Pauls Blog