//setup and start //first 'gotcha' of angular //html likes hyphens = skewer case //Example: what-up angular.module('app', []) .component('todoList', { //LOOK AT ME template: `
{{$ctrl.newTodo}}// LOOK AT ME ` }) //button functionality start angular.module('app', []) .component('todoList', { template: `
{{$ctrl.newTodo}}` }) //click controller for button //controller function is invoked to setup the state of the component //think of it as the constructor angular.module('app', []) .component('todoList', { controller: function() { // LOOK AT ME this.addTodo = () => { console.log('this.newTodo = ', this.newTodo) } }, template: `
{{$ctrl.newTodo}}` }) //create state of todos //populate state of todos angular.module('app', []) .component('todoList', { controller: function() { this.todos = []; // LOOK AT ME this.addTodo = () => { this.todos.push(this.newTodo) // LOOK AT ME console.log('this.newTodo = ', this.newTodo) }; }, template: `
{{$ctrl.todos}}// look at me! ` }) //reset input text state angular.module('app', []) .component('todoList', { controller: function() { this.todos = []; this.addTodo = () => { this.todos.push(this.newTodo); this.newTodo = ''; // LOOK AT ME console.log('this.newTodo = ', this.newTodo) }; }, template: `
{{$ctrl.todos}}` }) //prepopulate todos array angular.module('app', []) .component('todoList', { controller: function() { this.todos = ['wake up', 'question life', 'reconcile existence']; // LOOK AT ME this.addTodo = () => { this.todos.push(this.newTodo); this.newTodo = ''; console.log('this.newTodo = ', this.newTodo) }; }, template: `
{{$ctrl.todos}}` }) //repeat items angular.module('app', []) .component('todoList', { controller: function() { this.todos = ['wake up', 'question life', 'reconcile existence']; this.addTodo = () => { this.todos.push(this.newTodo); this.newTodo = ''; console.log('this.newTodo = ', this.newTodo) }; }, template: `
{{$ctrl.todos}}` }) //filter array to look like json object angular.module('app', []) .component('todoList', { controller: function() { this.todos = ['wake up', 'question life', 'reconcile existence']; this.addTodo = () => { this.todos.push(this.newTodo); this.newTodo = ''; console.log('this.newTodo = ', this.newTodo) }; }, template: `
{{$ctrl.todos | json}}` }) //deleting tasks angular.module('app', []) .component('todoList', { controller: function() { this.todos = ['wake up', 'question life', 'reconcile existence']; this.addTodo = () => { this.todos.push(this.newTodo); this.newTodo = ''; console.log('this.newTodo = ', this.newTodo) }; this.removeTodo = (index) => { // LOOK AT ME console.log('index = ', index); this.todos.splice(index, 1); } }, template: `
{{$ctrl.todos | json}}` }) //track values by index angular.module('app', []) .component('todoList', { controller: function() { this.todos = ['wake up', 'question life', 'reconcile existence']; this.addTodo = () => { this.todos.push(this.newTodo); console.log('this.newTodo = ', this.newTodo) this.newTodo = ''; }; this.removeTodo = (index) => { // LOOK AT ME console.log('index = ', index); this.todos.splice(index, 1); } }, template: `
{{$ctrl.todos | json}}` }) //subcomponent angular.module('app', []) .component('todoList', { controller: function() { this.todos = ['wake up', 'question life', 'reconcile existence']; this.addTodo = () => { this.todos.push(this.newTodo); console.log('this.newTodo = ', this.newTodo) this.newTodo = ''; }; this.removeTodo = (index) => { console.log('index = ', index); this.todos.splice(index, 1); } }, template: `
{{$ctrl.todos | json}}` }) .component('entry', { // LOOK AT ME bindings: { todo: '<' // one way data binding, treat this thing as a variable }, template: `