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라는 함수 선언 
    'use strict';

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

     
     
     

    ■ 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 factory를 주입(injection) 
    <!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){	
	
  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 );
});
</script>
</head>
<body ng-controller="myAppCtrl">
  <h1>
    AngularJS Factory<br/>
  </h1><hr/>
  <div>{{helloName}}</div>
  <div>{{byeName}}</div>
</body>
</html>

     
     
     

    ■ 실행 결과