angularjsnotes/Day 3/1. MEAN.md

# MEAN Stack Part 2

## Lesson Objectives

1. Create a function to get all todos
1. On page load, show all todos
1. After creating a new todo, refresh list of todos
1. Clicking on a todo toggles it complete/incomplete
1. Create a delete button
1. Edit the Todo

## Create a function to get all todos

public/js/app.js:

```javascript
this.getTodos = function(){
    $http({
        method:'GET',
        url: '/todos',
    }).then(function(response){
        console.log(response);
    }, function(){
        console.log('error');
    });
};

this.getTodos(); //call immediately once controller is instantiated to test
```

## On page load, show all todos

1. create `controller` variable set to `this`
1. set property one controller when ajax succeeds
1. call getTodos during controller instantiation

public/js/app.js:

```javascript
app.controller('MyController', ['$http', function($http){
    this.description = null;
    this.complete = false;
    const controller = this; //create controller var

    //...farther down the page
    this.getTodos = function(){
        $http({
            method:'GET',
            url: '/todos',
        }).then(function(response){
            controller.todos = response.data; //set value on success
        }, function(){
            console.log('error');
        });
    };

    this.getTodos(); //call immediately once controller is instantiated
}]);
```

public/index.html:

```html
<ul>
    <li
        ng-repeat="todo in ctrl.todos"
        ng-class="(todo.complete)?'complete':''">
            {{todo.description}}
    </li>
</ul>
```

1. `mkdir public/css`
1. `touch public/css/app.css`

public/css/app.css:

```css
.complete {
    text-decoration: line-through;
}
```

public/index.html:

```html
<link rel="stylesheet" href="/css/app.css">
```

## After creating a new todo, refresh list of todos

public/js/app.js:

```javascript
$http({
    method:'POST',
    url: '/todos',
    data: {
        description: this.description,
        complete: this.complete
    }
}).then(function(response){
    controller.getTodos(); //get all todos when new element is added
}, function(){
    console.log('error');
});
```

## Clicking on a todo toggles it complete/incomplete

public/index.html:

```html
<ul>
    <li
        ng-class=" (todo.complete) ? 'complete' : 'incomplete' "
        ng-repeat="todo in ctrl.todos">
            <span ng-click="ctrl.toggleTodoComplete(todo);">{{todo.description}}</span>
    </li>
</ul>
```

public/js/app.js:

```javascript
this.toggleTodoComplete = function(todo){
    let newCompleteValue;
    if(todo.complete === true){
        newCompleteValue = false;
    } else {
        newCompleteValue = true;
    }

    $http({
        method:'PUT',
        url: '/todos/' + todo._id,
        data: {
            description: todo.description,
            complete: newCompleteValue
        }
    }).then(function(response){
        controller.getTodos();
    }, function(){
        console.log('error');
    });
}
```

## Create a delete button

In the `<li>` for each todo:

```html
<button ng-click="ctrl.deleteTodo(todo)">Delete This Todo</button>
```

```javascript
this.deleteTodo = function(todo){
    $http({
        method:'DELETE',
        url: '/todos/' + todo._id
    }).then(
        function(response){
            controller.getTodos();
        },
        function(error){

        }
    );
}
```

## Edit the Todo

In the `<li>` for each todo:

```html
<form ng-submit="ctrl.editTodo(todo);">
    <input type="text" ng-model="ctrl.updatedDescription" placeholder="description" />
    <input type="submit" value="Update Description">
</form>
```

```javascript
this.editTodo = function(todo){
    $http({
        method:'PUT',
        url: '/todos/' + todo._id,
        data: {
            description: this.updatedDescription,
            complete: todo.complete
        }
    }).then(
        function(response){
            controller.getTodos();
        },
        function(error){

        }
    );
}
```

To hide extra edit fields:

```javascript
this.indexOfEditFormToShow = null;
```

```html
<a
    ng-if="$index !== ctrl.indexOfEditFormToShow"
    href="#"
    ng-click="ctrl.indexOfEditFormToShow = $index">
        Edit This Todo
</a>
<form ng-if="$index === ctrl.indexOfEditFormToShow" ng-submit="ctrl.editTodo(todo);">
```

```javascript
controller.indexOfEditFormToShow = null; //add this inside success callback to editTodo $http request
```

Fix styling of line-through:

```html
<li ng-repeat="todo in ctrl.todos">
    <span
        ng-class=" (todo.complete) ? 'complete' : '' "
        ng-click="ctrl.toggleTodoComplete(todo)">{{todo.description}}</span>
```