From 72b3d69cd98884656a478cdb2311f8aac4f22540 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ey=C3=BCphan=20Yilmaz?= Date: Sun, 6 Oct 2024 20:34:08 +0200 Subject: [PATCH] Add slides for Angular imports to ng-module --- ng-module/default-structure/imports.html | 170 +++++++ .../{index.html => modules.html} | 0 ng-module/index.html | 471 ++++++++++++++---- 3 files changed, 537 insertions(+), 104 deletions(-) create mode 100644 ng-module/default-structure/imports.html rename ng-module/default-structure/{index.html => modules.html} (100%) diff --git a/ng-module/default-structure/imports.html b/ng-module/default-structure/imports.html new file mode 100644 index 0000000..38c81e8 --- /dev/null +++ b/ng-module/default-structure/imports.html @@ -0,0 +1,170 @@ + + + + + + + + +
+ +
+ + + diff --git a/ng-module/default-structure/index.html b/ng-module/default-structure/modules.html similarity index 100% rename from ng-module/default-structure/index.html rename to ng-module/default-structure/modules.html diff --git a/ng-module/index.html b/ng-module/index.html index 4341edb..6b2c036 100644 --- a/ng-module/index.html +++ b/ng-module/index.html @@ -1,63 +1,106 @@ - - - + + + Angular Modules - - - - - - + + + + + + - - + + - - -
- -
-
- -
-
-
+ + +
+ +
+
+ +
+
+
-

Modules

-

Structuring Angular applications

- module separation example - -
+

Modules

+

Structuring Angular applications

+ module separation example + +
-

Definition

-

Angular modules consolidate components, directives and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

-
-

Angular Docs

-
- +

Definition

+

+ Angular modules consolidate + components, directives and pipes into cohesive + blocks of functionality, each focused on a + feature area, application + business domain, workflow, or common collection of + utilities. +

+
+

+ Angular Docs +

+
+
-
-

Simple module

-

An Angular module is a class decorated with @NgModule metadata.

- 

+          

+            
Simple module

+            

+              An Angular module is a
+              class decorated with @NgModule metadata.
+            

+            

 
 @NgModule({
 // applications modules, angular modules, libraries, etc.
@@ -76,34 +119,59 @@ 
Simple module

 providers: []
 })
 export class TestModule { }

-                
-            

-            

-                
... example

-                
@NgModule({
+            
+          

+          

+            
... example

+            
@NgModule({
   imports: [CommonModule],
   exports: [CommonModule, BookListComponent],
   declarations: [BookListComponent, BookDetailComponent],
   providers: [BookService],
 })
 export class BookModule { }

-                
    
-                    
  • Angular Common module is imported - e.g. *ngIf can be used in templates
    • 
-                    
  • Common module is exported - so a module importing BookModule can use Common without importing it
    • 
-                    
  • BookListComponent can be used inside templates in modules importing BookModule - 'it's public'
    • 
-                    
  • BookListComponent and BookDetailComponent are declared and can therefore be used inside modules templates - good practice if for instance BookDetailComponent is part of BookListComponent and should never be used alone
    • 
-                    
  • BookService is provided for all components within BookModule and child modules
    • 
-                

-            

+            
    
+              
  • 
+                Angular Common module is imported - e.g. *ngIf
+                can be used in templates
+              
    • 
+              
  • 
+                Common module is exported - so a module importing BookModule can
+                use Common without importing it
+              
    • 
+              
  • 
+                BookListComponent can be
+                used inside templates in modules importing BookModule
+                - 'it's public'
+              
    • 
+              
  • 
+                BookListComponent and BookDetailComponent are declared and can
+                therefore be used inside modules templates -
+                good practice if for instance BookDetailComponent is part of
+                BookListComponent and should
+                never be used alone
+              
    • 
+              
  • 
+                BookService is provided for all components within BookModule and
+                child modules
+              
    • 
+            

+
-

Application Start (1/2)

-

AppModule is the top level Module which gets bootstrapped

- 
import { NgModule }      from '@angular/core';
+          
Application Start (1/2)

+          
AppModule is the top level Module which gets bootstrapped

+          
import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent }  from './app.component';
 
@@ -114,63 +182,258 @@ 
Application Start (1/2)

   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

-app.module.ts
-            
+          app.module.ts
+
-

Application Start (2/2)

- 

+          
Application Start (2/2)

+          

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule }              from './app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);

