CODEWITHSUNDEEP
angulartypescriptangular-components
Samantha Adrichem
Samantha Adrichem

Reputation: 862

Angular @Component in separate file of export class

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?

Upvotes: 1

Views: 843

Answers (2)

Bohdan Khodakivskyi
Bohdan Khodakivskyi

Reputation: 632

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.

Upvotes: 1

Hristo Enev
Hristo Enev

Reputation: 2541

@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.

Upvotes: 1

Related Questions