Angular Extend

Using Angular extend for reusable code/inheritance

by HugeHugh

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<div ng-app="exampleApp" ng-controller="exampleCtrl as ctrl">
    <h1>Categories <button ng-if='ctrl.categories.length === 0' ng-click='ctrl.getCategories()'>Load</button></h1>
    <ul>
        <li ng-repeat='category in ctrl.categories'><b>{{category.Name}}</b></li>
    </ul>
    <h1>Products <button ng-if='ctrl.products.length === 0' ng-click='ctrl.getProducts()'>Load</button></h1>
    <ul>
        <li ng-repeat='product in ctrl.products'><b>{{product.Name}}</b> &mdash; {{product.Description}}</li>
    </ul>    
</div>

JavaScript

(function (app) {

	var a = {
  	propA: 'a',
    propB: 'a'
  };
  var b = {
  	propA: 'b',
    propB: 'B'
  };
  
	var c = angular.extend({}, a, b);
  
  console.log(JSON.stringify(c));

})(angular.module("exampleApp", []));