Week 8 Angular & SDLC QC Questions Prep Flashcards
What makes a “single page application” (SPA) different from a normal web page?
SPAs are faster than traditional web applications because they execute the logic in the web browser itself rather than on the server. And after the initial page load, only data is sent back and forth instead of the entire HTML that reduces the bandwidth.
Explain the difference between server-side and client-side rendering
Client-side rendering manages the routing dynamically without refreshing the page every time a user requests a different route. But server-side rendering is able to display a fully populated page on the first load for any route of the website, whereas client-side rendering displays a blank page first.
What are some features of the Angular framework?
Cross Platform. Progressive Web Apps. Use modern web platform capabilities to deliver app-like experiences.
Speed and Performance. Code Generation. Productivity. Templates. Full Development Story. Testing.
How does TypeScript relate to JavaScript? What are the major benefits of using it over JavaScript?
TypeScript is an open source syntactic superset of JavaScript that compiles to JavaScript (EcmaScript 3+). TypeScript offers type annotations which provide optional, static type checking at compile time. Since it is a superset of JavaScript, all JavaScript is syntactically valid TypeScript.
The main benefit of Typescript is that it offers the ability to add static types to your Javascript code.
List the data types of TypeScript
Some common data types in TypeScript are:
number ,
string ,
boolean ,
enum ,
void ,
null ,
undefined ,
any ,
never ,
Array and tuple
How would you create a new Angular project?
The first step is to install the Angular CLI.
npm install -g @angular/cli@latest
The second step is to create the project using ng new.
What is an angular component? How would you create one?
Angular components are a subset of directives, always associated with a template.
To create a component use the command “ng g component “
What files make up a component? What is the “spec” file used for?
Each component consists of:
An HTML template that declares what renders on the page A TypeScript class that defines behavior A CSS selector that defines how the component is used in a template Optionally, CSS styles applied to the template
The “spec” file contains unit tests for the main AppComponent.
Explain the relevance of npm to Angular projects.
Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages. These packages are maintained and installed with the Node Package Manager (npm). Node. js and npm are essential to Angular development.
Which file does npm use to track dependencies?
All npm packages contain a file, usually in the project root, called package. json
List some decorators for Angular apps
- Class decorators, e.g. @Component and @NgModule
- Property decorators for properties inside classes, e.g. @Input and @Output
- Method decorators for methods inside classes, e.g. @HostListener
- Parameter decorators for parameters inside class constructors, e.g. @Inject
What is the lifecycle of a component? List some lifecycle hooks:
- There are 8 different stages in the component lifecycle.
- Every stage is called as lifecycle hook event. So, we can use these hook events in different phases of our application to obtain control of the components.
- LiefeCycleHooks include: ngOnInit, ngOnDestroy, ngDoChecks(), ngAfterViewInit()
What is a directive and what are the different types? How to tell these directives apart with syntax?
Directives are classes that add additional behavior to elements in your Angular applications.
The different types of Angular directives are as follows:
Components: Used with a template. This type of directive is the most common directive type.
Attribute directives: Change the appearance or behavior of an element, component, or another directive.
Structural directives: Change the DOM layout by adding and removing DOM elements.
Structural Directives are preceded by Asterix (*)symbol.
Attribute Directives do not use the Asterix.
What is the benefit of using a directive like NgClass over the class attribute
ngClass is more powerful. It allows you to bind a string of classes, an array of strings, or an object.
What is a pipe? A service?
Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. There are some built in pipes, but you can also build your own pipes. A pipe takes in a value or values and then returns a value.
Angular services are objects that get instantiated just once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e., data is available all the time.
How would you create a custom pipe?
1) Create a Pipe Class and decorate it with the decorator @Pipe.
2) Supply a name property to be used as template code name.
3) Register your Pipe in the module under declarations.
4) Finally, implement PipeTransform and write transformation logic.
How would you create a service?
You can create a service using the following command:
ng generate service
How does dependency injection work in Angular?
Angular facilitates the interaction between dependency consumers and dependency providers using an abstraction called Injector. When a dependency is requested, the injector checks its registry to see if there is an instance already available there. If not, a new instance is created and stored in the registry. Angular creates an application-wide injector (also known as “root” injector) during the application bootstrap process, as well as any other injectors as needed.
What is an Angular module?
In Angular, a module is 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. An Angular application can be thought of as a puzzle where each piece (or each module) is needed to be able to see the full picture.
What properties should you set inside an Angular module?
The following are the most important properties that should be set inside an Angular module.
declarations: The components, directives, and pipes that belong to this NgModule.
exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.
imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
providers: Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the application. (You can also specify providers at the component level.)
bootstrap: The main application view, called the root component, which hosts all other application views. Only the root NgModule should set the bootstrap property.
What’s the difference between a JavaScript module and Angular module?
The difference between Js Module & Angular Module is Js module is just a file, but angular module is a class that logically groups the components and others.
Some common Angular Modules are:
BrowserModule: @angular/platform-browser - When you want to run your app in a browser
CommonModule: @angular/common - When you want to use NgIf, NgFor
FormsModule: @angular/forms - When you want to build template driven forms (includes NgModel)
ReactiveFormsModule: @angular/forms - When you want to build reactive forms
RouterModule: @angular/router - When you want to use RouterLink, .forRoot(), and .forChild()
HttpClientModule: @angular/common/http - When you want to talk to a server
How would you run your unit tests for an Angular project?
You can execute the unit tests for your app via the CLI by running ng test from within the root, project directory. Upon running ng test , two things happen. First, Angular uses the Karma test runner to open up a new browser window that contains the reporting mechanism for your unit tests.
How have you used the HttpClient? What methods does it have and what do they return?
I used the HttpClient to send and receive Http requests and responses from URLs. It was used for the login and registration functions of our current project 2.
Some methods HttpClients have are:
GET, POST, PUT, and DELETE.
GET returns an HTTP status code of 200 (OK)
POST request is used to send data (file, form data, etc.) to the server. On successful creation, it returns an HTTP status code of 201.
A PUT request is used to modify the data on the server. It replaces the entire content at a particular location with data that is passed in the body payload. If there are no resources that match the request, it will generate one.
A DELETE request is used to delete the data on the server at a specified location.`
What is an Observable? What’s the difference between it and a Promise?
Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time.
