3

I am really lost with RC6 of angular2.

I don't manage to adapt my code with module and component and don't understand the differences between the two. Could you help me in integrating directives, providers, imports for a large scale applications.

The Google's documentation is not so clear yet.

Thanks in advance.

Cheers

Laurent B
  • 215
  • 1
  • 11
  • 1
    If you are just starting a project, I suggest you leave RC6 and take a look at angular.io. They have good documentation for learning to develop Angular projects :) e.g here you can read about modules and components: https://angular.io/docs/ts/latest/guide/architecture.html – AT82 Dec 22 '16 at 18:26
  • Maybe [this](http://stackoverflow.com/questions/39292700/angular2-rc6-upgrade) SO question could help. – Jeroen Heier Dec 22 '16 at 20:30

2 Answers2

2

Basically, in Angular2, you have :

  • Modules : These are used to basically setup the logic of your application : How things are linked to each other. You start your application on bootstrapping a module.

    1. Imports : An array where you import the Angular2 Modules (Forms, etc.) and your next modules (DashboardModule, AdminModule, AuthentificationModule, etc.) as well as the Routing logic involved between your components.
    2. Declarations : An array where you declare the components that are linked to that module.
    3. Provider : An array where you declare your services or directives that are to be used with this module

  • Components : A "WebComponent" where you set the html to be injected into your navigator, with the associated CSS and it's behavior.

  • Services or Directives : Where you need to execute some app logic such as Authentication calls, states and so on.

  • A Router with outlets : That defines how you navigate in your application, based on the URL.

I tried to explain this with my own words so it's IS inaccurate on several levels, and that is why you have documentation sites such as angular.io. Hope this helps.

Official documentation on Modules => https://angular.io/docs/ts/latest/guide/ngmodule.html

Alex Beugnet
  • 4,003
  • 4
  • 23
  • 40
  • Also, don't start on an older release, start right off the bat with the latest one, especially if you are new to the tech. – Alex Beugnet Dec 23 '16 at 14:04
  • Thanks for your reply. I am not totally new that's why i am a bit lost with module. Here's a concrete example. To create a form, folloing the doc, this has to go in module: import { FormsModule, ReactiveFormsModule } from '@angular/forms'; This has to go in component: import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms'; I don't understand why, how to know what is the right location for import. Also it seems that DI does not work properly with modules ? Possible ? Cheers – Laurent B Jan 03 '17 at 14:22
  • Be careful that angular forms have kinda changed, so do not hesitate to refer to the official documentation https://angular.io/docs/ts/latest/guide/forms.html. Most of the time, you will know what to import from the documentation, and to take your example, you know that you will manipulate forms and will have to tell import the `FormsModule` so that your linked components will be able to use Forms, and then import inside your components the Forms directives, such as `FormControl` or `FormGroup`. – Alex Beugnet Jan 03 '17 at 14:28
  • What I always say myself is : "Oh I will need to use Forms in my components, so I need to import the corresponding Module in my own Module (`FormsModule` inside my module)". "And then to actually use them, I need to import the Directives linked to that module (such as `FormGroup`) in my component where I have my form." – Alex Beugnet Jan 03 '17 at 14:31
1

Forget about all those boring tech spec, they just confused you more. I don't really believe there is such need to have two concepts, because in programming language they can be referred interchangeably, like we say vehicles and cars. Many articles on Angular2 don't refer to them distinguishably for general discussion until actual coding.

However here are the two key differences when looking at code:

  1. Component has class, template and metadata.
  2. Component is child of Module, meaning Module is always at a higher level of Component.

About No. 2, that said means Component is the leaf-level in the Angular2 structure. Here is a very good explanation.

Jeb50
  • 6,272
  • 6
  • 49
  • 87