programing

Angular.js는 컨트롤러를 앱 네임스페이스로 정리합니다.

cafebook 2023. 3. 19. 18:29
반응형

Angular.js는 컨트롤러를 앱 네임스페이스로 정리합니다.

새로운 프로젝트에서 Angular.js를 사용하기 시작했는데, 기본 튜토리얼에서 보면 대부분 하나의 controllers.js 파일로 각각의 컨트롤러 함수가 윈도우 객체에 바인딩되어 있습니다.

기존 "myApp" 네임스페이스를 사용하여 다음과 같이 컨트롤러를 추가하는 것이 좋습니다.

myApp.controllers = {};
myApp.controllers.userItem = function($scope) {}

모든 컨트롤러는 생성된 "myApp.controllers" 개체 또는 "window.myApp.controllers" 개체의 일부가 됩니다.

컨트롤러나 기타 아이템, 커스텀 서비스, 디렉티브 등을 취급하는 보다 적절하거나 조직적인 방법을 제안하고 있는 사람이 있습니까?

또, 각 컨트롤러를 독자적인 파일에 짜넣는 것에 대해서도 고민하고 있습니다만, 최종적으로 운용용으로 조합할 수 있게 됩니다만, 앱의 크기에 따라서는, 다소 과잉인 경우가 있어, 파일간에 튕기는 작업이 많아질 뿐입니다.

어떤 제안이라도 해주시면 감사하겠습니다.

감사합니다!

좋은 질문입니다!

튜토리얼과 설명서가 코드에 대해 "계층별 패키지" 방식을 취하는 것은 마음에 들지 않습니다.아마도 교육 개념의 편의를 위해서라고 생각합니다만, 그러한 접근방식은 현실에서는 적용 범위가 한정되어 있습니다.

기능별로 패키지화하는 것이 훨씬 더 나은 접근법입니다.

|- README
|- src/
   |- app/
      |- app.js
      |- feature1/
      |- feature2/
      |- ...
   |- vendor/
      |- angular/
      |- bootstrap/
      |- ...
   |- assets/
   |- less/
   |- index.html

안에서.src/app작업 중인 사이트의 섹션(메뉴 등)과 경로(제품 목록 및 제품 상세 등)에 따라 콘텐츠를 패키징할 수 있습니다.각각 다음과 같이 선언할 수 있습니다.

angular.module( 'products', [
  'productCatalog',
  ...
])

각 모듈에는 독자적인 루트를 설정할 수 있습니다.

.config( [ '$routeProvider', function( $routeProvider ) {
  $routeProvider.when( '/products', { ... } );
  $routeProvider.when( '/products/:id', { ... } );
});

컨트롤러 등:

.controller( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]);

따라서 함께 제공되는 모든 것은 동일한 디렉토리에 패키지됩니다.또한 모든 컴포넌트를 파일당 1개의 모듈로 별도의 파일에 저장할 수 있습니다(원하는 경우, 보통은 그렇게 합니다).또한 최상위 앱에서는 종속성을 선언하기만 하면 됩니다.

angular.module( 'app', [
  'products',
  ...
]);

또, 범용 디렉티브를 번들 해, 테스트와 메뉴얼을 기능별로 정리해 둘 수도 있습니다.이러한 각 컴포넌트는 드래그 앤 드롭으로 향후 프로젝트에서 재사용할 수 있습니다.

좋은 레퍼런스 구현은 angular-app입니다.이것 좀 봐!

업데이트: 이 답변 이후 Angular를 시작했습니다.JS 프로젝트 킥스타터/템플릿인 ngBoilerplate는 이러한 개념을 캡슐화하고(다른 많은 모범 사례 중에서도), 이를 지원하는 정교한 빌드 시스템을 제공합니다.

난 보통 한다.

(angular
 .module('app.controllers', ['ng', ...])
 .controller('myContrA', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
 .controller('myContrB', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
);

'아까보다'를 붙일 수 요.app.controllers모든 컨트롤러를 사용할 수 있도록 합니다.

언급URL : https://stackoverflow.com/questions/14597062/angular-js-organize-controllers-into-app-namespace

반응형