2017.07.28 12:05

controller에 늘어나는 변수와 함수들을 유사한 성격을 가진 것들을 묶어 service로 분리하여 코드를 관리


index.html

<!DOCTYPE html>

<html ng-app="web">

<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />


  <script src="app.js"></script>

  <script src="controller.js"></script>

  <script src="service.js"></script>  

</head>


<body ng-controller="ctrl">

  <h1>{{Data}}</h1>

</body>

</html>


app.js

var app = angular.module('web', []);


controller.js

// myService의 명시적으로 선언하여 사용

app.controller("ctrl", ["$scope", "myService", function($scope, myService) {

  $scope.Data = myService.get();

}]);

// 또는

app.controller("ctrl", function($scope, myService) {

  $scope.Data = myService.get();

});


service.js

app.factory("myService", function() {

  var service = {

    Data:  "Datasafasfsad",

    

    get: function() {

      return service.Data;

    }

  }

  // controller에서 사용할 object를 리턴

  return service;

});


샘플

Posted by CoolDragon

댓글을 달아 주세요