The Full AngularJS Application

Listing 27.18 shows the full AngularJS application code all together. Notice that line 1 defines the application and then the following code adds the commentSrv service, photoController, and pageController controllers.

Listing 27.18 comment_app.js: Implementing an AngularJS application that supports comments on webpages

Click here to view code image

01 var app = angular.module('myApp', []);
02 function CommentObj($http) {
03   this.getComment = function(commentId, callback){
04     $http.get('/comments/get', {params: {commentId: commentId}})
05       .success(function(data, status, headers, config) {
06         callback(null, data);
07       })
08       .error(function(data, status, headers, config) {
09         callback(data, {});
10       });
11   };
12   this.addComment = function(rootCommentId, parentId,
13                              newComment, callback){
14     $http.post('/comments/add', { rootCommentId: rootCommentId,
15                                   parentCommentId: parentId,
16                                   newComment: newComment })
17     .success(function(data, status, headers, config) {
18       callback(null, data);
19     })
20     .error(function(data, status, headers, config) {
21     });
22   };
23 }
24 app.service('commentSrv', ['$http', CommentObj]);
25 app.controller('photoController', ['$scope', '$http', 'commentSrv',
26                               function($scope, $http, commentSrv) {
27     $http.get('/photos')
28      .success(function(data, status, headers, config) {
29         $scope.photos = data;
30         $scope.photo = $scope.photos[0];
31         $scope.loadComments();
32       })
33       .error(function(data, status, headers, config) {
34         $scope.photos = [];
35       });
36     $scope.loadComments = function(){
37       commentSrv.getComment($scope.photo.commentId,
38                             function(err, comment){
39         if(err){
40           $srope.commentThread = {};
41         } else {
42           $scope.commentThread = comment;
43         }
44       });
45     };
46     $scope.addReply = function(parentCommentId, subject, body){
47       var newComment = {subject:subject, body:body};
48       commentSrv.addComment($scope.commentThread._id,
49                             parentCommentId,
50                             newComment, function(err, comment){
51           $scope.loadComments();
52         });
53     };
54     $scope.setPhoto = function(photoId){
55       $http.get('/photo', {params: {photoId: photoId}})
56         .success(function(data, status, headers, config) {
57             $scope.photo = data;
58             $scope.loadComments();
59           })
60         .error(function(data, status, headers, config) {
61             $scope.photo = {};
62           });
63     };
64   }]);
65 app.controller('pageController', ['$scope', '$http','commentSrv',
66                             function($scope, $http, commentSrv) {
67      $http.get('/page', {params:{pageName:"Photos Page"}})
68        .success(function(data, status, headers, config) {
69           $scope.page = data;
70           $scope.loadComments();
71         })
72         .error(function(data, status, headers, config) {
73           $scope.Page = {};
74         });
75      $scope.addReply = function(parentCommentId, subject, body){
76        var newComment = {subject:subject, body:body};
77        commentSrv.addComment($scope.commentThread._id,
78                              parentCommentId,
79                              newComment, function(err, comment){
80          $scope.loadComments();
81        });
82      };
83      $scope.loadComments = function(){
84        commentSrv.getComment($scope.page.commentId,
85                              function(err, comment){
86          if(err){
87            $srope.commentThread = {};
88          } else {
89            $scope.commentThread = comment;
90          }
91        });
92      };
93    }]);