Ok I have like 2 angular apps. One is automatically and the other one is bootstrapped.
Now everything works mostly fine but in console I have this error:
Error: Argument 'FormController' is not a function, got undefined at Error (native) at cb ( etc...
But the form works I have tested it, tho the error is still there. Now the thing that breaks it is that I want to place the form above the ng-view div but when I'm doing so then the ng-view div stops working.
When I deleted the ng-controller="FormController" from the form, then the ng-view div pages appear but form loses it's function obviously.
Maybe someone more experienced can spot the problem or offer a possible alternative.
Strip of the code.
<html ng-app="kaidoweb">
<head>
<!-- add javascripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script type="text/javascript">
// 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
}
});
};
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('websiteApp'), ['websiteApp']);
});
</script>
</head>
<body>
<div style="position:relative">
<div ng-view></div>
</div>
<div id="websiteApp" class="contactRow">
<img class="close" src="img/close.png" ng-click="closeForm()" />
<form ng-submit="submitForm()" ng-controller="FormController" novalidate class="contactForm" name="form" ng-hide="loaded">
<input class="input" type="text" name="name" placeholder="SINU NIMI" ng-model="formData.name" ng-class="{'error' : errorName}">
<input class="input2" type="email" name="email" placeholder="SINU E-MAIL" ng-model="formData.email" ng-class="{'error' : errorEmail}">
<div ng-class="{'submissionMessage' : submission}" ng-bind="submissionMessage"></div>
</form>
</div>
</body>
</html>
EDIT! extra code as demanded! app.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('/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;
});
}]);
app.config(['$locationProvider', function($location) {
$location.hashPrefix('!');
}]);
And controller.js
'use strict';
// optional controllers
function HomeCtrl($scope, $http) {
}
function ProjectCtrl($scope, $http) {
}
function PrivacyCtrl($scope, $http, $timeout) {
}
function AboutCtrl($scope, $http, $timeout) {
}
