# MEAN Stack
## Lesson Objectives
1. Describe the elements of the MEAN stack
1. Set up static files
1. Set up Angular
1. Create App/Controller
1. Create new todo form
1. Hook form up to controller properties
1. Make form make AJAX request on submit
## Describe the elements of the MEAN stack
MEAN stack is just a collection of tech that work well together
- Mongo
- Express
- Angular
- Node.js
## Set up static files
1. `mkdir public`
1. `touch public/index.html`
1. `mkdir public/js`
1. `touch public/js/app.js`
server.js:
```javascript
app.use(express.static('public'));
```
public/index.html:
```html
```
## Set up Angular
1. Include Angular
1. Set up app
1. Test {{}}
public/index.html:
```html
{{2+2}}
```
## Create App/Controller
public/js/app.js:
```javascript
const app = angular.module('MyApp', []);
app.controller('MyController', function(){
this.foo = 'bar';
});
```
1. ng-app
1. script tag for /js/app.js
1. ng-controller
1. {{ctrl.foo}}
public/index.html:
```html
{{ctrl.foo}}
```
## Create new todo form
public/index.html:
```html
```
## Hook form up to controller properties
public/index.html:
```html
```
## Make form make AJAX request on submit
public/js/app.js:
```javascript
app.controller('MyController', ['$http', function($http){
this.description = null;
this.complete = false;
this.createTodo = function(){
$http({
method:'POST',
url: '/todos',
data: {
description: this.description,
complete: this.complete
}
}).then(function(response){
console.log(response);
}, function(){
console.log('error');
});
}
}]);
```
public/index.html
```html