NG Misc Flashcards
Collection for permanent ng improvement
1
Q
What is Angular?
A
- Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop
- The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development
2
Q
Plattform vs Framework
A
- Angular is not a framework
- Framework ist in der Regel nur die Codebibliothek zum Erstellen einer Anwendung
- Eine Plattform ist ganzheitlicher und bietet eine Reihe von Tools und Unterstützungen
- AngularJS konzentrierte sich ausschließlich auf das Erstellen von Webanwendungen im Browser und war eindeutig ein Framework
- Es verfügte über ein großes Ökosystem von Modulen von Drittanbietern, mit denen man leicht Funktionen zur eigenen Anwendung hinzufügen konnte
- Im Kern wurden jedoch Webanwendungen im Browser erstellt
- Angular 2 hingegen: schlankere Kernbibliothek
3
Q
Framework vs Library
A
Library:
- A library is just a collection of class definitions simply for code reuse, i.e. get the code that has already been written by other developers
- classes and methods normally define specific operations in a domain specific area
Framework:
- „Inversion of Control“
- In a Framework, all the control flow is already there, and there’s a bunch of predefined white spots that you should fill out with your code
- A framework is normally more complex
- It defines a skeleton where the application defines its own features to fill out the skeleton
- In this way, your code will be called by the framework when appropriately
- The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain specific functions.
Their Relation:
- Both of them define an API for programmers to use
- To put those together, we can think of a library as a certain function of an application and of a framework as the skeleton of the application where an API is the connector to put those together
4
Q
What is LocalStorage ?
A
- Is an HTML5 provided key/value pair that allows you to persist information on the browser
- The API is very simple, and basically allows the setting, retrieval and deletion of items
- The Storage interface of the Web Storage API provides access to a particular domain’s session or local storage — so this API is a super set of local storage
5
Q
What distinguishes the Angular Compiler?
A
- Compilation of the output in Angular is decoupled from the browser so that Angular applications can be rendered in different environments (e.g. server or desktop app)
- Angular is versatile as it can be rendered on CLient and Server
- To enable universal rendering, a decoupled compiler is required, since different render patterns can be implemented depending on the environment
- The compiler is responsible for resolving data bindings, registering event handlers, and rendering the resulting HTML for components
6
Q
Data Binding in Angular
A
- Data Binding is a process that creates a connection between the application’s UI and the data. When the data changes its value, the UI elements that are bound to the data, will also change
- Data binding in Angular works by synchronizing the data in the components with the UI so that it reflects the state of the app; e.i. the value of the data
- To achieve the synchronization of the View and the Model, Angular uses change detection
- There are tow types of data binding:
- one-way data binding (change in the state affects the view) and two-way data binding (change from the view can also change the model)
- In one-way data binding, the template expression {{}} — also known as string interpolation — and square braces [] — used to bind a property to the DOM and known as property binding — are used
- there is also event-binding which is defined as the updating/sending of the value/information of a certain variable from the presentation layer (view) to the component (model)
-
Two-Way Data Binding is a combination of both Property and Event binding and it is a continuous synchronization of a data from view to the component and component to the view
- i.e. changes made in the component’s data should sync to the view and should immediately update the model into the corresponding component with view data
7
Q
Two-Way Data Binding
A
- two-way data binding is mainly used in data entry forms where the user changes the view and makes changes in the model with the view data and vice-versa
- Angular uses the combination of Property binding and event binding to implement two-way data binding with the help of the ngModel directive
- NgModel is not a part of Angular’s code library
- it is defined in the forms module library so you need to import the FormsModule library
*
- it is defined in the forms module library so you need to import the FormsModule library
8
Q
One-Way Data Binding
A
- use interpolation {{}} and property binding []
- property binding binds data to a property of an element
- interpolation evaluaes the value of a component variable in the HTML view
- property binding could be used to pass data into a component
- property binding uses the square brackets to indicate to Angular the property of an element that should be updated when the data-bound variable changes
class {
this.srcURL = “http://pexels/image.jpg”
}
img [src]=”srcURL”
// is equivalent to img src="http://pexels/image.jpg"
9
Q
How does Angular update properties and render the DOM?
A
- Angular components are compiled down to factories before being executed by the framework
- Factories are created from the data supplied to the @Component decorator
- Factories are made of Views which Angular uses to manipulate the DOM
- A View is made up of nodes: element node, text node, directive node etc.
- Each node is constructed and created by a specialized function with all the information needed to create the node so as to optimize for speed
10
Q
Container vs Presentation Components
A
- Angular was designed to promote code reuse
- As a result, the recommended component architecture relies on two different kinds of components
- There is a clear pattern of separating your components into Presentational and Container Components (also known as Smart and Dumb components) which emerged from React/React Native a couple of years ago
Advantages of this approach
- There is a better separation of concerns
- The presentation components promote reuse, and you eventually have a library of UI Components
- The Container components are easier to test, and the tests run faster, since you no longer have to do the Angular TestBed setup
- You can improve your application performance by adopting OnPush Change Detection in your container components
- As per the Angular documentation, use the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways)
- Change detection can still be explicitly invoked
- With the default strategy, any change (user events, timers, XHR, promises, etc.,) triggers a change detection on all components
- With OnPush strategy, the component only depends on its @inputs(), and needs to be checked if the Input reference changes
11
Q
What are Container Components?
A
- Container components (or “smart” components) know how to get data and work with services
- Container components are tied to the business logic of your application
- They are not meant to be shared or reused
- Instead, what they do is get data from the server and pass it down to presentation components
Summing up:
- Contain all the business logic
- Pass the data to the Presentational Components, and handle @Output events raised by them
- Have no UI logic
- Do have dependencies on other parts of your app, like services, or your state store.
12
Q
Presentation Components
A
- Presentation components (“dumb” or “lazy” components) that have to be fed with data
- Presentation components do not know about any service
- They are pure, simple UI components that just need some input data to render
- Buttons, tabs, headers, tables are all great candidates to be used as presentation components
- As a result, such components are reusable because they are coded in a way that is not tied to any runtime context
- Presentation components are really just an HTML template that has to be filled with data
- They can also emit events that container components would catch in order to make the actual business logic happen
- The attached image is an example of a typical component architecturethat illustrates this
- Most shareable components will be presentational components, so that we can use them in different contexts
- The only exception to this would be a component that performs a specific task to render some data
- For instance, if you want to create a weather widget that renders the current weather conditions of a given location, that specific component might have its own business logic to retrieve its data from a weather API
Summing up:
- Purely user interface and concerned with how things look
- Not aware about the business logic, or services
- Receive data via @Inputs, and emit events via @Output
@Component({...})
export class MyComponent {
@Input()
data: Data;
@Input()
text: string;
@Output()
onButtonClick = new EventEmitter();
}
~~~
h2{{data.title}} h2
img src=”{{data.picture}}” class=”img-fluid”
p {{data.description}} p
div
button role=”button (click)=”onButtonClick.emit(data.id)”
{{text}}
button
div
13
Q
DOM Properties vs HTML Attributes
A
- Every HTML element is represented as a JavaScript DOM object and every attribute of the HTML element is represented as a DOM property
- While they appear to be the same, there are often differences
- For example, the text inside an HTML element is accessed using the textContent property, which doesn’t have a corresponding HTML attribute
- When writing HTML Code, you can define attributes on HTML elements
- Once the browser parses that code, a corresponding DOM node is created
- This node is an object and as such it has properties
- For a given DOM node object, properties are the properties of that object, and attributes are the elements of the atrritbutes property of that object
- When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it is not a one-to-one relationship
14
Q
Library Dependencies
A
- You should only have a node_modules directory in the root of your project, not within the library’s directory
- So if your library needs 3rd party packages, then you should add them to the dependencies of your root package.json
- The devDependencies also go here
- In your library’s package.json you should only add peerDepencies
- They tell the users of your library which packages are needed if they wantto install your package
15
Q
Service vs Provider
A
- A provider/service are the same thing, if you want to use dependency injection (injecting things through the constructor)
- you need to add the @Injectable decorator and add it to the providers array
- If you are just creating a simple class that you just want to create new instances of then you don’t need to add it as a provider (you would just instantiate a new instance of it, i.e. let myThing = new Thing();
