AngularJS 하나의 모듈에 factory 다중 등록

mirinae.maru

■ utilsFactory.js

  • line 3 : fatory.utils라는 angularjs 모듈 선언
  • line 4 : fatory.utils모듈안에 $dataUtils라는 angularjs factory 선언
  • line 9 : $dataUtils factory에 getHello라는 함수 선언
  • line 12 : $dataUtils factory에 getBye라는 함수 선언
  • line 17 : fatory.utils모듈안에 $dateUtils라는 angularjs factory 선언
  • line 19 : $dataUtils factory에 getNow라는 함수 선언 
    'use strict';

angular.module('factory.utils', [])
.factory('$dataUtils', function(){
  return {
    /**
     * hello
     */
    getHello : function (myName) {
      return "Hello, " + myName;
    },
    getBye : function ( myName ) {
      return "Bye, " + myName;
    }
  }
})
.factory('$dateUtils', function() {
  return {
    getNow : function () {
      return new Date();
    }
  }
});

     
     
     

    ■ factory.html

  • line 7 : angualarjs library import(angularjs.js)
  • line 8 : $dataUtils factory가 등록된 factory.utils 모듈 import(utilsFactory.js)
  • line 10 : myApp 모듈을 선언하고 myApp모듈에 factory.utils 모듈을 주입(injection)
  • line 12 : myAppCtrl 컨트롤러를 선언하고 $dataUtils, $dateUtils factory를 주입(injection)
  • line 14,15 : $dataUtils factory의 getHello, getBye 함수 사용
  • line 18 : $dateUtils factory의 getNow 함수 사용 
    <!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/custom/utilsFactory.js'></script>
<script>
var myApp = angular.module("myApp",['factory.utils']);

myApp.controller("myAppCtrl", function($scope, $dataUtils, $dateUtils){	
  var myName = "nextman";
  $scope.helloName = $dataUtils.getHello(myName);
  $scope.byeName = $dataUtils.getBye(myName);
  console.log( "[mirinae.maru] myName :  " + $scope.helloName );
  console.log( "[mirinae.maru] bye :  " + $scope.byeName );
  console.log( "[mirinae.maru] now :  " + $dateUtils.getNow() );
});
</script>
</head>
<body ng-controller="myAppCtrl">
	<h1>
		AngularJS Factory<br/>
	</h1><hr/>
	<div>{{helloName}}</div>
	<div>{{byeName}}</div>
</body>
</html>

     
     
     

    ■ 실행 결과