Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
56 Cards in this Set
- Front
- Back
Why were client-side frameworks developed? |
Growing complexities of web application logic Data handling across views Separation of concerns |
|
What does the angular.json file do? |
Contains all the app configs Used by the builder to find entry point of application |
|
What does the main.ts file do? |
Creates a browser environment Bootstraps the AppModule declared in app.module.ts |
|
What are some of the ways Angular addresses front end development challenges? |
Separation of concerns via Components |
|
Where are all app Components declared? |
AppModule - app.module.ts |
|
What does the app root aka app.component.ts file do? |
Interacts with the web page and serves data to it. |
|
What three properties are required to make up a component and what are their functions? |
Selector - used for accessing the component like an ID Template /template-URL - holds the view/html StylesURL - contains the stylesheet |
|
What file calls the app-root? |
Index.html |
|
How does an angular app work? |
1. Builder determines app entry point via the angular.json file 2. Entry point (main.ts) file imports platformBrowserDynamic and bootstraps the AppModule 3. Angular calls index.html 4. Index.html calls app-root component 5. Html templates are displayed inside the app root |
|
What are the advantages of angular VS other frameworks? |
1. Includes a lot of features out of the box like routing, state management, http services, rxjs, DI, two-way binding, forms 2. Declarative UI (html) makes it easier to use 3. Long term Google support 4. Consistency - development is usually more consistent across projects and developers |
|
What are the main differences between Angular and AngularJS |
1. Architecture: Uses MVVC Components (aka directives with pre-defined templates) vs MVC 2. Language: Typescript (statically typed) vs JS (dynamically typed) 3. Mobile Support: Angular supported by all major browsers, AngularJS is not Structure: makes it easier to maintain larger code bases 4. Property and event binding is simplified using [] and () instead of named directives. |
|
What's the difference between static and dynamic typed languages? |
Static typed code is translated and checked when the code is compiled. Dynamic is translatic on the fly while the application is running. Static language allows for type checking before running the program |
|
What is ahead-of-time (AOT) vs just-in-time (JIT) compilation? |
JIT Compiled in the browser at run time. Each file compiled separately No need to rebuild after code changes Best suited for local dev AOT Compiled at build time by the machine All code compiled together No need to destroy compiler More secure (doesn't expose source code) Best for production |
|
What are the advantages of AOT compilation? |
1. Faster - code is already translated and smaller application due to not needing to include angular compiler 2. Better security - all files compiled together and sent as single file, including external HTML and CSS files meaning less AJAX calls and hidden source code 3. Errors can be caught and handled earlier during the build |
|
What's the default compiler for Angular? |
JIT is default Can run AOT by adding --aot as option to ng build and ng serve |
|
What are decorators? |
Used to mark file types like modules/components/services Provides Metadata that defines how Angular should use the files |
|
How are component classes linked to their views? |
Via the decorators metadata |
|
What's the purpose of the BrowserModule? |
Provides essential services to launch and run a browser application. Can only be used once in the root module |
|
What's the purpose of CommonModule? |
Provides all the basic Angular directives and pipes like *ngFor and *ngIf |
|
What is a module? |
A place to group components, directives, services and pipes with related purposes or functionality. Can import other module functionality and export its own functionality to be used. |
|
What are the two types of modules called? |
Root module (imports BrowserModule & CommonModule)
Feature module (imports CommonModule only)
Decorated with @NgModule |
|
What's the purpose of services? |
Shares data and functions with different components |
|
How many times can a service be instantiated in an app? |
Once |
|
What decorator is used for services? |
@Injectable |
|
What are lifecycle hooks? |
Every component goes through a lifecycle from creation to destruction. Angular provides "hooks" that can trigger functionality during these different phases. |
|
What are the lifecycle hooks? |
ngOnChanges ngOnInit ngDoCheck *subsets of check* ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked * end subset* ngOnDestroy |
|
How is ngDoCheck() hook used? |
Detects and acts on changes that angular can't catch with ngOnChanges. Essentially a custom onChange event. |
|
How are ngAfterContentInit() and ContentChecked() used |
Init responds after angular projects external content into a component view. Checked responds after the projected content is checked by angular. |
|
How are ngAfterViewInit() and ViewChecked() used? |
Responds after angular initializes the component's views and child views. Checked runs after angular checks those views. |
|
How is ngOnDestroy() used? |
Clean up before an element is destroyed. You should unsubscribe Observables and detach event handlers to avoid memory leaks |
|
What's the difference between string interpolation and data binding? |
Interpolation: one way binding only from component to view. Uses {{}} Data binding: two way binding. Uses [] |
|
What's the difference between Angular and JS expressions |
Angular expressions: Context: local aka $scope Null handling: doesn't throw reference/type error Control flow: can't use loops, conditionals or exceptions Function declarations: No Bitwise, comma, void ops: No Filter/pipes: Yes Allows one-time binding: No JS expressions: Context: global aka window scope Null handling: throws reference/type error Control flow: can use loops, conditionals and exceptions Function declarations: Yes Bitwise, comma, void ops: Yes Filter/pipes: No Allows one-time binding: No |
|
Observables vs Promises |
Promises async only Emits single value Not lazy Can't be cancelled Observables asyn and non async Emits multiple values over time Lazy - not called until subscribed Has operator functions |
|
Do angular apps render on client side or server side by default? |
Client side |
|
How can Angular be rendered on server side? |
Angular Universal |
|
What is an Angular directive? |
A class with its own behavior that can be imported into different components. Often used on HTML elements to manipulate the DOM. Decorated with @directive |
|
What are the different types of Angular directives? |
Component Structural Attribute |
|
What's the purpose of an attribute directive? |
Change the look and behavior of a DOM element |
|
What's the purpose of a structural directive? |
Manipulate DOM elements Always starts with * Can be applied to any DOM element |
|
How do you share data from parent to child component |
@Input decorator in the child component and [property Name] in parent template on the child component. |
|
How to pass data from child to parent components |
@ViewChild + ngAfterViewInit() in parent @Output + EventEmitter in child |
|
What's dependency injection? |
A design pattern in which a class requests dependencies rather than creating them. Angular provides dependencies to a class on instantiation. |
|
Explain MVVC |
Model View View Model View is the visual layer. Model is the data layer. ViewModel is an abstract layer that manages the data, handles the logic and displays it in the view. View and ViewModel are connected by data binding. |
|
What is an injector? |
Data structure mechanism that's configured with a provider that stores info on where and how services form. Allows Angular to create a map of internal dependencies. A DI token is used like a key to the map. A new injector instance accompanies every class. |
|
What is a provider? |
An object that defines how to obtain an injectable dependency associated with a DI token/lookup. It provides the instructions to the injector. |
|
What are Angular pipes? |
Simple functions used in template expressions to transform data. Takes the element as first argument and list of parameters as second element. Represented by | |
|
Lazy loading vs eager loading |
Eager loads a resource as soon as code is executed, including dependencies. In Angular, this means all ngModules are loaded when the application loads Lazy load delays initializing a resource until its actually needed/called. |
|
Does Angular use eager or lazy loading by default? |
Eager |
|
What does it mean for a component to have local scope? |
They can only be used in their current module unless exported. Private visibility. Have to be imported in every module that needs it. |
|
What does it mean for a service to have global scope? |
Public visibility. They can be used anywhere in your app. Only needs to be imported once in root. |
|
What kinds of modules need to be imported every time you need them? |
CommonModule (ngModule) Any module that gives you components, directives, or pipes |
|
What kinds of modules only need to be imported once? |
HttpClientModule BrowserModule BrowserAnimations/NoopAnimationsModule Any module that provides services only |
|
What are disadvantages of angular? |
1. Difficult to manage state as you scale due to two-way data binding 2. Difficult to manage various scopes as you scale and more difficult to debug 3. Large file sizes since it includes so much |
|
What are ways you can optimize an angular app? |
1. OnPush change detection 2. Detach change detection/ngZone 3. Pure pipes 4. AOT compilation 5. Lazy loading modules 6. Trackby on *ngFor 7. Preloading modules |
|
How does onPush change detection work? |
When a change occurs, angular checks every property of every object used in a component and its children. When onPush is turned on, it creates a new object reference instead of mutating the object itself. Then the child component checks if the object reference is the same and only checks the properties if it's not. |
|
How do you lazy load a module? |
In the routing module, you can add a path to the module you want to lazy load using .forChildren() to import the module instead of a component. In the lazy loaded module, you add a separate routing module with the normal path and component syntax and remove the component from the AppModule declarations and add to the lazy loaded module declarations. |