submit HTML form data from page to another html page using angularjs

Question

I need simple form submit from HTML to HTML page using angularjs. I tried using localstorage broadcast service injector etc but not working pls help.

my pluker code is here http://plnkr.co/edit/q3siKVPe9Nt0vXysIYVD?p=preview

HTML CODE:

<form name="personForm1" action="form2.html" method="post" novalidate>
  <label for="firstNameEdit1">First name:</label>
  <input id="firstNameEdit1" type="text" name="firstName" ng-model="firstName" required /><br />
  <label for="lastNameEdit1">Last name:</label>
  <input id="lastNameEdit1" type="text" name="lastName" ng-model="lastName" required /><br />
  <br />
  <button type="submit">Submit</button>
</form>

JS CODE:

angular.module("mainModule", [])
 .controller("mainController", function($scope, $http) {
   $scope.firstname = {};
   $scope.lastname = {};


   $scope.submitData = function(person, resultVarName) {
     var config = {
       params: {
         person: person
     }
   };

   $http.post("Form2.html", null, config)
     .success(function(data, status, headers, config) {
       $scope[resultVarName] = data;
     })
     .error(function(data, status, headers, config) {
       $scope[resultVarName] = "SUBMIT ERROR";
     });
   };
 });

Answer 1

Angular js is spa framework, which means there exist only one main html page which could be the home/default page of a application and other pages like login/forgot password will be stored as templates and rendered inside this main page.

you can think of this process as a swap-in swap-out logic, whenever any page is need to rendered, old page(template) is swapped out and a new page(template) will be rendered.

---

Refer to this plunker demo to understand this process better.

Below are some major things from plunker

Routing code:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
   .when('/home', {
     templateUrl: 'template.html',
     controller: 'Ctrl'
   })
   // route for the welcome/dashboard page
  .when('/welcome/:userName', {
    templateUrl: 'welcome.html',
    controller: 'welcomeCtrl'
  })
  // route for the forgot/Recover password page
  .when('/forgotPass', {
    templateUrl: 'forgotPass.html',
    controller: 'forgotPassCtrl'
  })
  //fallback url if nothing matches
  .otherwise({
    redirectTo: '/home'
  })
}]);

Code for navigating to new template, append parameters if any

$location.path("/welcome/" + $scope.userName);

There are many advantages of a spa:

• some common components which tend to appear on most of the pages can be placed in main and only the specific html snapshot is swapped-in or swapped-out on main page, this way same piece of code is not duplicated.
• Render time is improved since common components like header/footer is not rendered every time page navigation happens.
• Helps to achieve separation of concern for common components like header/footer, which improves modularity and readability of code.