Last Updated: November 02, 2017
·
3.537K
· zatziky

AngularJS: Components CRUD

In this angular official guide https://docs.angularjs.org/guide/component, part Example of a component tree, I was missing the C of the CRUD. I couldn't find any tutorial about it so I have come with this tip. ;-)

Here is the plunker for which I extended the original code: https://plnkr.co/edit/tT3hsrW4lrSnX6w01WAW?p=options

Basically, it is just this in JS:

  function HeroListController() {
      var ctrl = this;

      ctrl.list = [];

      ctrl.createHero = createHero;

      function createHero(){
          ctrl.list.push({
              name : 'Crazy Newling',
              location: 'Morgues'
          })
      }        
   }
})();

And then HTML:

<b>Heroes</b><br>
<hero-detail ng-repeat="hero in $ctrl.list" hero="hero"></hero-detail>
<button ng-click="$ctrl.createHero()">Hire a new Hero</button>