kibana angular examples

directive.js

import uiModules from 'ui/modules';
import template from './component.html';

const app = uiModules.get('kibana');

app.directive('component', function () {
  return {
    restrict: 'E',
    replace: true,
    template: template,
    scope: { // like react props
      atrribute1: '=',
      atrribute2: '=',
    },
    controllerAs: 'component',
    bindToController: true,
    controller: class NoItemsController {
      constructor($scope) { // kind of like componentWillMount
        this.atrribute1 = this.atrribute1 || 'default value';
        this.atrribute2 = this.atrribute2 || 'another default value';

        // basically what react does automatically, watch for prop changes
        $scope.$watchMulti([ 
          'component.attribute1',
          'component.attribute2',
        ], this.updateComponent)
      }

      updateComponent() { 
        // called with any attributes in the watchMulti change
        // this.xxx will be the updated value of the prop
      }
    }
  };
});

why_use_injector.js

// angular docs and many styleguides recommend this, because it's safe to
// minimize and obfustacted the names of the things you are importing. it 
// also provides you with a nice list of dependencies at the top

// there are other patterns, but they are much more obscure....

const modules = [
  'Private', 
  '$rootScope', 
  '$location',
  'PersistentState',
];

function AppStateProvider(Private, $rootScope, $location, PersistentState, modules) {
  ...
}

// ---------------------------------------------------

// the problem with the above is that you're repeating your dependencies twice,
// and the list of DI arguments gets really large very quickly

// we use the shorter form to combat the length, but it can't be obfustacted, 
// and the only form of list for depencies is in the function arguments

function AppStateProvider(Private, $rootScope, $location, PersistentState) {
  ...
}

// ---------------------------------------------------

// both of these start to get confusing when you mix them with non-angular
// imports, since your code now contains dependencies that are injected
// and dependencies that are simply imported

// also, for people new to angular, it's not clear how the DI even works,
// so it's just another layer of confusion

import _ from 'lodash';
import modules from 'ui/modules';
import StateManagementStateProvider from 'ui/state_management/state';
import 'ui/persisted_state';

function AppStateProvider(Private, $rootScope, $location, PersistentState) {
  ...
}

// ---------------------------------------------------

// by using the $injector, you it's more apparent that it's an angular thing
// because of the leading $, you get a clear list of angular dependencies,
// the code is safe from obfuscation, and it's more clear that things are 
// being "injected" so there's less apparent magic in the code

// it also paves the way to the removal of Private, without changing the
// pattern too drastically

import _ from 'lodash';
import modules from 'ui/modules';
import StateManagementStateProvider from 'ui/state_management/state';
import 'ui/persisted_state';

function AppStateProvider($injector) {
  const Private = $injector.get('Private');
  const $rootScope = $injector.get('$rootScope');
  const $location = $injector.get('$location');
  const PersistentState = $injector.get('PersistentState');
}

// now, if you have a module that previously was "nameless" and required
// Private, you can simply turn it into a proper angular module, give it
// a name, and replace the Private call with $injector.get, and nothing
// else changes...

// before
import { PersistentStateProvider } from 'ui/persisted_state';

const PersistentState = Private(PersistentStateProvider); // weird naming goes away too
const state = new PersistentState();

//  after
import 'ui/persisted_state';

const PersistentState = $injector.get('PersistentState');
const state = new PersistentState();

// further, because the angular code and the vanilla js code is being
// separated, it's even pretty simple to update the code to use the
// vanilla JS version later...

import { PersistentState} from 'ui/persisted_state';

const state = new PersistentState();