Example usage of DecoratedModule

[jasonmacdonald]

I'm trying to divide my app up into modules, as I did in Angular 1, to keep the project modular for reuse. It seems that you can't create modules without reverting to the old syntax. The documentation eludes to the use of DecoratedModule for this purpose, but there's no example of exactly how it is to be used or how to register a new module and assign components to it (rather than on the main module by simply doing @component).

Can anyone provide an example of it's usage? I tried looking at the tests but not sure they really cover it.

[timkindberg]

Look in the faq the section about migration. It shows a blend of ngforward with angular 1. Please let me know how it goes so I can correct it if it's wrong.

[jasonmacdonald]

I think I see. So I should use bundle, not Module decorator, to wrap up a bunch of components into a module?

Do you have to export the name string? Or can I export the reference and use that as a provider Object?

Thanks for the quick reply BTW.

[timkindberg]

I'm not sure exactly what I'd do... I've not had to do this personally. But I suppose for every 'Root' app that you have in ng-forward I would export either the bundle().publish() (The ng1 module) or even bundle().publish().name (Just the ng1 module name). Ultimately its that name string you'll need for your dependency array.

import myNgForwardSectionModuleName from './section'; // if you export bundle().publish().name

angular.module('myNg1App', [myNgForwardSectionModuleName])

[jasonmacdonald]

Ok, thanks. I guess is user preference ultimately.

I'll close this now. Thanks again.

[timkindberg]

Would love to hear your thoughts on the experience after you give it a go!

[jasonmacdonald]

Just an update, that seemed to work fine. I was able to create a component, register it as a module and then include it in my main app as a provider and it included my other component. So, sweet. Thanks!

Example code below...

import { Component, bundle } from 'ng-forward';
import {Login} from '../../components/login/login';

@Component({
  selector: 'my-module',
  directives: [ Login ],
  template: `
    <div>my module</div><login></login>
  `
})
export class Module { }

// bundle module
let module = bundle('app.my-module', Module);

// export it
export default module.name;

So now I have a module with a component I'm importing. I like that I don't have to use the old app.module syntax.

SIDENOTE: Is there a way to register a run() and config() from here?

And then in my app I just included it like so (testModule)...

import {Component, StateConfig} from 'ng-forward';
import {Home} from '../home/home';
import AboutModule from '../about/about';
import {Login} from '../login/login';
import myModule from '../../modules/test/testModule';

var template = require('./app.tpl');
require('./app.css');

@Component({
  selector: 'app',
  template:  template,
  providers: ["app.about", myModule]
})
@StateConfig([
  { url: '/', component: Home, name: 'home' },
  { url: 'login/:id', component: Login, name: 'home.login' },
  { url: '/blah', component: Login, name: 'home.login.blah' }
])

export class App {
  // These are member type blah
  title: string;
  data: Array<any> = []; // default data
  constructor() {
    this.title = 'ng-forward';
  }
}

[timkindberg]

So you could do this for config or run since bundle returns a DecoratedModule: https://github.com/ngUpgraders/ng-forward/blob/master/API.md#decoratedmodule

// bundle module
let module = bundle('app.my-module', Module);

module.config(['someProvider', function (someProvider) {
    someProvider.configureSomething();
}); 

module.run() // same with run

// export it
export default module.name;

[timkindberg]

Why are you bundling up some component only to use it in another ngForward component? You don't have to do that... I thought you needed to bundle to include it in some ng1 code. You could just export the Module class (as you already are) and then import it and add the reference to providers.

[jasonmacdonald]

Because I want to be able to assign run() and config() settings for each module. It was the reason why I was investigating the ModuleDecorator to being with :) Just didn't include it in my sample above.

And unless I missed something, I can't do that to a normal component, only a module.

[timkindberg]

Ah. Well we need to get the @Config and @Run decorators done then, because it's a bummer if you have to do all that just for those two things.

This is still a good approach for adding ngForward modules to regular ng1 modules.

[jasonmacdonald]

That would be awesome! ;)