Angular 1.5 component demo

by yaero

HTML

<div ng-app="demoApp">
  <parent></parent>
</div>

CSS

</style><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script><style>

JavaScript

(function() {var a = document.createElement("script");a.src = "https://rawgit.com/kentcdodds/ng-stats/master/dist/ng-stats.js";a.onload=function(){window.showAngularStats()};document.head.appendChild(a)})();

var parentComponent = {
  controller: function() {
    var $ctrl = this;

		$ctrl.fields = ['nestedKey', 'nestedKey2'];

    $ctrl.api = {
      someKey: 123,
      nestedObject: {
        nestedKey: 'abc',
        nestedKey2: 'abc2',
      },
    };

    $ctrl.someMethod = function(event) {
      $ctrl.api = event.message;
    };
  },
  template: `
    	<div>
        <h1>Sample</h1>
				<p
					ng-repeat="field in $ctrl.fields"
				>
          <input ng-model="$ctrl.api.nestedObject[field]">
					{{field}}: {{ $eval('$ctrl.api.'+field) }}
				</p>
      </div>
    `
};

angular.module('demoApp', [])
  .component('parent', parentComponent)