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
