Cannot run php code, issue with angular routing

Question

I came across this earlier thread while searching for help on this issue, but there are no responses so I'm at a loss.

I am trying to submit a form and receive a php variable in return. I have no problems running the test code on its own, but when put into an angular app with routing enabled, I get no result. Clicking submit while on the routed page leads to nothing happening. Is there anything I can do to fix this?

Here is my code:

HTML + PHP

<form method="post">
    <input type="submit" value="Submit" name="submit">
</form>

<?php if (isset($_POST['submit'])) {
    echo "IF GOOD :)";
} else {
    echo "ELSE BAD :(";
}?>

HTML

<div ng-app="app">
    <div ng-view></div>
</div>

JS

var app = angular.module('app', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/begin.html',
            controller: 'mainController',
            activePage: 'begin'
        });
});

Answer 1

Use php only for data insert/update/delete. else handle everything using angular

Try like this

bengin.html

<form >
    <input type="submit" value="Submit" name="submit" ng-click="submit()">
</form>

mainController

$scope.submit=function(){
  $http.post('msg.php', {submit:'hello word!'}).
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  });
}

create file name msg.php

msg.php

<?php if (isset($_POST['submit'])) {
    echo "IF GOOD :)";
} else {
    echo "ELSE BAD :(";
}?>

Answer 2

You have to supply <form> with action="" attribute to make your code work.

From the manual:

Since the role of forms in client-side Angular applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload that sends the data to the server. Instead some javascript logic should be triggered to handle the form submission in an application-specific way.

For this reason, Angular prevents the default action (form submission to the server) unless the element has an action attribute specified.

However, Angular encourages you to use ngSubmit and ajax requests that cause no page reloads.