Angular 1.5 component demo

by Bruno Sabetta

HTML

<div ng-app="demoApp">
  <div ng-controller="parentCtrl">
    <h4>Parent Ctrl:</h4> 
    Parent Page: {{page}}
    <hr/>
    <paging page="page" 
            next-page-one="getNextPage" >
    </paging>
  </div>
</div>

CSS

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

JavaScript

function parentCtrl($scope) {
  $scope.page = 1;

  $scope.getNextPage = function(page) {
    if(page){
    	alert("You passed me a param: " + page);
    	return;
    }
    $scope.page++;
  }
};

var pagingComponent = {
  bindings: {
    page: '=',
    nextPageOne: '=',
    nextPageTwo: '&',
    nextPageThree: '&'
  },
  template: `
  	<div>
      <h4>Child Component:</h4>
      <button ng-click="$ctrl.nextPageVar();">
        Next Page (Binding Var)
      </button><br/><br/>
      <button ng-click="$ctrl.nextPageFuncOne();">
        Next Page (Binding Func =)
      </button><br/><br/>
      <button ng-click="$ctrl.nextPageFuncTwo();">
        Next Page (Binding Func &)
      </button><br/><br/>
      <button ng-click="$ctrl.nextPageFuncThree();">
        Next Page (Binding Func & with args)
      </button>
    </div>
  `,
  controller: function() {
    var $ctrl = this;

    $ctrl.nextPageVar = function() {
       $ctrl.page++;
    };

    $ctrl.nextPageFuncOne = function() {
      $ctrl.nextPageOne();
    };
    
    $ctrl.nextPageFuncTwo = function() {
      $ctrl.nextPageTwo();
    };
    
    $ctrl.nextPageFuncThree = function() {
      $ctrl.page++;
      $ctrl.nextPageThree({page: $ctrl.page});
    };
  }
}

angular.module('demoApp', [])
  .controller('parentCtrl', parentCtrl)
  .component('paging', pagingComponent)