bhylu.com

Advertisements

AngularJS Component Bindings

Component bindings describe how a caller supplies values and callbacks. A one-way < binding does not deeply freeze an object or prevent the child from mutating a referenced property.

How it works

The card receives a record but creates an editable copy when bindings change. Its local edit therefore does not alter the parent’s note. This is a deliberate draft policy, not a general requirement to copy every object. A real editor must decide how to report accepted edits, merge a refreshed parent record or discard a draft.

Run the code

AngularJS 1.8.3 is a legacy framework whose official support ended in January 2022. These examples teach maintenance, not a recommendation for a new application. They need a separate local browser page; Bhylu has no AngularJS playground.

In an empty folder save the HTML below as component-bindings.html and the server as lab-server.mjs. Make a vendor folder and save the four pinned libraries there, retaining their MIT notices. With Node 22 or later run node lab-server.mjs component-bindings.html, then open http://127.0.0.1:8136/. Stop that lab before running a different lesson. The server supplies fixed read-only HTTP fixtures; no data is saved and it does not connect to SQL. No PHP, Apache or MySQL configuration changes are needed.

Example

component-bindings.html

<!doctype html>
<html lang="en" ng-app="repairLab" ng-strict-di>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>AngularJS Component Bindings</title>
    <style>
      :root {
        font:
          18px/1.55 system-ui,
          sans-serif;
        color: #0f3464;
        background: #fff;
        color-scheme: light;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
      }
      main {
        max-width: 50rem;
        margin: auto;
        padding: 1.2rem;
      }
      h1 {
        font-size: 1.65rem;
      }
      label {
        display: block;
        margin: 0.6rem 0;
      }
      input,
      select,
      textarea,
      button {
        font: inherit;
        max-width: 100%;
        padding: 0.35rem;
        margin: 0.2rem;
      }
      button {
        border: 1px solid #034fa0;
        border-radius: 0.25rem;
        background: #034fa0;
        color: white;
      }
      button:disabled {
        opacity: 0.55;
      }
      output,
      [role="status"] {
        display: block;
        min-height: 1.5rem;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td,
      th {
        padding: 0.4rem;
        border: 1px solid #a5bbd4;
        text-align: left;
      }
      pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      :focus-visible {
        outline: 3px solid #0078d4;
        outline-offset: 3px;
      }
      [ng-cloak] {
        display: none !important;
      }
      .marked {
        font-weight: 700;
      }
      .error {
        color: #a02424;
      }
      :root[data-theme="dark"] {
        color: #d6e7fb;
        background: #061d30;
        color-scheme: dark;
      }
      :root[data-theme="dark"] .error {
        color: #ffb4b4;
      }
    </style>
  </head>
  <body>
    <main ng-controller="DeskController as vm" ng-cloak>
      <h1>Community repair desk</h1>
      <p>AngularJS 1.8.3 · Legacy maintenance lab · Local demonstration</p>
      <repair-editor record="vm.record"></repair-editor>
      <p data-result>{{ vm.record.note }}</p>
    </main>
    <script src="/vendor/angular.min.js"></script>
    <script>
      (function () {
        "use strict";
        var app = angular.module("repairLab", []);
        app.component("repairEditor", {
          bindings: { record: "<" },
          template:
            '<button type="button" ng-click="$ctrl.edit()">Edit child draft</button><span data-child>{{ $ctrl.draft.note }}</span>',
          controller: [
            function () {
              var card = this;
              card.$onChanges = function () {
                card.draft = angular.copy(card.record);
              };
              card.edit = function () {
                card.draft.note = "Child draft changed";
              };
            },
          ],
        });
        app.controller("DeskController", [
          function () {
            var vm = this;
            vm.record = { note: "Parent note" };
          },
        ]);
      })();
    </script>
  </body>
</html>
Focus on the bindings and controller

This excerpt leaves out the document shell, styles and library files. Use the complete download to run it.


<repair-editor record="vm.record"></repair-editor>
<p data-result>{{ vm.record.note }}</p>
<script>
  (function () {
    "use strict";
    var app = angular.module("repairLab", []);
    app.component("repairEditor", {
      bindings: { record: "<" },
      template:
        '<button type="button" ng-click="$ctrl.edit()">Edit child draft</button><span data-child>{{ $ctrl.draft.note }}</span>',
      controller: [
        function () {
          var card = this;
          card.$onChanges = function () {
            card.draft = angular.copy(card.record);
          };
          card.edit = function () {
            card.draft.note = "Child draft changed";
          };
        },
      ],
    });
    app.controller("DeskController", [
      function () {
        var vm = this;
        vm.record = { note: "Parent note" };
      },
    ]);
  })();
</script>

Expected result

Parent note

After the child edit, the parent still says Parent note and the child says Child draft changed. The test checks both, because a one-sided assertion could miss accidental mutation. Text @ bindings and two-way = bindings have different contracts and should be selected intentionally during maintenance.

Advertisements