angular sample page

By using class in constructor method

by sarfarazdesigner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<!--  ng-app="initApp" -->
<div>
  <section ng-controller="homeController as ctrl">
    <h1>Hello, {{ctrl.name}}!</h1>

    <p>{{ctrl.names}}</p>

    <button ng-click="ctrl.greet()">Greet</button>

    <div>
      <mark>Below lines are generated by directive</mark>
      <user-list list="ctrl.names" on-send="ctrl.sendMail(item)"></user-list>
    </div>


    <pre>{{ctrl.obj1 | json}}</pre>
    <pre>{{ctrl.obj2 | json}}</pre>

    <button ng-click="ctrl.merge2Objs(ctrl.obj1, ctrl.obj2)">Merge Objects</button>

    <code>{{ctrl.mergeObj | json}}</code>

  </section>  
</div>

JavaScript

angular
  .module('initApp', [])
  .controller('homeController', HomeController)
  .directive('userList', UserList)
    
//controller
HomeController.$inject = [];
function HomeController() {
  
  this.name = "Sarfaraz";
  this.names = ["John", "Kevin", "Rustie"]
  
  this.mergeObj = undefined;

  this.obj1 = {
    "name":"manu",
    "age":23,
    "occupation":"SE"
  }

  this.obj2 = {
    "name":"manu",
    "gender":"Male",
    "country":"India"
  }
}

HomeController.prototype.greet = function() {
  console.log("%cyou are welcome on my page dude "+ this.name, "background: green; color: white; font-size: x-large");
};

HomeController.prototype.sendMail = function(name) {
  console.log(name, "sendMail");
};

HomeController.prototype.merge2Objs = function(obj1, obj2) {

  this.mergeObj = Object.assign(obj1, obj2);

  return this.mergeObj;
};


// Directive
// <user-list list="Array"></user-list>
function UserList(){
  
  var directive = {
    restrict: 'E',
    replace: true,
    scope: {
      list: '=',
      onSend: '&',
    },
    template: '<ul><li ng-repeat="name in list" ng-click="onSend({item: name})">Hello {{name}}</li></ul>'
  }

  return directive;
}