각도를 분할하는 방법JS를 작은 모듈에 적용하고 라우팅을 올바르게 처리합니까?

각도를 분할하는 방법JS를 작은 모듈에 적용하고 라우팅을 올바르게 처리합니까?

Angular를 분할하는 가장 좋은 방법은 무엇일까요?JS를 더 작은 조각/모듈에 적용하시겠습니까?예를 들어 블로그에 게시물과 댓글을 활성화하면 "게시물"과 "댓글"(?)과 같은 모듈로 분해할 수 있을 것 같습니다(가장 좋은 예는 아닐 수 있지만, 애플리케이션 로직을 하나의 거대한 모듈-앱을 구축하는 것보다 별도의 모듈로 분리하는 것이 좋습니다).

저는 별도의 DOM 노드에서 두 모듈을 부트스트랩하고 그에 따라 두 모듈 모두에서 라우팅을 사용하려고 했습니다.몇 가지 문제가 있습니다.

• 저는 '단일 페이지' 애플리케이션으로, 앞 페이지에서도 사용하지 않는 댓글 모듈을 부트스트래핑하고 있습니다.
• ng-app에서 여러 ng-view를 사용할 수 없기 때문에 index.html 보기에 모듈의 모든 래퍼를 작성하고 부트스트랩을 해야 합니까?그렇게 해야 되나요?좀 잘못된 것 같네요.그것들을 어떻게/어디서 부트스트랩해야 합니까?
• 라우팅에 대한 팁이 있습니까?모듈에 그것들을 펼쳐야 하나요 아니면 어떻게 해서든 모두 합쳐야 하나요?("blog" 모듈"과 "comments" 모듈을 종속성으로 포함하도록 "posts" 모듈을 하나 생성하면 예를 들어 "/post/:id" 라우팅을 정의하기가 여전히 어렵습니다.?)

색인을 보다

<div class="post"><ng-view></ng-view></div>
<div class="comments"><ng-view></ng-view></div>

javascript.js

angular.module('posts', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', {
        'template': 'Showing all the posts',
        'controller': 'postCtrl
    })
    .when('/post/:id', {
        'template': 'Showing post :id',
        'controller': 'postCtrl
    });
}]);

angular.module('comments', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/post/:id', {
        'template': 'Showing post :id comments',
        'controller': 'CommentsCtrl'
    });
}]);

angular.bootstrap($('.post'), ['posts']);
angular.bootstrap($('.comments'), ['comments']);

저는 "뷰 모듈"과 이 서브 모듈에서 앱을 나누겠습니다.

그런 다음 $routeProvider를 사용하여 뷰 간을 전환합니다.저는 각 모듈에 다른 라우팅 구성을 정의합니다.

추가적인 서브모듈이 필요하면 ng-include로 로드합니다.

/* App Module */

angular.module('MyApp', ['MyApp.home', 'MyApp.blog'])
.config( function myAppConfig ( $routeProvider ) {
    'use strict';
    $routeProvider.otherwise({ redirectTo: '/home' });
});


/* home Module */

angular.module('MyApp.home', [])
.config(['$routeProvider', function config( $routeProvider ) {
  $routeProvider.when('/home', {
    controller: 'HomeController',
    template: '<p>This is my Home</p>'
  });
}]);

이것을 설명하기 위해 github에 작은 저장소를 만들었습니다.

하위 모듈에서 경로를 정의할 수 있습니다.

angular.module('app', ['ngRoute', 'app.moduleX'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'partials/home.html',
    controller: 'HomeCtrl'
  });

  //Handle all exceptions
  $routeProvider.otherwise({
    redirectTo: '/home'
  });
})

angular.module('app.moduleX', []).config(function($routeProvider) {
  $routeProvider.when('/settings', {
    templateUrl: 'partials/settings.html',
    controller: 'SettingsCtrl'
  });
})

이 주제에 대해서도 블로그에 글을 올렸습니다.

포털 앱과 서브 앱으로 비슷한 작업을 하고 있습니다.우리가 발견한 몇 가지 사항:

1. 오직 하나의 "앱"만이 경로와 경로 Params를 가질 수 있습니다.이 때문에 "서브앱"이 $routeParams에 접근해야 한다면 URL 파싱을 위해 "올드스쿨"에 가거나 이벤트 서비스를 이용해야 합니다.
2. 이벤트 얘기가 나와서 말인데, 앱들이 소통할 수 있는 앵글 서비스가 없기 때문에 두 앱 모두에 루트 스코프로 대화하는 자체 이벤트 서비스를 롤업해서 두 앱 모두에 주입해야 할 것 같습니다.
3. 나는 우리가 "서브 앱"에 ng-view를 어디서 사용했는지 보이지 않습니다.요소에 직접 부트스트래핑하는 것도 비슷하게 작동합니다.

4. 오직 하나의 앱만이 경로를 가질 수 있기 때문에, 그 앱들은 순서대로 부트스트랩되어야 합니다.그래서 이런 거죠.

   $( function () {
   
       $.when(angular.bootstrap($('.post'), ['posts'])).done( function() {
           console.log('POSTS: bootstrapped');
   
           //Manually add the controller to the comments element. (May or may not be  
           //necessary, but we were doing something that required it to work.)
           $('.comments').attr('ng-controller', 'CommentsCtrl');
   
           $.when(angular.bootstrap($('.comments'), ['comments'])).done( function() {
               console.log('COMMENTS: bootstrapped');
           });
   
       });
   });
   

저는 당신이 ui-router 라우팅 모듈을 사용할 수 있기를 바랍니다.

다음은 이 http://www.ng-newsletter.com/posts/angular-ui-router.html 에 대한 좋은 튜토리얼입니다.

언급URL : https://stackoverflow.com/questions/15294321/how-to-split-angularjs-application-into-smaller-modules-and-handle-routing-corre