Defining Angular Components

We should have only one Angular Component per file, and it should look like this:

'use strict';
(function() {

  angular.module('zeppelinWebApp').controller('HomeCtrl', HomeCtrl);

  function HomeCtrl($location) {



  • The component function and the component's dependency injection are separated from the component definition
  • We apply an Immediately Invoked Function Expression (IIFE) to each component, You can learn more about it in this nice post of John Papa.