This is the section, where we will discuss the common questions or myths about Javascript, JQuery and AngularJS!


Why Angularjs over jquery?

  • MVC (MVVM)
  • Faster DOM manipulation
  • Totally modular
  • Less code, more work
  • Testing ready framework
  • Templating
  • Easy Routing
  • Single page application

is jquery mvc?

No, it just helps MVC frameworks. It can be integrated with MVC frameworks.


if my application is not single page, should I use angularjs?

Angular is ideal for single page applications, but not limited to it. Yes, it is totally upto you if you still want to use AngularJS for “non-single-page” application.


what is better ‘service’ or ‘factory’? what should I use? why?

There is no proper answer to this. Both are different design¬†approach in terms coding. It is perfectly fine to use any of them. The only thing to keep in mind is in services, we don’t have to create any external object to hold the data. Since it is a constructor function, we can use functions/data using ‘this’.

Let’s talk about the major difference¬†between factory and service:

Generally, factories are used in AngularJS because

  • It is the most common way of getting objects into AngularJS dependency.
  • Sophisticated creation logic.

what should i do to use $scope in my custom service/factory?

We can’t use $scope as a dependency injection parameter in our custom service or factory but we rather use a promise in our controller, which then will give us the $scope variable access. Because, eventually our controller has the access over $scope variables.

How we do it?
Suppose we have a custom service that fetches user information from the database.

// custom service to get the information
app.service('getUserService',["$http", function($http){

    this.getData = function() {
        return $http({
            "url": "/getUsers",
            "method": "GET"
        }).success(function (data) {
            if (data.status == "200") {
                return data.data;
            }
        }).error(function (err) {
            alert('something went wrong');
            return err;
        })
    }
}]);

Once we get the data from the service, we use a promise in our controller which will handle/set scope variables for my view/html file.

app.controller('PluginCtrl',['$scope', 'getUserService',
    function($scope, getUserService){

        //call getUserService to get the data from db
        getDetails = getUserService.getData();
        getDetails.then(function(result) {
            $scope.name = result.data.data.name;
            $scope.level = result.data.data.userType;
        });

Also, if you need to send your $scope variable to your custom service and access that variable/modify it, then it can be done by the following way.

app.controller('myCtrl', ["$scope", "customService", function($scope, customService) {
   $scope.info = "Welcome to the custom service information";
   var a = $scope.info;
   $scope.serviceInfo = customService.getInfo(a);
}]);
app.service('customService', function(){
   this.getInfo = function(a){
       alert("Controller scope variable passed is: "+a);
   }
});