Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>AngularJS Get Data</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
  <script>
    //共用服務，由後端取資料
    angular.module("mySvc", [])
    //Factory模式, Singleton
    .factory("dataHelper", function($http) {
      return {
        getViewModel: function(userId) {
          return $http.jsonp(
            "http://www.darkthread.net/kolab/labs/empdatajsonp.ashx", 
            { params: { callback: "JSON_CALLBACK", u: userId }});
        }
      };
    })
    //Service模式，每個Controller建一個Instance
    .service("dataAgent", function($http) {
      function agent() {
        var self = this;
        self.viewModel = null;
        self.read = function(userId) {
          $http.jsonp(
            "http://www.darkthread.net/kolab/labs/empdatajsonp.ashx", 
            { params: { callback: "JSON_CALLBACK", u: userId }})
          .success(function(data) {
            angular.copy(data, self.viewModel);
          });
        };
      }
      return new agent();
    });
    //引用mySvc服務
    angular.module("myApp", ["mySvc"])
    .controller("mainCtrl", function($scope, dataHelper, dataAgent) {
      $scope.search = "1";
      $scope.model = { EmpNo: "", EmpName: "" };
      $scope.getByHelper = function() {
        dataHelper.getViewModel($scope.search)
        .success(function(data) {
          angular.copy(data, $scope.model);
        });
      };
      dataAgent.viewModel = $scope.model;
      $scope.getByAgent = function() {
        dataAgent.read($scope.search);
      };
    });
  </script>
</head>
<body ng-controller="mainCtrl">
  <input ng-model="search" />
  <input type="button" ng-click="getByHelper()" value="Get by Helper" />
  <input type="button" ng-click="getByAgent()" value="Get by Agent" />
  <pre>{{ model | json }}</pre>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers