Angular Flashcards
What makes a “single page application” (SPA) different from a normal web page?
A single page application interacts with the user by dynamically rendering each component of the single page, instead of reloading a new page from the server with each request by the user.
Explain the difference between server-side and client-side rendering
Server-side rendering will render the webpage on every new request that is sent to the server, which can slow down larger webpages with many different pages.
Client-side rendering will render the webpage content on the browser by using JavaScript or TypeScript to dynamically change what is displayed on the screen, reducing server calls and time to get HTML from the server.
What are some features of the Angular framework?
Angular provides a highly optimized, single page web application.
Angular provides two way data binding for component and view synchronization, as well as a CLI to create new features inside of your application, or create a new application all together.
How does TypeScript relate to JavaScript? What are the major benefits of using it over JavaScript?
TypeScript is a superset of JavaScript, anywhere that JavaScript can be used, TypeScript can be substitued in. TypeScript can recognize JavaScript code and any JavaScript libraries, as well as be called from JavaScript code.
The main differences between the two is TypeScript allows for strict typing of variables, Object Oriented features, as well as poitning out errors that can keep the code from correctly rendering and running on the browser.
List the data types of TypeScript
number, boolean, string, void, null, undefined, never, any
How would you create a new Angular project?
ng new <project-name></project-name>
What is a component? How would you create one?
Components encapsulate data, logic and structure for a view. Most basic building block of an angular app. Angular apps contain a tree of components.
ng generate component component-name-goes-here
What files make up a component? What is the “spec” file used for?
A componenet is made up of 4 files: HTML template, Typescript class, Styles template, and a spec file. The HTML template contains the HTML which is rendered on the page. The Typescript class defines teh behavor of the componenet. The Styles template contains the CSS for styling the page. The spec file is used for testing of the component.
Explain the relevance of npm to Angular projects. Which file does npm use to track dependencies?
npm is used to install the angular command line interface (CLI) that we use to create ng projects and their components, services etc.I think package.json is used to track dependencies for node.js
List some decorators for Angular apps
@Component, @NgModule, @Pipe
What is the lifecycle of a component? List some lifecycle hooks
Life cycle is the stages a componnet goes through from intialization to destruction of that componenet.
The life cycle hooks are :
- ngOnChanges - run before init and after every change of an input control within a component.
- ngOnInit - initializes data within a component.
- ngDoCheck - runs everytime the input components are checked for changes.
- ngAfterContentinit - is executed when Angular performs any content projection within the component views.
- ngAfterContentChecked - executes every time when the content of the component has been checked by the change detection mechanism of the Angular.
- ngAfterViewInit - executes when the component’s view has been fully initialized.
- ngAfterViewChecked - executed every time when the view of the given component has been checked by the change detection algorithm of Angular. This method executes every subsequence execution of the ngAfterContentChecked.
- ngOnDestroy - executed just before Angular destroys the components.
What is a directive and what are the different types? How to tell these directives apart with syntax?
Directives allow us to instruct Angular how to transform the DOM when rendering a template.
There are three types of directives in Angular
Attribute Directive
-Used to alter the appearance and behavior of DOM elements.
-Examples of Angular attribute directives are ngStyle and ngClass.
-You can create your own attribute directives to encapsulate common logic. Basically, anything you can do to the DOM in HTML, you can do programmatically with a custom attribute directive (i.e. add, remove, change styles, set a property like a label, add or remove a class, etc.)
Structural Directive
-Used to alter the structure of the DOM. * indicates a structural directive.
-Examples of structural directives are *ngIf and *ngFor
-You can create your own structural directives to encapsulate common logic.
Components
-Components are directives with a template!
What is the benefit of using a directive like NgClass over the class attribute, or even property binding to the class attribute?
Using [ngClass] you‘re able to apply multiple classes in a really convenient way. You can even apply a function that will return an object of classes. [class. makes you able to apply only one class (of course you can use class.
How does dependency injection work in Angular?
Components shouldn’t save or fetch data directly. They delegate their data access to a service. Import { Injectable } from ‘@angular/core’ to use the @injectable() decorator. The @injectable() decorator accepts a metadata object for the service.
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.
