Angular @Component in separate file of export class

Question

With angularjs we learned to structure our code like this.

item.module.js:

angular.module('name', [ deps ] )

item.component.js

angular.module('name')
  .component({ declaration, controller: 'controller', template: template})

item.controller.js

angular.module('name')
  .controller('controller', code..);

item.html

   <html>

With angular however a component is declared in a single file with it's controller

@Component({ templateUrl: template })
export class BlaComponent {}

Is there a way to put these two declarations is separate files? Is this desired (pro's / con's)

Bonus question (i'm still googling this one): Is there any propper guide for large projects and file structure?

Reading this angular.io/guide/styleguide will answer all your questions — Robin-Hoodie
– Robin-Hoodie, Commented Nov 23, 2017 at 8:07

Hristo Enev · Accepted Answer · 2017-11-23 08:11:39Z

1

@Component is just a decorator that contains metadata for the class. In other words it just defines stuff for your class in a more elegant way.

The @Component function takes the configuration object and turns it into metadata that it attaches to the component class definition. Angular discovers this metadata at runtime and thus knows how to do "the right thing".

Read more here

There is no controller in Angular2+, but class. In other words you don't separate decorators from the class.

Check Official Angular 2 Styleguide Application Structure to get some idea how to structure your code. Also check the Angular CLI project to boost your application development. Note that Angular CLI uses the Official Angular 2 Styleguide and conventions and is really convenient, plus it gives you the basic structure from where you can continue expanding your project easily.

edited Nov 23, 2017 at 8:11

answered Nov 23, 2017 at 8:06

Hristo Enev

2,5491 gold badge23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bohdan Khodakivskyi · Accepted Answer · 2017-11-23 08:12:04Z

1

We're using official style guide in our team and we find it very suitable for our needs.

Answering your question, you cannot split @Component decorator from its class and you don't really have to. You may still have your templates and styles in separate files which is actually officially recommended in this section.

answered Nov 23, 2017 at 8:12

Bohdan Khodakivskyi

6325 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular @Component in separate file of export class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related