Scribd
Upload
72 views4 pages

2 - Angular

It provides a summary of Angular, including that it is a JavaScript framework for building single-page applications, written in TypeScript. It uses components and modules to build scalable and maintainable applications. Key features include data binding, dependency injection, and templates. Learning topics include directives, components, services, dependency injection, and change detection. Prerequisites include installing Node.js, the Angular CLI, and TypeScript. Components are used to define the structure and appearance of an Angular application. Services provide reusable business logic throughout the application.

Uploaded by

Albano Futta
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
72 views4 pages

2 - Angular

It provides a summary of Angular, including that it is a JavaScript framework for building single-page applications, written in TypeScript. It uses components and modules to build scalable and maintainable applications. Key features include data binding, dependency injection, and templates. Learning topics include directives, components, services, dependency injection, and change detection. Prerequisites include installing Node.js, the Angular CLI, and TypeScript. Components are used to define the structure and appearance of an Angular application. Services provide reusable business logic throughout the application.

Uploaded by

Albano Futta
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/ 4

What is?

It Is a js framework.

Why?

It’s good, provides SPA (single page apps), scalability and maintainability… modules, etc.

*written in Typescript

*Uses html to clearly express our app components.

*It is maintained by Google

*It is designed for web, desktop and mobile platforms.

Features

*Object Model -->

*Typescript

*Data binding

*Testing -->jasmine framework for tests

Learning curse:

Basic things

*Directives

*Modules

*Decorators

*Components

*Services

*Dependency injection

*Pipes, and Templates

Advanced things

*Change detection

*Zones

*AoT Compilation

*Rx.js
Prerequisites:

*Node.js (Installed): Used as the base for large part of angular’s build environment

*Angular CLI (Command Line Interface): Used to bootstrap and develop Angular apps

npm install –g @angular/cli to install it

ng - -version to confirm the installation

Npm install –g typescript

*to install Typescript (is a programming lang in which Angular is written) as an npm package

Navigate to the app folder and type in terminal:

ng new app_name

*to create a new Angular app

cd app_name

ng serve

*to run the app

Components
Each block of our app lookNfeel.

Angular compos are a subset of directives:

Structure directives

Atribute directives

Component directives

Att: only one compo can be instantiated per element in a template

@Component decorator

A Typescript class is used to create a component decorator, which has metadata about

the component decorations:

*selector (we can edit but, also use the edit in main file or app-component.html)
*template and template url

*styles and style urls

*providers

*animations

Ng module

A component must belong to ng module in order to be used by another component or app

Life-cycle hooks

Components control their runtime behavior by implementing life-cycle hooks

ng g c compo-name

*To create a component

We use the selector’s name in the component’s .ts file as a tag in a component to use a component in a
component or app

<app-textcomponent></app-textcomponent> in app-component.html (the parent file)

Dependency injection
*to avoid rewriting codes, Angular Services are used.

*these Services can be injected in the components requiring them

Keeps the code flexible, testable and mutable

Classes can inherit external logic without knowing how to create it

Benefits directives, pipes, services, classes, modules and components

Att: Components is for good UX (User Experience) vs. Services are for tasks available for
components to use (fetching data from server, validation, login, etc.)

ng g s service-name

*to create a service, that tackles a task


info1: string[] = [“joao tomas”, “mklgf”, “1234”] -->declare an array

getinfo1() : string[]{

return this.info1 } -->methods that returns the array or service we created in the class

--> codes of the Service’s class, the handle a task

In the compo’s .ts file,

we import the service class (import {ServiceClassName} from “../service.name”).

we declare de provider in the @Component (, providers[ServiceClassName]), to instantiate it.

we instantiate an object in the constructor (private anyObjName: ServiceClassName)

Still in this file, in the class, we use the Service like this:

infoReceived1: string[]=[];

getInfoFromServiceClass1(){

this.infoReceived1 = this.anyObjName.getinfo1()

And in the compo’s .html file, we render the service:

<button type=”button” (click)=’getInfoFromServiceClass1()’>Employee1</button>

<ul class=”list-group”>

<li *ngFor=”let info of infoReceived1” class=”list-group-item”>{{info}}</li>

</ul>

Angular forms
Types of form building

Form control and grouping

You might also like