Welcome! I'm having a little trouble setting up a discussion platform where users can post and comment. I've created two REST services for this purpose, but it seems like the commenting functionality is not working as expected. Could anyone help me identify where the issue lies or suggest a better approach?
Quick note: I'm new to AngularJS and would really appreciate your assistance with this for my app. Thank you in advance!
controller.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', []).
controller('MyCtrl1', function($scope, Customers) {
$scope.allcustomers = Customers.query();
}).
controller('MyCtrl2', ['$scope', 'comments', '$location',
function($scope, comments, $location) {
/* callback for ng-click 'createUser': */
$scope.createComment = function() {
comments.create($scope.PComment)
$scope.allcomments.push($scope.PComment);
$scope.PComment = "";
$location.path('/view2');
$scope.allcomments = PComment.query();
};
}
]).
controller('MyCtrl3', ['$scope', 'postmain', '$location',
function($scope, postmain, $location) {
/* callback for ng-click 'createUser': */
$scope.createPost = function() {
postmain.create($scope.PPostMain)
$scope.allposts.push($scope.PPostMain);
$scope.PPostMain = "";
$location.path('/view2');
}
$scope.allposts = postmain.query();
}]);
services.js
'use strict';
/* Services */
angular.module('myApp.services', ['ngResource'], function($provide) {
$provide.factory('postmain', function($resource) {
return $resource('http://localhost:8080/pingleMe/webresources/postmain', {}, {
query: {method: 'GET', isArray: true},
create: {method: 'POST'}
});
});
$provide.factory('comments', function($resource) {
return $resource('http://localhost:8080/pingleMe/webresources/comments', {}, {
query: {
method: 'GET',
isArray: true
},
create: {method: 'POST'}
});
});
//
// $provide.factory('Comments', function($resource) {
// return $resource('http://localhost:8080/CustomerBack/webresources/comments', {}, {
// query: {
// method: 'GET',
// isArray: true
// },
// create: {method: 'POST'}
// });
// });
});
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl3'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
partila2.html
<div class="container">
<h1>What's on your mind?</h1>
<form novalidate="novalidate" class="form-horizontal">
<div class="control-group">
<div class="controls">
<textarea ng-model="PPostMain.postText" placeholder="whats in your mind" style='width:550px'></textarea>
<button ng-click='createPost()' class="btn btn-warning">Post</button>
<h4>Trending Posts</h4>
<p ng-repeat="post in allposts">
{{ post.postText}} <br>
<label ng-repeat="comnt in allcomments">{{comnt}}</label>
<textarea ng-model="PComment.commentText" placeholder="write comment" style='width:350px'></textarea>
<button ng-click='createComment()' class="btn btn-success">Comment</button>
</p>
</div>
</div>
</form>
</div>
index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Pingle</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="app/lib/angular/i18n/twitter-bootstrap/css/bootstrap.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="app/lib/angular/i18n/twitter-bootstrap/css/bootstrap.css"></script>
</body>
</html>