Scribd
Upload
19 views7 pages

Cslab-05 Kru

The document discusses modules in Angular. Modules are used to group related components, directives, pipes and services. The NgModule decorator is used to define a module and contains properties like declarations, imports, providers and bootstrap. Declarations define the components in a module. Imports define other modules required. Providers define services and bootstrap defines the main app component. Components represent views, while modules are containers that group functionality. To add a component to a module, it needs to be imported and added to the declarations array.

Uploaded by

Vinay Wankhade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views7 pages

Cslab-05 Kru

The document discusses modules in Angular. Modules are used to group related components, directives, pipes and services. The NgModule decorator is used to define a module and contains properties like declarations, imports, providers and bootstrap. Declarations define the components in a module. Imports define other modules required. Providers define services and bootstrap defines the main app component. Components represent views, while modules are containers that group functionality. To add a component to a module, it needs to be imported and added to the declarations array.

Uploaded by

Vinay Wankhade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

PRACTICAL NO.

05
Aim: Introduction to Modules in Angular.
Theory: Module in Angular refers to a place where you can group the components, directives, pipes,
and services, which are related to the application.
In case you are developing a website, the header, footer, left, center and the right section become part
of a module.
To define module, we can use the NgModule. When you create a new project using the Angular –cli
command, the ngmodule is created in the app.module.ts file by default and it looks as follows –
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

The NgModule needs to be imported as follows –

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

The structure for the ngmodule is as shown below −

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})

It starts with @NgModule and contains an object which has declarations, import s, providers and
bootstrap.

Declaration

It is an array of components created. If any new component gets created, it will be imported first and
the reference will be included in declarations as shown below –

declarations: [
AppComponent,
NewCmpComponent
]

Import

It is an array of modules required to be used in the application. It can also be used by the components
in the Declaration array. For example, right now in the @NgModule we see the Browser Module
imported. In case your application needs forms, you can include the module as follows −

import { FormsModule } from '@angular/forms';


The import in the @NgModule will be like the following −

imports: [
BrowserModule,
FormsModule
]

Providers

This will include the services created.

Bootstrap

This includes the main app component for starting the execution.
In Angular, a component is a piece of code that represents a view. A module is a container for a group
of related components and directives.
Components

 Responsible for rendering content and handling user interactions with the view
 Encapsulate the data, logic, and HTML for a view
 Can be created using @Component decorator
Modules

 A collection of components, services, directives, and pipes


 Used to group a set of functionality in the app
 Can export or import other modules as needed
 Can be created using @NgModule decorator

To add a component to a module in Angular, you can:


1) Navigate to your Angular project directory
2) Create a new file, <component-name>.component.ts
3) At the top of the file, add the following import statement
4) After the import statement, add a @Component decorator
5) Choose a CSS selector for the component
6) To register a component inside module, import it and add to declarations section
7) You can use the ng generate command to create a new component
8) You can also stay in the project root and prefix the component with the module name ng g
component moduleName/componentName
You can also set up the module first, which will create a folder with your core module. When the
component is generated, it will be placed inside the same folder and will be declared in the module by
your CLI.
Result: Thus we have studied the creation of module in Angular and how to add components in
module.
PRACTICAL NO.06
Aim: To Create Simple form in Angular.
Theory:
PRACTICAL NO.06
Aim: To study about Decoraters in Angular.
Theory:

You might also like