そこで、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']);