AngularJS Core Concepts

app.js

//setup and start
//first 'gotcha' of angular
//html likes hyphens = skewer case
//Example: what-up
angular.module('app', [])
  .component('todoList', { //LOOK AT ME
    template: `
      <h1>Todo List</h1>
      <input> 
      <button>add</button>
      <ul>
        <li></li>
      </ul>
      <hr/>
      <pre></pre>
    `
  })

//INPUT ELEMENTS ARE A COMMON PLACE TO UTILIZE TWO WAY DATA BINDING
//Input data binding
//pre lets you write pre formatted text that looks like code
angular.module('app', [])
  .component('todoList', {
    template: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> // LOOK AT ME
      <button>add</button>
      <ul>
        <li></li>
      </ul>
      <hr/>
      <pre>{{$ctrl.newTodo}}</pre> // LOOK AT ME
    `
  })

//button functionality start
angular.module('app', [])
  .component('todoList', {
    template: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button> //LOOK AT ME
      <ul>
        <li></li>
      </ul>
      <hr/>
      <pre>{{$ctrl.newTodo}}</pre>
    `
  })
  
//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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button> // LOOK AT ME
      <ul>
        <li></li>
      </ul>
      <hr/>
      <pre>{{$ctrl.newTodo}}</pre>
    `
  })

//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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button>
      <ul>
        <li></li>
      </ul>
      <hr/>
      <pre>{{$ctrl.todos}}</pre> // 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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button>
      <ul>
        <li></li>
      </ul>
      <hr/>
      <pre>{{$ctrl.todos}}</pre>
    `
  })

//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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button>
      <ul>
        <li></li>
      </ul>
      <hr/>
      <pre>{{$ctrl.todos}}</pre>
    `
  })

//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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button>
      <ul>
        <li ng-repeat="todo in $ctrl.todos">{{todo}}</li> // LOOK AT ME
      </ul>
      <hr/>
      <pre>{{$ctrl.todos}}</pre>
    `
  })

//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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button>
      <ul>
        <li ng-repeat="todo in $ctrl.todos">{{todo}}</li> // LOOK AT ME
      </ul>
      <hr/>
      <pre>{{$ctrl.todos | json}}</pre>
    `
  })

//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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button>
      <ul>
        <li
          ng-click="$ctrl.removeTodo($index)" // LOOK AT ME
          ng-repeat="todo in $ctrl.todos"
        >
          {{todo}}
        </li>
      </ul>
      <hr/>
      <pre>{{$ctrl.todos | json}}</pre>
    `
  })

//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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button>
      <ul>
        <li
          ng-click="$ctrl.removeTodo($index)" // LOOK AT ME
          ng-repeat="todo in $ctrl.todos track by $index"
        >
          {{todo}}
        </li>
      </ul>
      <hr/>
      <pre>{{$ctrl.todos | json}}</pre>
    `
  })

//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: `
      <h1>Todo List</h1>
      <input ng-model="$ctrl.newTodo"> 
      <button ng-click="$ctrl.addTodo()">add</button>
      <ul>
        <entry // LOOK AT ME
          todo="todo"
          ng-click="$ctrl.removeTodo($index)" // LOOK AT ME
          ng-repeat="todo in $ctrl.todos track by $index"
        />
      </ul>
      <hr/>
      <pre>{{$ctrl.todos | json}}</pre>
    `
  })
  .component('entry', { // LOOK AT ME
    bindings: {
      todo: '<' // one way data binding, treat this thing as a variable
    },
    template: `
      <li>
        {{$ctrl.todo}}
      </li>
    `
  })

index.html

 //Start
<!DOCTYPE html>
<html>
  <head>
    <title>Todo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <h1>Todo List</h1>
    <input> 
    <button>add</button>
    <ul>
      <li></li>
    </ul>
    <hr/>
    <pre></pre>
  </body>
</html>

//End
<!DOCTYPE html>
<html>
  <head>
    <title>Todo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-app="app">
    <todo-list></todo-list>
  </body>
</html>