Le contrôleur angulaire ne fonctionne pas avec le nœud express

Question

J'ai donc créé une application angulaire (version 1.5.7) et je voulais la déployer sur heroku.

J'ai dû implémenter Node et utilisé express pour servir le fichier index.html principal pour heroku pour le construire car il n'accepte pas les applications angulaires. Cependant quand je l'ai fait, mes deux contrôleurs se sont cassés. Mon contrôleur de formulaire de contact n'a pas rendu mes ng-messages et mon contrôleur de pied de page n'a jamais été rendu.

et dans la console que je reçois une erreur qui se lit « [ng: AREQ] Argument « contactCtrl » est pas une fonction, a obtenu undefined »

Vous pouvez consulter la version en direct ici - https://fathomless-scrubland-50887.herokuapp.com et mon github pour ce projet ici - https://github.com/StephenGrable1/AngularJS-Single-Page

Voici mon express server.js fichier

var express = require('express'); 
var app = express(); 

var port = process.env.PORT || 8080; 

app.use(express.static(__dirname)); 

app.get('/', function(req, res) { 

    res.sendfile('index.html', {root: __dirname }) 
}); 

app.listen(port, function() { 
    console.log('Our app is running on port ' + port); 
}); 

ce sont les deux contrôleurs qui fonctionnent bien avant et mis en œuvre le noeud EXPRE ss.

footer.js

angular 
    .module('Single-Page-App') 
    .directive('appFooter', function() { 
     return { 
      restrict: 'E', 
      template: '© Name {{ getYearCtrl.date | date:"yyyy" }}', 
      controller: function(){ 
       this.date = Date.now(); 
      }, 
      controllerAs:'getYearCtrl' 
     }; 
    }); 

contactCtrl.js

angular 
.module('Single-Page-App') 
.controller('contactCtrl', ['$scope', '$http', function($scope, $http){ 
     $scope.contact = {name : '', email : '', subject : '', message : ''}; 


     $scope.submitForm = function() { 
      var config = { 
       method: 'POST', 
       url : '../php/process-form.php', 
       data : { 
        'name' : $scope.contact.name, 
        'email': $scope.contact.email, 
        'subject': $scope.contact.subject, 
        'message' : $scope.contact.message 
       } 
      }; 
      var request = $http(config); 
      request.then(function (response){ 

       if(typeof(response.data) == 'string') { 
        // make all error messages blank when 
        // php return a string (which is the success message) 
        // which means there are no error messages being sent from php 
        $scope.nameError = ""; 
        $scope.messageError = ""; 
        $scope.subjectError = ""; 
        $scope.emailError = ""; 

        // put the success string from php into 
        // the successMsg so it can be accessed in the view 
        $scope.successMsg = response.data; 

        // clear all form values 
        // and set the inputs to prisitine and untouched 
        // so that angular will not display any error messages 
        // once a user submits the form successfully 

        $scope.contact = {}; 
        $scope.contactForm.$setPristine(); 
        $scope.contactForm.$setUntouched(); 

        console.log($scope.successMsg); 
        console.log("not an object"); 
       } else { 
        if(typeof(response.data) == 'object') { 
        // if php sends an object 
        // (which contains all the error messages present) 
        // populate variables with error messages 

        $scope.nameError = response.data['name-error']; 
        $scope.messageError = response.data['message-error']; 
        $scope.subjectError = response.data['subject-error']; 
        $scope.emailError = response.data['email-error']; 

        //clear the success message if errors come back from php 
        $scope.successMsg = ""; 

        console.log("it is an object"); 
        } 
       } 


      }, function (error){ 
       $scope.msg = error.data; 
       console.log($scope.msg); 

     }); 
    } 
}]); 

Je ne sais pas ce qui se casse la fonctionnalité de mes contrôleurs ...

Edit: et ceci est mon fichier main.js avec les routes

var app = angular.module('Single-Page-App', ['ui.router', 'ngMessages']); 

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/home'); 
    $stateProvider 
    .state("home", { 
     url:"/home", 
     views: { 
      "main@": { 
       templateUrl: "partials/home.html" 
      } 
     } 
    }) 
    .state("listen", { 
     url:"/listen", 
     views: { 
      "main@": { 
       templateUrl: "partials/listen.html" 
      } 
     } 
    }) 
    .state("watchHere", { 
     url:"/watch", 
     views: { 
      "main@": { 
       templateUrl: "partials/watch.html" 
      } 
     } 
    }) 
    .state("contact", { 
     url:"/contact", 
     views: { 
      "main@": { 
       templateUrl: "partials/contact.html" 
      } 
     } 
    }) 
}]) 

angular.bootstrap(document, ['Single-Page-App']); 

Answer 1

Définir le contactCtrl en utilisant

angular.module('Single-Page-App') 
.controller('contactCtrl ',...[])