You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
2.9 KiB
162 lines
2.9 KiB
# 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
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Set up Angular
|
|
|
|
1. Include Angular
|
|
1. Set up app
|
|
1. Test {{}}
|
|
|
|
public/index.html:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html ng-app>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js" charset="utf-8"></script>
|
|
</head>
|
|
<body>
|
|
{{2+2}}
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## 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
|
|
<!DOCTYPE html>
|
|
<html ng-app="MyApp">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js" charset="utf-8"></script>
|
|
<script src="/js/app.js" charset="utf-8"></script>
|
|
</head>
|
|
<body ng-controller="MyController as ctrl">
|
|
{{ctrl.foo}}
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Create new todo form
|
|
|
|
public/index.html:
|
|
|
|
```html
|
|
<form>
|
|
<input type="text" placeholder="description"/>
|
|
Complete: <input type="checkbox"/>
|
|
<input type="submit" value="Create New To Do Item"/>
|
|
</form>
|
|
```
|
|
|
|
## Hook form up to controller properties
|
|
|
|
public/index.html:
|
|
|
|
```html
|
|
<form>
|
|
{{ctrl.description}} - {{ctrl.complete}}
|
|
<input type="text" ng-model="ctrl.description" placeholder="description"/>
|
|
Complete: <input type="checkbox" ng-model="ctrl.complete"/>
|
|
<input type="submit" value="Create New Todo Item"/>
|
|
</form>
|
|
```
|
|
|
|
## 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
|
|
<form ng-submit="ctrl.createTodo()">
|
|
```
|