mahuntington
/
angularjsnotes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '890255fa21'
${ noResults }
angularjsnotes/Day 2/2. MEAN.md

2.9 KiB
Raw Blame History

MEAN Stack

Lesson Objectives

  1. Describe the elements of the MEAN stack
  2. Set up static files
  3. Set up Angular
  4. Create App/Controller
  5. Create new todo form
  6. Hook form up to controller properties
  7. 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
  2. touch public/index.html
  3. mkdir public/js
  4. touch public/js/app.js

server.js:

app.use(express.static('public'));

public/index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

    </body>
</html>

Set up Angular

  1. Include Angular
  2. Set up app
  3. Test {{}}

public/index.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:

const app = angular.module('MyApp', []);

app.controller('MyController', function(){
    this.foo = 'bar';
});
  1. ng-app
  2. script tag for /js/app.js
  3. ng-controller
  4. {{ctrl.foo}}

public/index.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:

<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:

<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:

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

<form ng-submit="ctrl.createTodo()">