angular components

PPTX 32 sahifa 303,3 KB Bepul yuklash

32 sahifa

FaylHub.uz

Telegram orqali yuklab olish

Hajm 303,3 KB

Fayl turi PPTX

Sahifalar 32

Yangilangan Dek 2025

Sahifa ko'rinishi (5 sahifa)

Pastga aylantiring 👇

1 / 32

angular components step 1: understanding angular architecture angular is built on a component-based architecture , which means the application is divided into reusable, self-contained pieces called components . these components are organized into modules , and they rely on services for shared functionality. let’s dive into each part of angular’s architecture. 1. components a component is the most basic building block of an angular application. it controls a part of the ui and consists of three main parts: template : defines the view (html structure). class : contains the logic (typescript code). metadata : provides additional information about the component. steps to create and understand a component generate a component use angular cli to generate a new component: ng generate component my-component shortcut: ng g c my-component anatomy of a component after generating the component, you’ll see the following files in the src/app/my-component folder: my-component.component.ts: the typescript file containing the …

2 / 32

t.component.html. 2. modules a module is a container for organizing related components, directives, pipes, and services. every angular app has at least one module, called the root module (appmodule). steps to understand modules root module (appmodule) open src/app/app.module.ts: import { ngmodule } from '@angular/core'; import { browsermodule } from '@angular/platform-browser'; import { appcomponent } from './app.component'; import { mycomponent } from './my-component/my-component.component'; @ngmodule({ declarations: [ appcomponent, mycomponent // declare all components here ], imports: [ browsermodule // import other modules here ], providers: [], // register services here bootstrap: [appcomponent] // root component to bootstrap }) export class appmodule { } @ngmodule decorator : defines metadata for the module. declarations: list of components, directives, and pipes that belong to this module. imports: other modules required by this module. providers: services available to the entire application. bootstrap: the root component to load when the app starts. feature modules as your app …

3 / 32

}} property binding : bind html attributes to component properties: event binding : handle user events: click me two-way binding : use [(ngmodel)] for two-way data binding: hello, {{ name }}! directives structural directives : modify the dom layout (e.g., *ngif, *ngfor): this is visible {{ item }} attribute directives : modify the appearance or behavior of elements (e.g., ngclass, ngstyle): active class 4. metadata metadata provides additional information about a class (e.g., a component or module). it’s defined using decorators like @component and @ngmodule. examples of metadata component metadata @component({ selector: 'app-example', templateurl: './example.component.html', styleurls: ['./example.component.css'] }) module metadata @ngmodule({ declarations: [appcomponent], imports: [browsermodule], providers: [], bootstrap: [appcomponent] }) 5. services and dependency injection a service is a class that provides shared functionality (e.g., fetching data from an api). dependency injection (di) is a design pattern used to inject services into components or other services. steps to create and …

4 / 32

tructure (ngmodule) angular apps are organized into modules , which help manage complexity and enable lazy loading. types of modules root module (appmodule) the entry point of the application. defined in app.module.ts. feature modules organize related components, directives, and pipes. example: dashboard.module.ts. shared modules contain reusable components, directives, and pipes. example: shared.module.ts. lazy-loaded modules loaded on demand to improve performance. example: admin.module.ts. steps to lazy load a module create a feature module ng generate module admin --route admin --module app.module configure routing open app-routing.module.ts: const routes: routes = [ { path: 'admin', loadchildren: () => import('./admin/admin.module').then(m => m.adminmodule) } ]; run the app navigate to /admin to load the adminmodule. step 1: creating and registering components what is a component? a component in angular is a typescript class that controls a part of the ui. it consists of: a template (html structure). a class (typescript logic). metadata (decorator @component). steps …

5 / 32

mponent here ], imports: [browsermodule], providers: [], bootstrap: [appcomponent] }) export class appmodule { } use the component in a template add the component’s selector (defined in my-component.component.ts) to another template, such as app.component.html: welcome to the app step 2: component lifecycle hooks what are lifecycle hooks? angular components have a lifecycle managed by angular itself. lifecycle hooks allow you to tap into key moments in a component’s life, such as initialization, rendering, and destruction. common lifecycle hooks ngoninit called once after the component is initialized. use it to fetch data or perform setup logic. import { component, oninit } from '@angular/core'; @component({ selector: 'app-my-component', template: ` {{ message }} ` }) export class mycomponent implements oninit { message: string; ngoninit() { this.message = 'component initialized!';} } ngondestroy called just before the component is destroyed. use it to clean up resources (e.g., unsubscribe from observables). import { component, ondestroy } …

Ko'proq o'qimoqchimisiz?

Barcha 32 sahifani Telegram orqali bepul yuklab oling.

To'liq faylni yuklab olish

"angular components" haqida

angular components step 1: understanding angular architecture angular is built on a component-based architecture , which means the application is divided into reusable, self-contained pieces called components . these components are organized into modules , and they rely on services for shared functionality. let’s dive into each part of angular’s architecture. 1. components a component is the most basic building block of an angular application. it controls a part of the ui and consists of three main parts: template : defines the view (html structure). class : contains the logic (typescript code). metadata : provides additional information about the component. steps to create and understand a component generate a component use angular cli to generate a new component: ng generate …

Bu fayl PPTX formatida 32 sahifadan iborat (303,3 KB). "angular components"ni yuklab olish uchun chap tomondagi Telegram tugmasini bosing.

Teglar: angular components PPTX 32 sahifa Bepul yuklash Telegram