AngularJS联系人表单与当前的app.js合并

AngularJS contact form app merge with the current app.js

本文关键字：app js 合并 联系人 表单 AngularJS      更新时间：2023-09-26

这是我当前的angular app.js，我希望它能与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('!');
}]);

这是websiteApp获取联系人表单工作教程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
      }
     });
   };
});

我已经使用了<html ng-app="kaidoweb">，它不允许我使用另一个ng-app。我试过它独立，它似乎工作，但我不能得到它与当前的应用程序的工作。

有没有办法合并它们或者其他标准的方法。如果有更好，更简单的方法来做到这一点，并且知道一些好的例子，我也会很感激的。

既然您已经创建了一个module，那么这个:

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

您不需要再创建一个。你应该做的是使用你自己的，只使用教程中的FormController。

另外，我不认为你需要使用注释//save the 'Contact Us' form中的代码，因为你要用教程中的函数替换这个函数。

然后你可以把我说的控制器，插入到你的app的末尾，然后按照剩下的。

我不是一个先进的AngularJS用户，但据我所知，这应该工作。

相关文章：