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>

Related protips

Have a fresh tip? Share with Coderwall community!