Fudamentals Flashcards
What and where is the Angular.json file?
A json file at the root level of the Angular workspace, provides project specific and workspace configuration details.
Such as path details for styles, scripts and assets.
And config for build and development tools by the CLI (e.g. serve.
A per-project config section and a few workspace properties
What is the purpose of the package.json file?
Configures the npm package (node) dependencies that are available for all projects in the workspace
What are NPM packages?
A package in Node.js contains the files you need for a module.
What is Node.js?
Node.js is an open-source server environment.
Allows you to run JavaScript on the server
What is the function of package-lock.json file?
Provides version information for all packages installed into node_modules by the npm client
What is the function of package-lock.json?
Provides version information for all packages installed in node_modules by the npm client
What is the function of the node_modules?
NPM packages are installed here and is accessible to the entire workspace.
The dependencies here will be visible to all projects (if its workspace wide)
In terms of programming, how does Node.js perform?
Node.js runs single-threaded, non-blocking, asynchronous programming
What is NPM?
NPM is a package manager for Node.js packages (and can be used for modules as well)
It is installed with Node.js
Consists of three main components:
-the website
-the CLI (command line interface)
-the registry
What is the public NPM registry?
A database of JavaScript packages.
It is used by developers to contribute & distribute their packages to communities (or local to their organisation) and also install others.
How do you use NPM?
Can be run via CLI with commands in a terminal.
‘npm …’
What is NVM?
And what is it used for?
Node Version Manager, a tool for (surprise) managing Node versions on your device.
Different projects on your device might be using different NPM versions, so can be provide version compatibility
What does the index.html file do?
The common name for the default page shown for a website (if no other page is specified)
Appropriately named as it serves an index to the main pages of the site
What is bootstrapping?
Bootstrapping is the process of initialising or loading the Angular application
What are the main steps in Bootstrapping?
- Load the Index.html file as the starting point for the app
- Loads Angular and third-party libraries/applications
- Executes the main.ts file as the application entry point (or as defined in the angular.json file for that project)
- Calls the bootstrapModule function to load and execute the Root module (app.module.ts)
- Executes the Root Component/s (example: app.component.ts) as defined in the Root Module in the bootstrap array. Sometimes called the Entry Components (not to be confused with the deprecated way to bootstrap)
- Display the Root Module Template (if called in the index.html)
What does the main.ts file do?
The file acts as the main entry point of the application, which is defined in the angular.json file.
It creates the browser environment with
‘Import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’
And calls the bootStrapModule function to tell the builder to bootstrap the app:
‘platformBrowserDynamic().boostrapModule(AppModule)’
What does the App.module.ts file do when the application first loads?
This is the default name for the file that will bootstrap the initial components.
It loads the components listed in the bootstrap array under the ‘providers’ array. And it will insert each one into the DOM
Each of those bootstrapped components is the base of its own tree of components.
Most applications only have one component tree and bootstrap single root
What is the root component?
The initial component bootstrapped by the app.module.ts when the application starts
And it is loaded into the DOM
What are Angular Modules?
Angular NgModules are different to JavaScript (ES2015) modules
But like JS modules they can import functionality from other modules and allow their functionality to be exported.
NgModules is a class marked by the @NgModule decorator.
Ng Modules are basically containers for components.
As Angular loads items in a hierarchical tree structure, a list of components can be loaded in with the initialisation of that module
Describe the structure of an Angular Module
A module will import the decorator class @NgModule from angular core and will have the decorator @NgModule ({…})
In which you have the following:
Declarations [ ]
Lists the component classes to be loaded in. As well as directives and pipes
Imports [ ]
Other modules to be loaded
Providers [ ]
Services are loaded in here and the bootstrap array
And then the export of the module along with any module specific functions.
What is an Angular Component
Each Component defines a class that contains the application data and logic and is associated with an HTML template that defines a view.
Components will often load child components into its view via the selectors, forming a tree structure relationship
Define the structure of a component
It will import the Component class from angular core and have the Component decorator @Component
The decorator defines the class as a component class and specifies its metadata.
In the decorator you have the following:
Selector:
The tag that other components (or in an html document) can use to reference this template. Which often build a view hierarchy
Template/TemplateUrl
Defines the component’s ‘host view’. This html is either put inline or as a relative path to a html file.
Providers
Like modules, can define an array of services that the component requires.
What might you use to delimit a multi-line literal string for a template in the @Component?
A Template literal.
Delimits the string literal with backticks
template: <div>Hello World</div>
<br>
What is Data-Binding in Angular?
A mechanism for coordinating parts of a template with parts of a component.
Essentially allow you to send values, properties or events between the DOM and the Component.
Typically placed in the html of the template
Can be a two-way binding (send either direction) depending on the binding
What are the types of Angular Data-Binding?
Component (source)
DOM (view)
{{value}}
Component —> DOM
Interpolation
[property] = “Value”
Component —> DOM
(sending a value to an element’s property in the DOM)
Property binding
(event) = “handler”
DOM —> Component
Event binding
[(ng-model)] = “property”
DOM <—> Component
What is the ‘banana-in-a-box’ binding in Angular?
A two-way binding
When we use both the square and normal parentheses. But we can use either by its own
[(ng-model)] = “property”
The normal parenthesis would bind from DOM to Component
The square parenthesis would bind from Component to DOM
What are Angular Pipes?
Allows you to declare display value transforms in your template HTML
Meaning you can perform a transforming function on your data in a interpolative binding, to modify or format that value.
{{interpolated_value | pipe_name }}
There are built-in pipes or you can make your own with the @Pipe decorator
What is the Safe Navigation Operator? And what is it used for?
Used in bindings to prevent a compile error if the value is NULL.
Can add the operator in with a ? before the full stop
{{ event?.location?.name }}
(The above is accessing a Json object so multiple levels could be null)
Are Components directives?
Technically yes, but because they are distinct enough in Angular they are defined with the decorator @Component.
The @Component extends the @Directive with template-oriented features
What are Directives and how do they work?
A class that can modify the attributes in the DOM or its structure, as well as Component data.
They typically start with the ng prefix, i.e that *ngFor=“ “. This is a short-hand syntax that Angular interprets and converts to longer form (using <ng-template>)</ng-template>
A directive class definition must have the @Directive decorator (to supply the metadata)
It is usually associated with a HTML element or attribute.
When Angular finds a directive in an HTML template, it creates an instance of a matching directive class. It then gives it control over that portion of the browser DOM
What is the syntax for referencing Directives?
*ngIf - Use lowerCamelCase when the directive applies to the html attribute
*NgIf - Use UpperCamelCase for when referring to the directive class, i.e, describing its behaviour & properties
What are the types of Directives?
Attribute Directives - can modify behaviour and appearance of HTML elements, attributes, properties and Components.
Can be added in the template as a css attribute to that element.
Structural Attributes - can modify the structure of the DOM, such as adding, removing or manipulating elements. Such as *ngFor
Components - they use the @Component decorator which is an extension of the @Directive class
Describe the structure of an Angular Directive
Will import the Directive class and have the @Directive decorator.
The Selector will be in square parentheses because its references as a HTML attribute and not an element (like Components)
Will also typically import the ElementRef class and have this in the structure to access the element its being applied to.
Constructor(ref:ElementRef) {
this.myEle = ref.nativeElement
}
What the main ways components can communicate between each other and exchange data?
Using the @Input and @Output decorators
What would you mainly use to send data from the Parent component to the child component?
The @Input decorator
The @Input is defined in the child component and then declared within the html selector used in the parent (calling) component
Child:
(Imports ‘Input’)
Selecttor: ‘child-app’
export class childComponent {
@Input( ) item = ‘ ’
}
Parent:
template:
<child-app [item]=‘myValue’ /child-app>
What would you mainly use to send data from the Child component to the parent component?
The @Output decorator
The @Output is defined in the child component. It lets the parent component now that the property has change with an Event sent using the EventEmitter.
Which allows the user to create a custom event
Child:
(Imports ‘EventEmittet’ and ‘Output)
Selector: ‘childApp’
export class childComponent {
@Output( ) newEvent = new EventEmitter<string>( )</string>
doSomething(value:string) {
this.newEvent.emit(value)
}
Template: ‘
<input type=‘text’ id=‘inputbox’ #newItem>
<button type=‘button’ (click)=“doSomething(newItem.value)>Click me</button>’
}
Parent:
export class parentComponent {
parentMethod(item:string) {
//do something
}
template:
<child-app (newEvent)=‘parentMethod($event)’>< /child-app>
What are Template Variables and what are they used for?
Used to reference data from one section of your template, in another section.
Often declared with the # symbol
Could refer to:
-a DOM element within a template
-a directive or component
-templateRef
-web components
Common example
<input #myVar placeholder=“enterValue” />
<button type=button (click=“doSomething(myVar.value)”>Click me</button>
Other example
The template var would be the temp variable defined in the ngFor
<div *ngFor=“let item of items”>
….
</div>
Where ‘item’ is the template var
What is an ngClass used for? And explains its syntax
Used to assign CSS classes to the template html.
<html [ngClass]=“classx” /html>
Classes be assigned in an array, a single string or delimited (space) string or via an object when a value evaluates to truthy
[ngClass]=“{‘class1 class2’: true”}
What is ngStyle and explain its structure
Applies styles to template html elements
<html [ngStyle]=“{‘font-style’: something} /html>
What are the main Angular classes that use the Decorator class?
@Component
@Directive
@Pipe
@Injectable
@NgModule