-main.ts
-            
<my-app>Loading ...</my-app>

-index.html
-        
import { Component } from '@angular/core';
+          main.ts
+          
<my-app>Loading ...</my-app>

+          index.html
+          
import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
 })
 export class AppComponent { }

-            app.component.ts
+          app.component.ts
+          
+
+
+

Core and Shared Module

+
    +
  • + Core- and SharedModule are + modules with conventions +
    • +
  • + CoreModule has single use components - e.g. + NavigationComponent, FooterComponent, etc. to be + used inside AppComponents template +
    • +
  • CoreModule is only imported in AppModule
    • +
  • + SharedModule has common components, directives and pipes. + Imported by multiple modules - e.g. + SpinnerComponent, ModalComponent +
    • +
+
+

+ Angular Docs +

+
+
+
+

+ Default Application Structure from + Angular Docs +

+ + +
+
+

Imports

+ +
+
+

+ Default Application Structure from + Angular Docs +

+ + +
+
+

Standalone components

+
    +
  • Introduced with Angular 14.
    • +
  • + Standalone components reduce the complexity of NgModules, + providing a more lightweight and modular approach to building + Angular applications. +
    • +
  • + Standalone components can directly import other components, directives, and pipes used in their templates without the need for NgModules. +
    • +
+
+

+ Angular Docs +

+
+
+
+

Define a Standalone Component

+ 
 
+            import { Component } from '@angular/core'; 
+            import { ProfilePhoto } from './profile-photo.component';
+
+            @Component({
+              standalone: true,
+              imports: [ProfilePhoto],
+              template: ``
+                })
+            export class UserProfile { }
+
+ +
+
+

Import Standalone Components

+ 
 
+              import { Component } from '@angular/core'; 
+              import { ProfilePhoto } from './profile-photo.component';
+  
+              @Component({
+                standalone: true,
+                imports: [ProfilePhoto],
+                template: ``
+                  })
+              export class UserProfile { }
+
+
+
+

Import Modules

+ 
 
+                import { Component } from '@angular/core';
+                import { ReactiveFormsModule } from '@angular/forms';
+                
+                @Component({
+                  standalone: true,
+                  selector: 'user-profile',
+                  template: ``,
+                  imports: [ReactiveFormsModule]
+                })
+                export class UserProfile {
+                  profileForm = new FormGroup({
+                    name: new FormControl('')
+                  });
+                }
+
+ +
+
+

Benefits of Direct Importing

+
    +
  • + Eliminates the need for NgModules to declare and import + components. +
    • +
  • Improves code clarity and maintainability.
    • +
  • Provides finer control over each component's dependencies.
    • +
+
-

Core and Shared Module

+

Future of Angular development

    -
  • Core- and SharedModule are modules with conventions
    • -
  • CoreModule has single use components - e.g. NavigationComponent, FooterComponent, etc. to be used inside AppComponents template
    • -
  • CoreModule is only imported in AppModule
    • -
  • SharedModule has common components, directives and pipes. Imported by multiple modules - e.g. SpinnerComponent, ModalComponent
    • +
  • + The Angular team recommends using standalone components for all + new development. +
    • +
  • + Starting with Angular 17, creating an Angular + application with ng new will generate a standalone application by default. +
-
-

Angular Docs

-
-
+
-

Default Application Structure from Angular Docs

- - +

+ Starting with Angular 19 + standalone: true will be default. +

+ 

+                @Component({
+                  imports: [ProfilePhoto],
+                  template: ``
+                })
+                export class UserProfile { }
+
+
+

+ Add standalone: false to existing ngModule + components so they continue to work. +

+ 

+                  @Component({
+                    standalone: false,
+                    imports: [ProfilePhoto],
+                    template: ``
+                  })
+                  export class UserProfile { }
+
+
-
- - + + - - - + + +