[angularjs] AngularJS 애플리케이션에 작은 유틸리티 기능을 어떻게 추가 할 수 있습니까?

7/1/15 편집 :

나는 꽤 오래 전에이 답변을 썼고 한동안 각도를 많이 유지하지 않았지만이 답변이 여전히 상대적으로 인기가있는 것처럼 보이므로 @nicolas 아래는 좋습니다. 우선, $ rootScope를 주입하고 헬퍼를 연결하면 모든 컨트롤러에 추가 할 필요가 없습니다. 또한 추가하는 것이 Angular 서비스 또는 필터로 생각되어야하는 경우 그러한 방식으로 코드에 채택되어야한다는 데 동의합니다.

또한 현재 버전 1.4.2부터 Angular는 “Provider”API를 제공하며이 블록은 구성 블록에 주입 될 수 있습니다. 자세한 내용은 다음 자료를 참조하십시오.

https://docs.angularjs.org/guide/module#module-loading-dependencies

module.config 내부의 값에 대한 AngularJS 종속성 주입

요즘 Angular를 실제로 적극적으로 사용하지 않고 실제로 새로운 베스트를 준수한다는 것을 느끼지 않고 새로운 답변을 위험에 빠뜨리고 싶지 않기 때문에 아래의 실제 코드 블록을 업데이트 할 것이라고 생각하지 않습니다. 관행. 다른 사람이 그것에 대해 느끼면 반드시 그것을 찾으십시오.

2/3/14 편집 :

이것에 대해 생각하고 다른 답변을 읽은 후에 실제로 @Brent Washburne과 @Amogh Talpallikar가 가져온 방법의 변형을 선호한다고 생각합니다. 특히 isNotString () 또는 이와 유사한 유틸리티를 찾고 있다면. 여기서 명백한 장점 중 하나는 각도 코드 외부에서 다시 사용할 수 있으며 구성 기능 내에서 사용할 수 있다는 것입니다 (서비스로는 할 수 없음).

즉, 서비스를 올바르게 사용해야하는 일반적인 방법을 찾고 있다면 이전의 대답은 여전히 ​​좋은 방법이라고 생각합니다.

내가 지금 할 일은 :

app.js :

var MyNamespace = MyNamespace || {};

 MyNamespace.helpers = {
   isNotString: function(str) {
     return (typeof str !== "string");
   }
 };

 angular.module('app', ['app.controllers', 'app.services']).
   config(['$routeProvider', function($routeProvider) {
     // Routing stuff here...
   }]);

controller.js :

angular.module('app.controllers', []).
  controller('firstCtrl', ['$scope', function($scope) {
    $scope.helpers = MyNamespace.helpers;
  });

그런 다음 부분적으로 사용할 수 있습니다.

<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>

아래의 오래된 답변 :

서비스로 포함하는 것이 가장 좋습니다. 서비스로 포함하여 여러 컨트롤러에서 다시 사용하려는 경우 코드를 반복하지 않아도됩니다.

HTML 부분에서 서비스 기능을 사용하려면 해당 기능을 해당 컨트롤러의 범위에 추가해야합니다.

$scope.doSomething = ServiceName.functionName;

그런 다음 부분적으로 사용할 수 있습니다.

<button data-ng-click="doSomething()">Do Something</button>

이 모든 것을 정리하고 너무 번거 로움없이 해줄 수있는 방법이 있습니다 :

컨트롤러, 서비스 및 라우팅 코드 / 구성을 controllers.js, services.js 및 app.js의 세 파일로 분리하십시오. 최상위 계층 모듈은 “app”이며 app.controllers 및 app.services를 종속성으로 사용합니다. 그런 다음 app.controllers 및 app.services를 자체 파일에서 모듈로 선언 할 수 있습니다. 이 조직 구조는 Angular Seed 에서 가져온 것입니다 .

app.js :

 angular.module('app', ['app.controllers', 'app.services']).
   config(['$routeProvider', function($routeProvider) {
     // Routing stuff here...
   }]);  

services.js :

 /* Generic Services */
 angular.module('app.services', [])
   .factory("genericServices", function() {
     return {
       doSomething: function() {
         //Do something here
       },
       doSomethingElse: function() {
         //Do something else here
       }
    });

controller.js :

angular.module('app.controllers', []).
  controller('firstCtrl', ['$scope', 'genericServices', function($scope, genericServices) {
    $scope.genericServices = genericServices;
  });

그런 다음 부분적으로 사용할 수 있습니다.

<button data-ng-click="genericServices.doSomething()">Do Something</button>
<button data-ng-click="genericServices.doSomethingElse()">Do Something Else</button>

이렇게하면 각 컨트롤러에 한 줄의 코드 만 추가하고 해당 범위에 액세스 할 수있는 모든 서비스 기능에 액세스 할 수 있습니다.

답변

angular.module('myApp').run(function($rootScope){
  $rootScope.isNotString = function(str) {
   return (typeof str !== "string");
  }
});

angular.module('myApp').factory('myHelperMethods', function(){
  return {
    isNotString: function(str) {
      return (typeof str !== 'string');
    }
  }
});

angular.module('myApp').run(function($rootScope, myHelperMethods){
  $rootScope.helpers = myHelperMethods;
});

angular.module('myApp').filter('myFilter', function(myHelperMethods){
  return function(aString){
    if (myHelperMethods.isNotString(aString)){
      return
    }
    else{
      // something else 
    }
  }
);

{{ aString | myFilter }}   

function myUtilityFunction(x) { return "do something with "+x; }

$scope.doSomething = myUtilityFunction;

{{ doSomething(x) }}

ng-click="doSomething(x)"

app.factory('Helpers', [ function() {
      // Helper service body

        var o = {
        Helpers: []

        };

        // Dummy function with parameter being passed
        o.getFooBar = function(para) {

            var valueIneed = para + " " + "World!";

            return valueIneed;

          };

        // Other helper functions can be added here ...

        // And we return the helper object ...
        return o;

    }]);

app.controller('MainCtrl', [

'$scope',
'Helpers',

function($scope, Helpers){

    $scope.sayIt = Helpers.getFooBar("Hello");
    console.log($scope.sayIt);

}]);

function doSomething( a, b ) {
    return a + b;
};

angular.module('moduleName',[])
    // Define
    .constant('$doSomething', doSomething)
    // Usage
    .controller( 'SomeController', function( $doSomething ) {
        $scope.added = $doSomething( 100, 200 );
    })
;

    angular.module('fnetApp').controller('HeaderCtrl', function ($scope, MyHelperService) {
      $scope.servHelper = MyHelperService;
    });


<div ng-controller="HeaderCtrl">
  <div ng-view=""></div>
</div>