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.
