Angular/Unit testing Flashcards
What is Angular?
Angular is a front end web application framework/platform that enables us to create single page web applications in an architectural style that allows us to scale and maintain with ease.
what does SPA stand for?
Single page application
type of web application where we receive the entire html/css/js to render an app in the first GET request. Unlike static websites where we get html pages served by a server, we instead receive json data from the server and render as needed. The “change in the view” is done by swapping various html elements depending on the condition/user interactions - via JS manipulating the DOM This means that once the SPA loads, there is no refresh.
SPA
Advantages of SPA
Once the app loads, the application in general is faster because it’s not receiving entire html pages from the server
Because we use AJAX to receive data, our application will stay responsive and not freeze on us (which means, if we happen to be waiting for a huge data that takes a lot of time to load, instead of freezing, we can do things like, displaying the loading bar or spinner)
Disadvantages of SPA
overhead to configure and learn a particular framework
the initial request can be slower than static webpages
Angular uses ES2015 module system to practice separation of concerns It works kind of like namespaces in C# Modules are decorated with @ngModule decorator to let the angular compiler know that it is angular module with additional metadata about it Before we can use any components, we need to have them belong somewhere, by registering them to a module, by including the component name in declaration section of ngModule decoration If you want to use components from a different module, we first need to import the module that has that particular component, in the imports section. We separate modules by features In order to generate modules, use ng g module
Modules
reusable pieces of view that is bundled with its own logic, styles, and tests. They are one of the core parts of angular application and mainly handles user interactions and view display.
Components
_____ tell angular that it is of a certain type (such as @ngModule or @Component) Angular takes the metadata that’s been passed inside the _____, and then adds them to the object. (the module/class)
Decorators
reusable pieces of logic that can be shared across components. They are handled by angular’s dependency injection, and are decorated with @injectable decorator.
Services
a technique in which an object receives other objects that it depends on, called dependencies.
Dependency Injection
take actions depending on the lifecycle of the component. For example, we can tell it to execute a certain action when the component loads, by placing the logic in ngOnInit(). Also, if we have resources that we need to dispose of, we can do so during ngOnDestory() (there are more)
Lifecycle hooks
Angular ____ provide additional functionality to the html pages/view. Two types: Structural, and attribute directives structural directives change the structure of dom/html page - so things like ngIf, ngFor, anything that adds or removes html elements are structural directives Attribute directives changes the look and feel of elements - like ngStyle
Directives
JS events occur in ___ phases
3
JS event phases
Capture phase
Event target
Bubbling
the event travels from window object to the event target
Capture phase
the event reaches the target element and the event listener responds
Event target
the event travels back up from the target element to the window
Bubbling
verifying somebody’s identity
Authentication
verifying if they can access this particular resource and/or take a certain action.
Authorization
Interpolation
{{}}:
Property Binding
[]:
Event binding
():
Two-way binding
[()]:
use publisher/subscriber model and whenever there are any changes, all subscribers are notified of them.
Observables
closed after the result has been returned. Once it is fulfilled it’s done.
Promises
query params are not declared in routes array but instead passed when navigating to it
True
tag acts as a placeholder for the views you want to present depending on your routes.
router-outlet
transform data from one format to another, usually to the ones that can be displayed on the view
Pipes
Testing small units of your code.
Unit testing
unit testing framework
Xunit
Parts of a unit test
Arrange
Act
Assert
This is any setup necessary to prepare for the behavior to test. You assume the thing you wanna test works.
Arrange
You do the thing you wanna test. You usually name the method after the thing you wanna test.
Act
Verify the behavior was as expected, sometimes on the same step as ACT.
Assert
what does TDD stand for?
Test Driven Development
Write tests that fail
Implement code to make tests pass
Test Driven Development
