Angular 1.5 component demo

by Yonathan Benitah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="//unpkg.com/@uirouter/[email protected]/release/angular-ui-router.js"></script>
<div ng-app="demoApp">
  <model></model>
  <a ui-sref="hello" ui-sref-active="active">view</a>

  <ui-view></ui-view>
</div>

JavaScript

class Model {
  constructor(data) {
    this.data = data;
  }
  getData() {
    return this;
  }
}
var myModel = new Model('hello');

var modelComponent = {
  controller: function() {
    var ctrl = this;
    ctrl.model = myModel.getData()
  },
  template: `<h1>Model: {{$ctrl.model.data}}</h1>`
}

var parentComponent = {
  bindings: {
    vm: '<'
  },
  controller: function() {
    var ctrl = this;
  },
  template: `
    	<div>
      <a ui-sref="hello.about" ui-sref-active="active">sub-view</a>
        Parent component<input ng-model="$ctrl.vm.data">
       <ui-view></ui-view>
      </div>
    `
};

var childComponent = {
  bindings: {
    vm: '<'
  },
  template: `
  	<div>
      Child component <input ng-model="$ctrl.vm.data">
      <br/>
      Child component copy<input ng-model="$ctrl.vmCopy.data">
      <br/>
      Child component doCheck<input ng-model="$ctrl.vmCheck.data">
      </div>
  `,
  controller: function() {
    var ctrl = this;
    ctrl.$onChanges = function(changes) {
      ctrl.vmCopy = angular.copy(ctrl.vm);
      ctrl.vm = ctrl.vm;
    };
    ctrl.$doCheck = function () {
      var oldVm;
      if (!angular.equals(oldVm, ctrl.vm)) {
        oldVm = angular.copy(ctrl.vm);
        ctrl.vmCheck = oldVm;
        console.log(ctrl)
      }
    }
  }
}

angular.module('demoApp', ['ui.router'])
  .config(function($stateProvider) {
    var helloState = {
      name: 'hello',
      url: '/hello',
      resolve: {
        vm: [function() {
          return myModel.getData();
        }]
      },
      component: 'parent'
    }

    var aboutState = {
      name: 'hello.about',
      url: '/about',
      resolve: {
        vm: [function() {
          return myModel.getData();
        }]
      },
      component: 'child'
    }
    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);

  })
  .component('parent', parentComponent)
  .component('child', childComponent)
  .component('model', modelComponent)