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 4/readmes/angular_create.md

4.5 KiB
Raw Blame History

Lesson Objectives

  1. Completed angular_set_up.md
  2. Create new holiday form
  3. Hook form up to controller properties
  4. Make form make AJAX request on submit
  5. Check that the request was successful

Upgrade our MainController in app.js to use the $http module

  • You'll need the $http request module in order to interact with our express server
  • We'll need to carefully upgrade our app.Controller to have a second argument as an array, and then pass in the value as a parameter in the callback function (still inside the array!)

In js/app.js

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

app.controller('MainController', ['$http', function ($http) {
  this.h5 = 'Holidays! Celebrate!'
}])
  • Let's test it to make sure it didn't break our code. Our Holidays! Celebrate! message should still appear in the browser

Create new holiday form

In index.html:

<body ng-controller="MainController as ctrl">
  <div class="container">
    <h5> {{ ctrl.h5 }} </h5>
    <form>
      <input type="text" placeholder="Holiday name" />
      <input type="submit" value="Create New Holiday" />
    </form>
  </div>
</body>

Hook Form Up to Controller Properties

Remember

  • use ng-model inside the input tags
  • For now, we're only going to create holiday names
  • the value of each ng-model needs to match the schema key (you can check in the models folder)

In index.html:

<form>
    <input type="text" ng-model="ctrl.createForm.name" placeholder="Holiday name"/>
    <input type="submit" value="Create New Holiday"/>
</form>
  • This is a good time to open Chrome Dev tools in your browser

Make form make a function call

In js/app.js

app.controller('MainController', ['$http', function ($http) {
  this.h5 = 'Holidays! Celebrate!'

  this.createHoliday = () => {
    console.log ('submit button calls this function');
    }
}])

We should be able to click our create new holiday button ... and ... nothing should happen!

We have to add the function to our html

  • Upgrade our opening form tag to the following:

In index.html:

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

  • Don't forget to refresh your browser

  • Now, when we click create new holiday, we should see a console.log in our browser that reads submit button calls this function

  • We have successfully connected our form to our app.js and we are able to call the right function

  • Now we have to make that code do something more useful

On form submit make AJAX request to our API/server

In js/app.js

  1. add a new empty object called this.createForm, outside of our this.createHoliday function
  2. add an $http function
  • Include an object as the argument that includes the following
    • method :'POST'
    • url : /holidays
    • data : this.createForm
  • Chain a .then() after the $http function, with an argument of response
    • The .then() function waits for the http request to go through and give a response
    • .then() function can then use what the server has responded with
    • .then() takes two arguments, the first is a successful response from the server, the second is the error response if there is an error
    • for now, let's just console.log the response
app.controller('MainController', ['$http', function ($http) {
  this.h5 = 'Holidays! Celebrate!'
  this.createForm = {}


    this.createHoliday = function(){
        $http({
            method:'POST',
            url: '/holidays',
            data: this.createForm
        }).then(response => {
            console.log(response)
        },  error => {
            console.log(error)
        })
    }
}])
  • Successful POST request console.log: POST request response success

Get the data from the response

The response has a lot of stuff in it. We just want the data. Let's update our console.log to just show our data

this.createHoliday = () => {
  $http({
    method: 'POST',
    url: '/holidays',
    data: this.createForm
  }).then(response => {
    console.log(response.data)
  }, error => {
    console.log(error)
  })
}

Success! just response data

  • We can tell this has been successfully added to our database because the console.log is coming from the response, we also see a mongo id, and also the other default values have been added in
  • Nice work!

Onwards