使用工厂方法在AngularJS中获取服务器数据

时间:2013-02-16 12:56:25

标签: angularjs

在一个基于Angular的小应用程序中。我创建了两个控制器,然后希望两个控制器都使用工厂方法从mysql数据库中获取数据。当我对它们进行硬编码时,我可以传递一组记录。但如果我试图通过http和/或使用资源来获取它们,我无法做到这一点。

最重要的......我不确定什么是最好的方法。你能帮忙吗?

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);
}

这两个控制器都可以与数据进行交互,这很酷。但这是硬编码的。我想要来自服务器的实际数据,我想来自ajax。我该怎么办呢。

使用$ resource还有什么特别的优势,如果是的话有什么好的教程吗?我试过这些文档,但没多大帮助。

1 个答案:

答案 0 :(得分:4)

为了简单起见,请使用$http module(请参阅$http vs $resource)。这也有一个好处,$ http会返回一个你应该能够使用的承诺,如下所示(改编自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
});

或者,如果两个控制器位于同一路径上而另一个控制器包含在另一个控制器中,则使用$scope.$parent.data访问父控制器的范围可能更容易。