w8- angular Flashcards
What is Angular?
Angular is a platform and framework for building client applications in HTML and TypeScript (TypeScript is a strict superset of JavaScript).Angular is written in TypeScript.
. Angular combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build live applications on the web, mobile, or desktop.
What is TypeScript?
Typescript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is a strongly typed, object-oriented, compiled language. In other words, TypeScript is JavaScript plus some additional features.
Main features of TS->
supports strong static typing
let flag: boolean = false;
let age: number = 6;
TS supports Object-Oriented Programming
TS tools save your developers time
Main angular blocks are-
Modules
Components
Templates
Metadata
Data binding
Directives
Services
Dependency injection
Modules?
Angular, a module is a mechanism to group components, directives, pipes and related services so that they can be combined with other modules to create an application.
analogy of angular modules-> classes
components are classes that interact with the .HTML file of the component displayed on browser.
component is template(view) + a class(typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template). Components control views (HTML). They also communicate with other components and services to bring functionality to your app.
Templates?
The view of the component is defined through templates. Templates are basically the HTML we use to show on our page.
Services?
Angular services are singleton objects which get instantiated only once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application.
Dependency Injection (DI)
Dependencies are services or objects that a class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself. In Angular, the DI framework provides declared dependencies to a class when that class is instantiated.
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘w8ang’;
}
The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata.
selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains <app-root></app-root>, then Angular inserts an instance of the AppComponent view between those tags. You can find the '<app-root></app-root>' in index.html file. templateUrl: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component's host view. providers: An array of providers for services that the component requires. We will cover it in the comming weeks.
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘w8ang’;
}
The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata.
selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains <app-root></app-root>, then Angular inserts an instance of the AppComponent view between those tags. You can find the '<app-root></app-root>' in index.html file. templateUrl: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component's host view. providers: An array of providers for services that the component requires. We will cover it in the comming weeks.
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘w8ang’;
}
The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata.
selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains <app-root></app-root>, then Angular inserts an instance of the AppComponent view between those tags. You can find the '<app-root></app-root>' in index.html file. templateUrl: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component's host view. providers: An array of providers for services that the component requires. We will cover it in the comming weeks.
Data binding?
Data binding is the automatic data synchronisation between the model and view components. app.component.ts and app.component.html
Three types of data binding-
Property
Event
Two-way
Property binding
simply means passing data from the component class (e.g. app.component.ts) and setting the value of a given element in the view (e.g. app.component.html).
Property binding is one way the data is transferred from the component to the class
allows you to control element property values from the component and change them whenever needed.
Welcome to {{title}}
Event binding
The property binding flows data in one direction: from a component to an element.
export class AppComponent {
title = ‘FIT2095’;
counter: number = 0;
incCounter() {
this.counter++;
}
}
<button (click)=”incCounter()” >Click Me</button>
