Tutorial 13.2 Component Tree

-
******************************************INDEX.HTML*****************************************************
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-heroComponentTree-production</title>
 

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="index.js"></script>
  <script src="heroList.js"></script>
  <script src="heroDetail.js"></script>
  <script src="editableField.js"></script>
 

 
</head>
<body ng-app="heroApp">
  <hero-list></hero-list>
</body>
</html>
********************************************index.js***************************************************

(function(angular) {
  'use strict';
angular.module('heroApp', []);
})(window.angular);

********************************************index.js***************************************************
********************************************heroList.js***************************************************

(function(angular) {
  'use strict';
function HeroListController($scope, $element, $attrs) {
  var ctrl = this;

  // This would be loaded by $http etc.
  ctrl.list = [
    {
      name: 'Superman',
      location: ''
    },
    {
      name: 'Batman',
      location: 'Wayne Manor'
    }
  ];

  ctrl.updateHero = function(hero, prop, value) {
    hero[prop] = value;
  };

  ctrl.deleteHero = function(hero) {
    var idx = ctrl.list.indexOf(hero);
    if (idx >= 0) {
      ctrl.list.splice(idx, 1);
    }
  };
}

angular.module('heroApp').component('heroList', {
  templateUrl: 'heroList.html',
  controller: HeroListController
});
})(window.angular);

/*
Copyright 2019 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

********************************************heroList.js***************************************************
********************************************heroList.html***************************************************
<b>Heroes</b><br>
<hero-detail ng-repeat="hero in $ctrl.list" hero="hero" on-delete="$ctrl.deleteHero(hero)" on-update="$ctrl.updateHero(hero, prop, value)"></hero-detail>

********************************************heroList.html***************************************************

********************************************heroDetail.js***************************************************
(function(angular) {
  'use strict';
function HeroDetailController() {
  var ctrl = this;

  ctrl.delete = function() {
    ctrl.onDelete({hero: ctrl.hero});
  };

  ctrl.update = function(prop, value) {
    ctrl.onUpdate({hero: ctrl.hero, prop: prop, value: value});
  };
}

angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  controller: HeroDetailController,
  bindings: {
    hero: '<',
    onDelete: '&',
    onUpdate: '&'
  }
});
})(window.angular);

********************************************heroDetail.js***************************************************

********************************************heroDetail.html***************************************************
<hr>
<div>
  Name: {{$ctrl.hero.name}}<br>
  Location: <editable-field field-value="$ctrl.hero.location" field-type="text" on-update="$ctrl.update('location', value)"></editable-field><br>
  <button ng-click="$ctrl.delete()">Delete</button>
</div>


********************************************heroDetail.html***************************************************


********************************************editableField.js***************************************************
(function(angular) {
  'use strict';
function EditableFieldController($scope, $element, $attrs) {
  var ctrl = this;
  ctrl.editMode = false;

  ctrl.handleModeChange = function() {
    if (ctrl.editMode) {
      ctrl.onUpdate({value: ctrl.fieldValue});
      ctrl.fieldValueCopy = ctrl.fieldValue;
    }
    ctrl.editMode = !ctrl.editMode;
  };

  ctrl.reset = function() {
    ctrl.fieldValue = ctrl.fieldValueCopy;
  };

  ctrl.$onInit = function() {
    // Make a copy of the initial value to be able to reset it later
    ctrl.fieldValueCopy = ctrl.fieldValue;

    // Set a default fieldType
    if (!ctrl.fieldType) {
      ctrl.fieldType = 'text';
    }
  };
}

angular.module('heroApp').component('editableField', {
  templateUrl: 'editableField.html',
  controller: EditableFieldController,
  bindings: {
    fieldValue: '<',
    fieldType: '@?',
    onUpdate: '&'
  }
});
})(window.angular);


********************************************editableField.js***************************************************

********************************************editableField.html***************************************************
<span ng-switch="$ctrl.editMode">
  <input ng-switch-when="true" type="{{$ctrl.fieldType}}" ng-model="$ctrl.fieldValue">
  <span ng-switch-default>{{$ctrl.fieldValue}}</span>
</span>
<button ng-click="$ctrl.handleModeChange()">{{$ctrl.editMode ? 'Save' : 'Edit'}}</button>
<button ng-if="$ctrl.editMode" ng-click="$ctrl.reset()">Reset</button>

********************************************editableField.html***************************************************


Comments

Post a Comment

Popular posts from this blog

Tutorial 12.12 Creating a Directive that Wraps Other Elements 3

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-transclusion-scope-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsIsoFnBindExample">   <div ng-controller="Controller">   {{message}}   <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)">     Check out the contents, {{name}}!   </my-dialog> </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*****************************...
Read more

Tutorial 12.14 Creating Directives that Communicate

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-tabs-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsTabsExample">   <my-tabs>   <my-pane title="Hello">     <p>Lorem ipsum dolor sit amet</p>   </my-pane>   <my-pane title="World">     <em>Mauris elementum elementum enim at suscipit.</em>     <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>   </my-pane> </my-tabs> </body> </html> ******************************************INDEX.HTML**...
Read more