CODEWITHSUNDEEP
angularjsangular-new-router
Derek Adair
Derek Adair

Reputation: 21915

Can't separate angular components in angular 1

I'm trying to organize my code a bit differently than the tutorial for component routing. Quite simply I want to my app to have this structure.

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

I'm using Angular 1.5 and this version of angular router: this works

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(){
}

However, when I attempt to remove the general settings component from the settings.js file I get the error Cannot read property '$routerOnActivate' of undefined.

I suspect it is how I am either defining/injecting the dependencies or maybe I need to have an individual module definition for generalSettings (defining its own module 'generalSettings' and injecting it seems to work, i'm not convinced this is the best option tho). Pretty much boils down to I'm not sure the best way to do it. really not trying to have every single nested component in one file. Please advice, thank you!

Upvotes: 0

Views: 1397

Answers (1)

Derek Adair
Derek Adair

Reputation: 21915

So not sure why, but when I renam the settings "Component" from settings to applicationSettings it works just fine.

I'm trying to organize my code a bit differently than the tutorial for component routing. Quite simply I want to my app to have this structure.

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

I'm using Angular 1.5 and [this version][1] of angular router: this works

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(){
}

Upvotes: 0

Related Questions