2
var drc = angular.module('DirectiveControllers',[]);

drc.controller('HeaderDrcCtrl', ['$scope','$http', function ($scope,$http) {
  if($.cookie('userEmail') != '') {
    $('#logout').show();
    $('#login').hide();
  }   

  $(document).on('click','#editForm', function() {
    $('#showEdit').show();
    $('#hideRegister').hide();
  });

  $scope.user = {};
  $scope.customers = {};
  $scope.signUp = function () {
    $http.post('/api/customers', {firstname: $scope.user.firstname, lastname: $scope.user.lastname, username:$scope.user.username, email:$scope.user.email, password: $scope.user.password})
      .success(function(data){
        $scope.customers.push({firstname: $scope.user.firstname, lastname: $scope.user.lastname, username:$scope.user.username, email:$scope.user.email, password: $scope.user.password});
        $scope.regMessage = data.Message;
        $scope.user = {};
      })
      .error(function(data){
          console.log('Error: ' + data);
      });
    }
  }]);

This is the my code which is directly using controller. But I want to divide in services and controller which is the best way to do that. Any quick help would be appreciated.

Thanks Raghvendra

Krzysztof Safjanowski
  • 7,292
  • 3
  • 35
  • 47
user3565243
  • 35
  • 8

2 Answers2

1

You service would return ajax promise from it. And about controller you shouldn't have jQuery in it. You can easily replace those jquery by ng-show or ng-if directive easily.

Service

drc.service('ajaxService',['$http' function($http){

  this.get = function(url){
    reutrn $http.get(url);
  }

  this.post = function(url, data){
    reutrn $http.post(url, data);
  }

}]);

Controller

drc.controller('HeaderDrcCtrl', ['$scope', 'ajaxService', function($scope, ajaxService) {
    if ($.cookie('userEmail') != '') {
        //alert($.cookie('userEmail'));
        $scope.showLogout = true;
        $scope.showLogin = false;
    }

    $(document).on('click', '#editForm', function() {
        //alert(1);
        $scope.showEdit = true;
        $scope.hideRegister = true;
    });

    $scope.user = {};
    $scope.customers = {};
    $scope.signUp = function() {

        ajaxService.post('/api/customers', {
                firstname: $scope.user.firstname,
                lastname: $scope.user.lastname,
                username: $scope.user.username,
                email: $scope.user.email,
                password: $scope.user.password
            })
            .success(function(data) {
                $scope.customers.push({
                    firstname: $scope.user.firstname,
                    lastname: $scope.user.lastname,
                    username: $scope.user.username,
                    email: $scope.user.email,
                    password: $scope.user.password
                });
                $scope.regMessage = data.Message;

                console.log($scope.regMessage);
                $scope.user = {};
                // console.log( $scope.customers);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    }
}]);

Markup

<div ng-if="showLogin">Login</div>
<div ng-if="showLogout">Logout</div>

Markup contain will shown if only showLogin is true then it will show Login div, same thing applied for the Logout div..If expression is true then only that div will be shown,

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • is this code will run for all the operation like edit and delete in the same way . but where this service code will be putted in that same file – user3565243 May 02 '15 at 09:54
  • @user3565243 you can add this code in different file but in should refer to the same angular module – Pankaj Parkar May 02 '15 at 09:55
  • ya i know that but i am new in angular and node.So can u please tell how to do that ng-show and ng-if – user3565243 May 02 '15 at 09:58
  • 1
    SyntaxError: missing ; before statement reutrn $http.get(url, config|| {}) – user3565243 May 02 '15 at 10:02
  • is jquery is the best practice to use in angular – user3565243 May 02 '15 at 10:18
  • @user3565243 absolutely no..you should use jquery only when you are going to use some plugin..& when you want to use jquery that should be lies inside an directive..which would be responsible for DOM manipulation – Pankaj Parkar May 02 '15 at 10:20
  • do u have any better reference for angular becuase i am learning by myself – user3565243 May 02 '15 at 10:23
  • @user3565243 http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/ here you can find beginner training. anyways does my answer helped you? – Pankaj Parkar May 02 '15 at 10:27
  • i need to ask u one thing that the service that u have created that handles all the get and post request but services are used as model in angular and alll the means all the business logic woluld lie there and controller will handle that model as u did . but in ur case the controller is handling the model is it right – user3565243 May 02 '15 at 10:34
  • @user3565243 currently we are handling our business logic in controller which is correct. service & factory are singleton they are used to share common sharable data..some times common method could also be added inside the service.. for more information refer this http://stackoverflow.com/a/28262966/2435473 – Pankaj Parkar May 02 '15 at 10:39
  • actually my approach was more structural like model are in services or factories and controller will handle that service in that way. but after all learn alots of thing by thanks sir Raghvendra – user3565243 May 02 '15 at 10:44
0

i am a first user and i am logging in to page. and another second user who also loggedin to the site.

i login first in to site and the second user after me . So i have to playing 20 sec my turn overs and second user turn starts after 20 sec my turn again comes. I am doing this code in socket.io and node.js and jquery and html so any please can help me .

Thanks Raghvendra Singh

user3565243
  • 35
  • 8