0

コンポーネント ルーティングのチュートリアルとは少し異なる方法でコードを編成しようとしています。簡単に言えば、アプリにこの構造を持たせたいのです。

app.js
-components/
 +-settings/
  +-settings.js
  +-general/
   +-generalSettings.js

私はAngular 1.5とこのバージョンのAngular Routerを使用しています:これは動作します

app.js

'use strict';
angular.module('admin', [ 'ngComponentRouter', 'settings' ])

  .config(function($locationProvider) {
    $locationProvider.html5Mode(true);
  })

  .value('$routerRootComponent', 'admin')

  .component('admin', {
    templateUrl: 'scripts/app.html',
    $routeConfig: [
        {path: '/settings/...', name: 'Settings', component: 'settings', useAsDefault: true}
    ]
  })

settings.js

angular.module('settings', [])
    .component('settings', {
        template: '<h1>settings</h1><ng-outlet></ng-outlet>',
        $routeConfig: [
            {path: '/general', name: 'GeneralSettings', component: 'generalSettings', useAsDefault: true}
        ]
    })
    .component('generalSettings', {
        template: '<h2>General</h2>',
        controller: GeneralSettingsCtrl,
    })

function GeneralSettingsCtrl(){
}

ただし、settings.js ファイルから一般設定コンポーネントを削除しようとすると、エラーが発生しますCannot read property '$routerOnActivate' of undefined。

依存関係を定義/注入する方法であるか、generalSettings の個別のモジュール定義が必要であると思われます (独自のモジュール 'generalSettings' を定義して注入するとうまくいくようです。これが最良のオプションであるとは確信していませんとも）。要するに、それを行う最善の方法がわからないということです。ネストされたすべてのコンポーネントを 1 つのファイルに格納しようとはしていません。アドバイスお願いします、よろしくお願いします！

4

1 に答える 1

0

理由はわかりませんが、設定「コンポーネント」の名前を設定から変更するapplicationSettingsと、問題なく動作します。

コンポーネント ルーティングのチュートリアルとは少し異なる方法でコードを整理しようとしています。簡単に言えば、アプリにこの構造を持たせたいのです。

app.js
-components/
 +-settings/
  +-settings.js
  +-general/
   +-generalSettings.js

私はAngular 1.5とAngular Routerの[このバージョン] [1]を使用しています:これは動作します

app.js

'use strict';
angular.module('admin', [ 'ngComponentRouter', 'settings' ])

  .config(function($locationProvider) {
    $locationProvider.html5Mode(true);
  })

  .value('$routerRootComponent', 'admin')

  .component('admin', {
    templateUrl: 'scripts/app.html',
    $routeConfig: [
        //-----------------> changed the component name
        {path: '/settings/...', name: 'Settings', component: 'applicationSettings', useAsDefault: true}
    ]
  })

settings.js

angular.module('settings', [])
    // ----------------------------------> changed component name to application settings
    .component('applicationSettings', {
        template: '<h1>settings</h1><ng-outlet></ng-outlet>',
        $routeConfig: [
            {path: '/general', name: 'GeneralSettings', component: 'generalSettings', useAsDefault: true}
        ]
    })
    .component('generalSettings', {
        template: '<h2>General</h2>',
        controller: GeneralSettingsCtrl,
    })

function GeneralSettingsCtrl(){
}
于 2016-05-08T16:22:17.167 に答える