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
    };
}]);

// 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);
}]);

// 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: <input ng-model="$ctrl.state.foo">'
});
myApp.component('c2', {
  controller: ['myService', function(myService) {
    this.state = myService.getState();
  }],
  template: 'C2: <input ng-model="$ctrl.state.foo">'
});

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
        }
    }
}

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'
    });

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'
    })
;

.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"]
            }
          );
        }]
    }
});

// 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'
});

// 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'
});