CODEWITHSUNDEEP
javascriptphpangularjsformscontacts
rKaiser
rKaiser

Reputation: 37

AngularJS contact form app merge with the current app.js

This is my current angular app.js, which I want it to work with the website.js.

    'use strict';

// angular.js main app initialization
var app = angular.module('kaidoweb', []).
    config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
        when('/', {
         templateUrl: 'pages/index.html',
         activetab: 'index',
         controller: HomeCtrl 
       }).
       /* when('/mainpage/:mainpageId', {
          templateUrl: function (params) { return 'pages/' + params.mainpageId + '.html'; },
          controller: ProjectCtrl,
          activetab: 'mainpage'
        }).*/
        when('/works', {
          templateUrl: 'pages/works.html',
          controller: PrivacyCtrl,
          activetab: 'works'
        }).

        otherwise({ redirectTo: '/' });
    }]).run(['$rootScope', '$http', '$browser', '$timeout', "$route", function ($scope, $http, $browser, $timeout, $route) {

        $scope.$on("$routeChangeSuccess", function (scope, next, current) {
          $scope.part = $route.current.activetab;
        });


        // save the 'Contact Us' form
        $scope.save = function () {
          $scope.loaded = true;
          $scope.process = true;
          $http.post('sendemail.php', $scope.message).success(function () {
              $scope.success = true;
              $scope.process = false;
          });
        };
  }]);

app.config(['$locationProvider', function($location) {
    $location.hashPrefix('!');
}]);

and this is websiteApp to get the contact form working tutorial http://sarahcapecci.com/blog/processing-a-form-with-angularjs-php/

    // creating Angular Module
  var websiteApp = angular.module('websiteApp', []);
  // create angular controller and pass in $scope and $http
  websiteApp.controller('FormController',function($scope, $http) {
  // creating a blank object to hold our form information.
  //$scope will allow this to pass between controller and view
  $scope.formData = {};
  // submission message doesn't show when page loads
  $scope.submission = false;
  // Updated code thanks to Yotam
  var param = function(data) {
        var returnString = '';
        for (d in data){
            if (data.hasOwnProperty(d))
               returnString += d + '=' + data[d] + '&';
        }
        // Remove last ampersand and return
        return returnString.slice( 0, returnString.length - 1 );
  };
  $scope.submitForm = function() {
    $http({
    method : 'POST',
    url : 'process.php',
    data : param($scope.formData), // pass in data as strings
    headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
  })
    .success(function(data) {
      if (!data.success) {
       // if not successful, bind errors to error variables
       $scope.errorName = data.errors.name;
       $scope.errorEmail = data.errors.email;
       $scope.errorTextarea = data.errors.message;
       $scope.submissionMessage = data.messageError;
       $scope.submission = true; //shows the error message
      } else {
      // if successful, bind success message to message
       $scope.submissionMessage = data.messageSuccess;
       $scope.formData = {}; // form fields are emptied with this line
       $scope.submission = true; //shows the success message
      }
     });
   };
});

So I'm already using <html ng-app="kaidoweb"> and it doesn't let me use another ng-app. I tried it standalone and it seemed to work, but I can't get it to with the work the current App.

So is there a way to merge them somehow or another standard way to do this. Also if there are better, simpler ways of doing this and know some good examples I would appreciate those as well.

Upvotes: 0

Views: 613

Answers (1)

celsomtrindade
celsomtrindade

Reputation: 4671

Since you already have a module created, this one:

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

You don't need to create another one. What you should do is use yours instead and just use the FormController from the tutorial.

Also, i don't think you'll need to use the code inside the comment //save the 'Contact Us' form because you are going to replace this function with the one in the tutorial.

Then you can just take the controller i said, insert it at the end of your app and follow the rest.

I'm not an advanced AngularJS user, but as far as i know, this should work. At least for me, it's working.

Upvotes: 1

Related Questions