سؤال 7. What is TypeScript?
TypeScript is a strongly typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await and many other features, and compiles to plain JavaScript. Angular is written entirely in TypeScript as a primary language. You can install TypeScript globally as:
npm install -g typescript
Let's see a simple example of TypeScript usage:-
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Arindam";
document.body.innerHTML = greeter(user);
The greeter method allows only string type as argument.
سؤال 8. What are the key components of Angular?
Angular has the key components below,
- Component: These are the basic building blocks of an Angular application to control HTML views.
- Modules: An Angular module is a set of angular basic building blocks like components, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" which perform a single task.
- Templates: These represent the views of an Angular application.
- Services: Are used to create components which can be shared across the entire application.
- Metadata: This can be used to add more data to an Angular class.
سؤال 9. What are directives?
Directives add behaviour to an existing DOM element or an existing component instance.
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
Now this directive extends HTML element behavior with a yellow background as below:
<p myHighlight>Highlight me!</p>
سؤال 10. What are components?
Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template. Let's see a simple example of Angular component:
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: ` <div>
<h1>{{title}}</h1>
<div>Learn Angular6 with examples</div>
</div> `,
})
export class AppComponent {
title: string = 'Welcome to Angular world';
}
