MEAN with Jade template form submit GET instead of POST

So, earlier today I had a work form that could submit and delete documents restaurants

to a mongodb collection. Everything worked fine, but then I decided to try loading the form into a div instead of redirecting to a new page. This gave a different result when I tried to submit a form in a restaurant. Originally it would have called $scope.add()

in mine restaurantsController

, but now it sends a request GET

with form data to /restaurants

instead of POST

to /api/restaurants

. I'm looking for some idea of ​​what I have done to change the behavior. Although it loads the form, when I click on the restaurant anchor tag, it does not load restaurants from the database.

Here is the oil and js for the menu anchors:


app.controller("menu", ["$scope", "$http", function ($scope, $http) {
    $scope.home = function () {
    $scope.restaurants = function () {
        success(function(data, status, headers, config){
        error(function(data, status, headers, config){




mixin link(name, fn)
    a.btn(ng-click=fn)= name

      button.navbar-toggle.collapsed(type='button', data-    toggle='collapse', data-target='#navbar', aria-expanded='false', aria-    controls='navbar') Toggle navigation
      a.navbar-brand(href='/') Food App
        +link("Home", "home()")
        +link("Restaurants", "restaurants()")


And here is the form:

form(name="NewRestaurant" ng-submit="$event.preventDefault();add()")     
        input.form-control(type="text", name="name" placeholder="Name", ng-model="name" required)
        input.form-control(type="text", name="address" placeholder="Address", ng-model="address" required)
        -for(var i = 0; i <= 5; i++){
          input(name="rating" type="radio", value=i, ng-model="rating" required)
        button.success(type="submit") Submit


and controller ...

app.controller("restaurants", ["$scope", "$resource", function ($scope, $resource) {
    var Restaurant = $resource('/api/restaurants/:id');

    var clearForm = function () {
      $ = '';
      $scope.address = '';
      $scope.rating = null;

    var validRestaurant = function () {
      if($ !== '' && $scope.address !== '' && $scope.rating !== null)
        return true;
        toastr.error("Please fill in all required form fields.");
        return false;

    $scope.query = function(){
      Restaurant.query(function (results) {
        $scope.restaurants = results;

    $scope.add = function () {
      alert("got here!");
        var restaurant = new Restaurant(); = $;
        restaurant.address = $scope.address;
        restaurant.rating = $scope.rating;
        alert(restaurant);, function (result) {
          toastr.success("Saved " + $ + ".")

    $scope.update = function (id) {


    $scope.remove = function (id) {
        Restaurant.delete({id: id}, function (err) {


edit: Now when I type this I am wondering if maybe angular does not recognize the form and does not create a $ scope for it because it is loaded after the page has loaded ...?


source to share

All Articles