programing

Angular 간의 코드 재사용 방법JS 클라이언트 및 Node.js 서버

powerit 2023. 10. 10. 21:17
반응형

Angular 간의 코드 재사용 방법JS 클라이언트 및 Node.js 서버

Angular 간에 코드를 재사용/공유하기 위한 최선의 방법은 무엇입니까?JS 클라이언트와 Node.js 서버?

Angular를 구현했습니다.JS application.이제 저는 고객에게 데이터를 제공하는 RESTful-server를 구현해야 합니다.예를 들어 페이스북/구글/트위터의 타사 휴식 클라이언트와 같이 서버에서 일부 클라이언트 측 각도 서비스를 다시 사용할 수 있습니다. 각도 의존성 주입을 집중적으로 사용하고 의존성이 있습니다.$http,$q그 외에도 여러 가지 서비스가 있습니다.

이상적으로 AngularJS에 포함된 의존성 주입 프레임워크를 정말 좋아하기 때문에 AngularJS에 기반한 일종의 서버 프레임워크를 갖추면 좋을 것 같습니다.의존성 주입 프레임워크와 UI와 무관한 모든 각도 서비스를 포함하고 라우팅 및 인증과 같은 필수 서버측 기능을 추가하는 서버 프레임워크입니다.하지만 아쉽게도 그런 해결책을 찾지 못했습니다. (그런 틀이 존재하는지 알려주세요!)

그렇다면 적어도 클라이언트와 서버 간의 코드 재사용을 가능하게 하기 위해서는 어떤 대안이 있을까요?특히 코드에 대한 코드 재사용을 가능하게 하는 것은 다음과 같습니다.$http,$q기타 각도각도 프레임워크 및 각도 서드파티에 포함된 JS 서비스(예:angular-cache).

브라우저가 아닌 환경에서 각도 사용

Ben Clinkin 수염은 각 분포를 준비했습니다.commonJS브라우저가 아닌 환경에서 실행할 수 있는 모듈(HERE):

Jsdom으로 컴파일되어 Common으로 제공되는 AngularJSJS 모듈.각도 테스트용브라우저에 의존하지 않는 JS 코드.


체리를 좀 더 따고 싶다면 각도 2.0을 기다려야 할 것입니다.

클라이언트 측과 서버 측 간 코드 공유

그리고 또...벤 클린킨 수염. THESS TALK에서 그는 각진 프로젝트에서 브라우징을 사용하는 방법에 대해 설명합니다.이 접근 방식의 한 가지 멋진 특징은 함수/객체를 각도와 어떻게든 연결되지 않은 별개의 개체로 선언할 수 있다는 것입니다. 따라서 함수/객체를 다른 맥락에서도 다시 사용할 수 있습니다.

예를 들어 다음과 같습니다.

app.js

var app = angular.module('someModule',[]);
...
app.factory('someService', require('./some/path.js'));
...

./some/path.js

module.exports = function(dep1, dep2){
  ...
  return {
     ...
  }
}
module.exports.$inject['dep1', 'dep2']; // for minification;

Angular 1.x는 꽤나 스스로 포함된 프레임워크입니다.기능을 분리하는 계획이 있지만 버전 2에서 나올 것입니다.따라서 브라우저와 node.js에 대해 $httpBackend의 다른 구현을 제공하는 것만으로도 간단합니다.

저는 CommonJS로 node.js와 브라우저 간에 코드를 공유하는 간단한 데모를 만들었습니다.이는 검증 공유, 모델 등에 사용할 수 있습니다.

요구사항 사용하기JS는 여기서 말이 됩니다.

이렇게 Angular 내부에 모델/서비스를 정의하는 대신:

(function (angular) {
  "use strict";
  angular.module('myModule').factory('MyModel', function (Deps) {
    var Model = function () {
      // do things here
    };
    return Model;
  });
}(window.angular));

이렇게 두 개의 파일로 나누면 됩니다.

model.js:

(function (define) {
  "use strict";
  define([], function () {
    var factoryConstructor = function (deps) {
      var Model = function () {
        // do things here
      };
      return Model;
    };
    return factoryConstructor;
  });
}(window.define));

무엇이든지.js

(function (define, angular) {
  "use strict";
  define(['Model'], function (Model) {
    angular.module("myModule").factory("myModel", Model);
  });
}(window.define, window.angular));

이를 구현하는 방법에 대한 좋은 예를 보려면 이 비디오를 확인하십시오. 해당 비디오의 저장소도 있습니다.

언급URL : https://stackoverflow.com/questions/22760920/how-to-re-use-code-between-angularjs-client-and-node-js-server

반응형