Skip to main content

Posts

Showing posts from November, 2016

Tips and Hints on Angular 2 Modules Usage

What is Angular 2 module?

"Simply it's like a box which encapsulates angular components"

import { NgModule } from '@angular/core';

@NgModule({})



Class which decorated with NgModule


Arrange code in modular way


Extend our application with external modules



Some useful tips as below; 

Tip #1

Every application must bootstrap one component, which known as "root application component".

[code language="javascript"]
bootstrap: [
AppComponent
]

[/code]

Tip #2

Every components, directives and pipes must only belong to only one Angular module.

Because we follow singleton design pattern.

Tip #3

Only declare components, directives and pipes under declarations array.

[code language="javascript"]
declarations: [
AppComponent
, AppFilterPipe
, AppDirective
]
[/code]

Tip #4

Never re-declare modules belongs to another module, because if we do so we polluting core objective of Angular modules.

Tip #5

All declared components are private by default and only accessible to current modul…

Why we should | How we can get rid of relative URLs

Why?


Relative URLs make our files not movable within the application when it grows and need to change those as when moving here and there


How?

Could have use module loder like System.JS

Why file extension is not mentioned when importing exporting modules in Angular 2 App

Angular 2 modules are handled by SystemJS (https://www.npmjs.com/package/systemjs) module loader. Since we mention module extensions to be loaded in the "systemjs.config" which describes as below, so that no need of defining extension.



Notes: app is the root folder or the main app component of this angular application and your default extensions to be loaded would be JavaScripts.