Angular and Typescript Flashcards
What is Typescript?
-Typescript is a superset of JavaScript which primarily provides the option of
static typing, classes, and interfaces.
-It is a transpiled into plain JavaScript
What are some of Typescripts benefits?
- It’s a language utilized in many front-end frameworks such as Angular.
- It provides optional static typing and type inference
- It offers enhanced IDE support (intelesense/autocomplete)
- it offers the access modifiers public and private for added data protection
What does the “let” keyword mean?
Let is similar to var in some respects but let forces local scoping
What does the Arrow Function (=>) do?
Defines a nameless function with the benefits of:
- More concise code
- Simplifies function scoping and usage of the ‘this’ keyword
What is Angular?
Angular is a popular front-end framework built on top of typescript, it’s features include:
- A powerful CLI to aid in creating easily maintainable file structures.
- Built in development tools for DOM manipulation, Http services and testing.
- Fully integrated dependency injection based loose coupling.
What is a Single Page Application (SPA)
A web application or web site that interacts with the
user dynamically by rewriting the current page rather than loading a whole new page
from a server.
What is a Webpack?
A Webpack is a module bundler. It takes care of bundling your application for deployment alongside a separate task runner.
What is minification?
The process of removing unnecessary or redundant data without affecting how the resources is processed by the browser.
-Example would be removing of white space, comments, unused code, shorter variable
and function names and so on.
-Used to compress source code files for deployment
In Angular, what is a module?
It’s a mechanism to group components, directives, pipes, and
services that are related, in such a way that can be combined with other modules to
create an application
-Modules can be easily imported and exported for use.
What are components?
The most basic building block of a UI in an Angular application
Everything in Angular components and the application is represented as a tree of these
components.
What are decorators? What are some common decorators?
A keyword preceded by an "@" who's purpose is to store metadata about a class, method, or property. It defines the entity, to which it is attached, so Angular knows how it should handle it internally. Common decorations: @NgModule() -@Component() -@Input() -@Output()
What is a directive?
Directives allow you to attach behavior to elements in the DOM.
What are the two main types of directives? What are some examples of each?
- Structural Directives, for changing HTML layout or Manipulating the DOM’s structure
- -*ngIf
- -*ngFor
- -ngSwitch
-Attribute Directives, for change the appearance or behavior of a DOM element,
component, or another directive.
–ngStyle
–ngClass
What is a Dependency Injection? Why is it beneficial?
It is a specific example of the concept of Inversion of Control. The Angular framework handles where and when resources are injected into our code, so we can focus primarily on business logic.
Dependency Injection is beneficial because it keeps your classes loosely
coupled and isolates test cases.
What is ngModel? What are it’s benefits?
It’s an Angular Directive used to track key information about a FormControl instance (ex. input element). Its benefits include:
- It provides information for enhanced input validation
- It can be used to achieve two-way data binding
What is Data Binding?
A mechanism in Angular for coordinating the parts of a template(HTML) with the parts of a component(TypeScript)
What are the types of Data Bindings? How do you implement them?
One-way
{{ value }}
-Interpolation, used in the template HTML to move data from the component to the DOM
[ property ] = “value”
-Property binding, used in an HTML tag to to move data from the component to the DOM
( event ) = “handler”
-Event binding, used in an HTML tag to move data from the DOM to the component
Two-way
[( ngModel )] = “property”
ng-model, used in an HTML tag to achieve two-way binding.
How do you make a class a component?
Normally we use Angular's CLI to create classes preconfigured to be components. To manually make a class a component, add the decorator "@Component" to the class.
How do you make asynchronous calls using Angular?
Assuming you are using a service with a predefined function that is returning an
observable or a promise.
Make the call to the service and subscribe to it with the subscribe method.
Inside the subscribe method, define a callback to execute when the service call is
resolved and inside that you can store it in a variable or do any manipulation you want.
What is a Pipe? What are some built in pipes?
A pipe takes in data as input, does some transformations, returns some output
Used for writing formatting tasks or other repetitive tasks
Common pipes:
-DatePipe
-LowerCasePipe
-CurrencyPipe
What is a Service?
A class with the @Injectable() decorator. It encapsulates non-UI logic and code that can be reused across an application. It provides its logic or code via dependency injection to other components.
What is an Observable?
A collection that arrives over time(aka lazy loading)
Often used to handle async data requests
You can subscribe to the call and when the observable populates you can get the data
you need from it
What is a Provider?
It's an object or class that provides a component with data. Providers, such as services, must be registered to a component or module for dependency injection to function properly.
What is an Injectable?
A Decorator that tells Angular that the class is available to the Injector for creation.
