Understanding Angular Import Statements

0
votes

I m new to Angular and ES6 model of writing code. I have been reading through articles on angular modules and import statement and have got few questions

I m from .NET background and could relate import statements in the components, services etc

For example, 

import { HttpClient } from '@angular/common/http';


  getIncidentData(): Observable<any> {
    return this._http.get('incidents.json');
  }

  • I m importing HttpClient module and using its service in my code.. Or Simply, to use any methods defined in other classes, we need to import it first.. So its understandable

  • And also in the NgModule decorative, in the import statement, we import them.. Because an angular module (as a feature) defines what are the modules that can be used by its components, services etc..

Here are my questions

  • At the module level , we do the import statement, but actually we are not using any methods or variables from them in that place, rather we use it at the individual components, services only.. Why do we need to define it over there?
  • And if we define it at the module level, do we need to repeat it at the component level as well. In the below example, I imported HttpModule at appModule, do I need import it in the service? Will the components, service inherit modules import automatically?
  • Most external modules have name that ends with “module” but some don’t have how do we know that it’s a module or component or service?

Here is some sample 

 import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { UitkModule } from '@uimf/uitk';
    import { TableModule } from '@uimf/uitk/components/tables';
    import { HttpModule } from '@angular/http';

    import { AppComponent } from './app.component';
    import { CardComponent } from './card/card.component';
1
angularangular5
These links should answer several of your questions. Take a look! angular.io/guide/ngmodule-vs-jsmodule angular.io/guide/bootstrapping angular.io/guide/sharing-ngmodules – Stevethemacguy
@Stevethemacguy yes.. i went through it but little bit confused. could you give some more information – NewBee
I'll try to come back and answer your questions directly, but I probably won't have time before next week. Just wanted to help point you in the right direction for now! – Stevethemacguy
Check youtube.com/watch?v=ntJ-P-Cvo7o – Jota.Toledo

1 Answers

0
votes

Answers to your questions

At the module level , we do the import statement, but actually we are not using any methods or variables from them in that place, rather we use it at the individual components, services only.. Why do we need to define it over there?

  • Modules are like a container for multiple components
  • Component level: Only need to import the components you need (from the module you imported)

And if we define it at the module level, do we need to repeat it at the component level as well. In the below example, I imported HttpModule at appModule, do I need import it in the service? Will the components, service inherit modules import automatically?

  • Only if you called it in your code
  • Highlight then Ctrl + Space -> will import the module automatically. But, sometimes automatic import will import the wrong path. You need to do your research.

Most external modules have name that ends with “module” but some don’t have how do we know that it’s a module or component or service?

  • Metadata are used to determine which is which.
  • A lot of times naming standards are implemented. Like adding service at the end of the class name. For e.g. BaseService
  • @Injectable() -> most probably a service
  • @NgModule -> module
  • @Component -> component

Check out the tutorial here: https://angular.io/tutorial