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

var parentComponent = {
  controller: function() {
    var $ctrl = this;
    
    $ctrl.htmlContent = 'Hello\nWorld!';

		$ctrl.fields = ['someKey', 'nestedObject.nestedKey']

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

    $ctrl.someMethod = function(event) {
      $ctrl.api = event.message;
    };
  },
  template: `
    	<div>
        <h1>Sample</h1>
				<p
					ng-repeat="field in $ctrl.fields"
				>
					{{field}}: {{ $eval('$ctrl.api.'+field) }}
				</p>
        <span style="white-space: pre-line;">{{ $ctrl.htmlContent }}</span>
      </div>
    `
};

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