26

AngularJS アプリケーションを小さなピース/モジュールに分割する最良の方法は何でしょうか? たとえば、ブログ投稿とコメントを有効にしている場合、「投稿」や「コメント」(?) などのモジュールに分割できると思います (最良の例ではないかもしれませんが、アイデアはアプリケーション ロジックを分割することです)。巨大な 1 つのモジュール アプリを構築するのではなく、個別のモジュールに分割します)。

別々の DOM ノードで両方のモジュールをブートストラップし、それに応じて両方のモジュールでルーティングを使用しようとしました。いくつかの問題があります:

  • 「シングルページ」アプリケーションとして、フロントページで使用されていなくても、フロントページでも使用できるようにコメントモジュールをブートストラップしています。
  • ng-app 内で複数の ng-view を使用できないため、モジュールのすべてのラッパーを index.html ビューに記述してブートストラップする必要がありますか? そのようにする必要がありますか？少し間違っているようです。それらをどのように/どこでブートストラップする必要がありますか?
  • ルーティングのヒントはありますか？それらをモジュールに分散する必要がありますか、それとも何らかの方法でそれらをすべて組み合わせる必要がありますか? (1 つの「ブログ」モジュールを作成して「投稿」モジュールと「コメント」モジュールを依存関係として含めると、たとえば「/post/:id」ルーティングの定義が難しくなります..?)

index.html

<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']);
4

4 に答える 4

21

アプリを「ビュー モジュール」とこれらのサブ モ​​ジュールに分割します。

次に、$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に小さなリポジトリを作成しました。

于 2013-03-08T19:05:20.267 に答える
6

サブモジュールでルートを定義できます。

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'
  });
})

このトピックに関するブログ記事も書きました。

于 2014-08-15T10:55:28.417 に答える
2

ポータル アプリとサブアプリで同様のことを行っています。私たちが発見したいくつかのこと：

  1. ルートと routeParams を持つことができるのは 1 つの「アプリ」だけです。このため、「サブアプリ」が $routeParams にアクセスする必要がある場合は、URL 解析のために「古い学校」に行くか、イベント サービスを使用する必要があります。
  2. イベントといえば、アプリが通信するための Angular サービスがないため、両方のアプリのルート スコープと通信する独自​​のイベント サービスを展開し、それを両方のアプリに挿入する必要があります。
  3. 「サブアプリ」に ng-view を使用した場所がわかりません。どうやら、要素への直接のブートストラップも同様に機能します。

  4. ルートを持つことができるのは 1 つのアプリのみであるため、アプリは順番にブートストラップする必要があります。だから、このようなもの：

    $( 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');
        });

    });
});
于 2013-03-08T16:46:04.440 に答える
1

ルーティングモジュール「ui-router」をご利用いただければ幸いです。

これは、このhttp://www.ng-newsletter.com/posts/angular-ui-router.htmlの優れたチュートリアルです。

于 2014-01-09T09:33:30.890 に答える