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;
});
index.html
TestHandleBars.zip