0

そこで、Angular アプリ (バージョン 1.5.7)を作成し、それを heroku にデプロイしたいと考えました。

Node を実装する必要があり、Express を使用してメインの index.html ファイルを提供し、heroku をビルドしてビルドしました。しかし、これを行ったとき、両方のコントローラーが壊れました。お問い合わせフォーム コントローラーは ng-messages をレンダリングせず、フッター コントローラーはまったくレンダリングされませんでした。

コンソールに「[ng:areq] Argument 'contactCtrl' is not a function, got undefined」というエラーが表示されます

ここでライブ ビルドを確認できます - https://fathomless-scrubland-50887.herokuapp.comと、このプロジェクトの私の github - https://github.com/StephenGrable1/AngularJS-Single-Pageです。

これが私のエクスプレスserver.jsファイルです

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);
});

これらは、ノードとエクスプレスを実装する前に正常に動作する 2 つのコントローラーです。

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);

        });
    }
}]);

何がコントローラーの機能を壊しているのかわかりません...

編集:これはルートを含む私のmain.jsファイルです

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']);
4

1 に答える 1