Using factory method to get server data in AngularJS

Question

in a small Angular based application. I created two controllers and then want both the controllers to get data from a mysql database using a factory method. I can pass a set of records when I hard code them. but if I try to get those through http and/or using resource, I am not able to do that.

Most important... I am not sure what will be the best approach. Can you please help.

var myApp = angular.module('myApp', ['ngResource']);
myApp.factory('Data', function() {
  var person = [
    {name: "Mark Webber", sex: "Male", skills: "none", team: "webdev"},
    {name: "Danny Web", sex: "Male", skills:"asdsad", team: "webdev"},
    {name: "Steffy Graph", sex: "Female", skills:"ada", team: "accounts"},
    {name: "Anna Martin", sex: "Female", skills:"asdsa", team: "webdev"}
  ];
  return person;
});

function tricoreContrller($scope, Data, newData) {
  $scope.users = Data;
  console.log(Data);
}

function webdevController($scope, Data, newData) {
  $scope.users = newData;
  console.log(newData);
}

Both these controllers can interact with Data which is cool. But this is hard coded. I want the actual data coming from server which I want to come from ajax. How should I do this.

And also is there any particular advantage of using $resource, if yes any good tutorial? I tried the docs but didn't help much.

why not just have both of your controllers call the same ajax endpoint from your server? — Chris
– Chris, Commented Feb 16, 2013 at 16:23
yes I can... but the basic idea is that I have a single service which will give me the data and I will pass that data across the controllers as per requirement. And that is why I am not sure how to approach this. Use $http and $resource... — Amitav Roy
– Amitav Roy, Commented Feb 16, 2013 at 16:33

Community · Accepted Answer · 2017-05-23 11:45:28Z

4

To keep it simple, use the $http module (see $http vs $resource). This has also the advantage that $http returns a promise which you should be able to use as follows (adapted from delaying-controller-initialization).

function tricoreContrller($scope, data) {
  $scope.users = data;
}

function webdevController($scope, data) {
  $scope.users = data;
}

var resolveFn = {
    data : function($http) {
        return $http({
            method: 'GET', 
            url: 'http://server/getJSON'
        });
    }
};
tricoreContrller.resolve = resolveFn;
webdevController.resolve = resolveFn;

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: tricoreContrller,
        resolve: tricoreContrller.resolve
    });
    // same for the other route for webdevController
});

Alternatively, if the two controllers are on the same route and one is contained in the other, it may be easier to access the parent controller's scope with $scope.$parent.data.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Feb 16, 2013 at 17:59

mb21

40.3k8 gold badges130 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JL Griffin Over a year ago

Sorry to drag up an old question but how would this get data from a MySQL database? it looks to me like what you wrote there will pull data from a hard coded json file rather than a database? am i incorrect?

Collectives™ on Stack Overflow

Using factory method to get server data in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related