Angular

What is Angular?

An open source javascript framework for building client applications in HTML, CSS, and JS/TS. It's written in TypeScript.

Why use frameworks like Angular?

Because programming an application with just javascript alone becomes difficult when webapps become more massive

True or False: Angular is opinionated?

True, Angular utilizes the MVC design pattern, so it is opinionated in that regard.

What are some of the technologies you might include in your environment to create an Angular application?

NodeJS, NPM, Angular CLI

What is NodeJS?

An asynchronous event-driven JavaScript runtime built on Chome's V8 JavaScript engine.

What is NPM?

Stands for Node Package Manager. It is the default package manager for NodeJS.

What is the Angular CLI?

Angular CLI is the Command Line Interface. It allows you to scaffold and build angular apps using NodeJS style modules. It also handles many common tasks for you, such as generating directives, services, and components.

What is an Angular service?

It's a typescript object with reusable fields and methods that can be injected into components. Must be added to the providers of both the root module and the components that you want to use them in.Requires @Injectable() decorator to let angular know that it can be injected

What do Angular services do?

Angular services provide the ability to inject certain functionality into one or more components.

What is the folder structure of an Angular 4 application as created by the Angular CLI?

e2e, node_modules, src

What is e2e?

The end-to-end test folder mainly used for integration testing.

What is in the node_modules?

It's where NPM packages are installed.

What does src contain?

All of the files for the actual Angular project itself.

What is the difference between Angular 1 and Angular versions 2 and beyond?

Angular v1 is HEAVILY written in JavaScript, is known as Angular JS. Angular v2+ syntax is so heavily modified it's now a nearly completely different framework

What are some of the files you can find in the root directory of an Angular 4 application as created by the Angular CLI

.angular-cli.json

.gitignore

package.json

What is package.json for?

It tells which libraries will be installed into node_modules when you run npm install.

What does .angular-cli.json do?

It holds project name, version of the CLI, etc

Where is the app folder located?

The app folder is located within the project's src folder.

What four files does the app folder contain if the project is created by the Angular CLI?

app.module.ts, app.component.css, app.component.html, app.component.ts

What is a decorator?

A special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. They are functions that called at declaration. Decorators look a lot like annotations and are used to hold meta data in angular 2+.

What do decorators allow us to accomplish?

Decorators allow us to extract a block of logic that can then be easily reused throughout an application

True or False: annotations/decorators are able to take in their own arguments

True

What are the four main types of decorators?

Class, Property, Method and Parameter

What is the Component decorator used for?

It's a Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

What is the @Injectable decorator used for?

It marks a class as available to be provided and injected as a dependency.

What is the @Directive decorator used for?

It marks a class as an Angular directive. You can define your own directives to attach custom behavior to elements in the DOM.

What is TypeDecorator?

An interface implemented by all Angular type decorators, which allows them to be used as decorators as well as Angular syntax.

What is a module?

In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application

What is a Directive?

It's a custom keyword we introduce to the html page. It's the mechanism by which we attach behavior to elements in the DOM

What is @NgModule?

Used to create a module. Configures the injector and the compiler and help organize related things together.

What are some of the attributes inside of the @NgModule decorator?

Declarations, Imports, Providers, Bootstrap

What is bootstrapping?

When we talk about bootstrapping in anything computer related, we are talking about the first piece of code that is loaded. In the case of angular we have to tell it which component is the starting point for our application.

What is a pipe in Angular?

A way to write display-value transformations that you can declare in your HTML. A pipe takes integers, strings, arrays, and dates as input to be converted in the format as required and display the same in the browser. the input and pipe are separated by a vertical bar and wrapped by the double curly braces {{ x | pipe }}.

What are some pipes that come with Angular?

Pipes that come with Angular include lowercase, uppercase, titlecase, and currency.

Can we create custom pipes in Angular?

Yes. Using @Pipe() on a class. Also implementing PipeTransform. And to use the pipe you'll need to add it to a module.

What are filters in Angular?

Filtering is a way to select a subset from a group of items. It is a function attatched to an array and that function returns an array containing the subset.

What is routing?

Routing refers to how the application will navigate between pages.

Why does Angular implement its own routing module?

Angular implements its own routing module in order to allow for single-page web applications.

How do we implement routing in Angular?

We first need to add the router to our module, then use the forRoot() function to define all the paths that the router will be able to handle. The router will load the html fragment whereever it sees the tag. You can use the [routerLink]="/path" attribute inside of html to tell the router to switch views.

What is a component?

Components are the fundamental building block of our applications. From Angular's documentation, "A component controls a patch of the screen real estate that we could call a view, and declares reusable UI building blocks for our application."

Where is @Component added in a file?

The @Component decorator is added to the top of the component's class definition inside its component.ts file.

What are some of the attributes inside of the @Component decorator?

selector, templateUrl, stylesUrl

What does the "selector" attribute of @Component do?

It's a CSS selector that identifies this component in a template. (eg selector: 'app-metahuman' or selector: '#app-metahuman' )

What is the "templateUrl" attribute of @Component?

It's a URL to an external file containing a template for the view

What is the "stylesUrls" attribute of @Component?

stylesUrls - List of URLs to stylesheets to be applied to this component's view

What are different types of directives?

Component Directive, Attribute Directive, Structural Directive

What are some examples of structural directives?

"ngFor", ngIf, ngIfElse, ngSwitch, *ngDefault are "structural directives".

Why are they called structural directives?

We call them STRUCTURAL directives because they have the potential to alter the ENTIRE structure of the DOM.

How does *ngIf work?

It conditionally includes a template based on the value of an expression

How does *ngFor work?

It instantiates a template once per item from an iterable.

What is an Observable?

An observable provides support for passing messages between publishers and subscribers in an application. A function is defined for publishing values, but is not executed until a consumer subscribes to it. They receive notifications until the function completes or the subscriber unsubscribes.

What must you do in order to use Observables?

You must import the Observable from 'rxjs/observable' library

What is the difference between a Promise and an Observable.

Observables are declarative (they don't execute until subscription) while Promises execute upon creation. Observables are cancellable, while Promises are not. Observables return many values while a promise only returns one value.

What does an Attribute Directive do?

Changes the appearance or behavior of an element, component, or another directive. An example would be ngStyle

How could we create an attribue directive?

If we use @Input() in front of a component class property then that property will now represent an attribute directive for its component directive.

What is data binding?

Data binding involves the concept of defining the communication between a component and its respective views. Data binding allows for dynamism and interactivity in applications.

What are the three categories of data binding according to the direction of data flow?

From the source to view,

From view to source,

Two way sequence of view to source to view

What are 7 different types of data binding?

Interpolation, Property, Attribute, Class, Style, Event, Two-way

Which category does interpolation belong to?

One-way from data source to view target

Which category does Property binding belong to?

One-way from data source to view target

Which category does Attribute binding belong to?

One-way from data source to view target

What is interpolation (one-way) data binding?

Interpolation is a technique that allows the user to bind a value to a UI element. It refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters.

Which category does Event binding belong to?

One-way from view target to data source

What is event binding?

When information flows from the view to the component when an event is triggered. The view sends the data from an event like the click of a button to be used to update the component.

What is property binding?

Property binding involves updating the value of a property in the component and binding it to an element in the view.

What are event emitters?

EventEmitter is a way to emit events from a child component to the parent component. Use @Output in front of a class property eventEmitter to be able to use the eventEmitter as a custom event for the class' element directive.

What is two-way data binding?

Two-way binding is a mechanism where data flows both ways from the component to the view and back. The component and view are always in sync, and changes made on either end are immediately updated both ways. Two-way binding is commonly used when dealing with forms where the user input is used to update the component's state and vice versa.

Which category of data binding is [( )] used for?

Use [( )] to bind in two way - data binding.

Example:

Which category of data binding is [ ] used for?

Use [ ] to bind from source to view (attribute, class, style etc)

Example:

Which category of data binding is ( ) used for?

Use ( ) to bind from view to source (ie Event binding)

Example:

Save

Which category of data binding is {{ }} used for?

Use {{ }} to bind from source to view. Example:

Customer: {{ currentCustomer }}

What is a major similarity between interpolation, class and property binding?

They are all one-way from data source to view target

How do you install Angular?

npm install -g @angular/cli

What's the lifecyle of a component?

Create, Render, Create and Render Children, Apply Update, Destroy

How do you respond to lifecycle events in Angular?

You can respond to events in the lifecycle of a component or directive by implementing one or more of the lifecycle hook interfaces in the Angular core library.

What do Angular's lifecycle hooks allow you to do?

The hooks give you the opportunity to act on a component or directive instance at the appropriate moment, as Angular creates, updates, or destroys that instance.

What are the lifecycle hooks available in Angular?

ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy

When does ngOnChanges fire?

Called before ngOnInit() and whenever one or more data-bound input properties change.

What is ngOnChanges' purpose?

Respond when Angular sets or resets data-bound input properties. The method receives a SimpleChanges object of current and previous property values. (happens very frequently though so will impact performance)

When does the ngOnInit fire?

After the first ngOnChanges.

What is ngOnInit's purpose?

Initialize the directive or component after Angular first displays the data-bound properties and sets the directive or component's input properties.

When does the ngDoCheck fire?

It's based on the developer's custom change detection.

What is the purpose of the ngDoCheck()?

Detect and act upon changes that Angular can't or won't detect on its own. This hook is called with enormous frequency—after every change detection cycle no matter where the change occurred. Can seriously impact user experience

What is the purpose of the ngOnDestroy() lifecycle hook?

Put cleanup logic in ngOnDestroy(), the logic that must run before Angular destroys the directive. This is the place to free resources that won't be garbage-collected automatically. You risk memory leaks if you neglect to do so.

The ngOnDestroy() method is also the time to notify another part of the application that the component is going away.

What are three ways to free resources in the ngOnDestroy() method?

Unsubscribe from Observables and DOM events.

Stop interval timers.

Unregister all callbacks that the directive registered with global or application services.

When does the ngAfterContentInit fire?

After component content initialized.

When does the ngAfterContentChecked fire?

After every check of component content.

True or False: Angular will call ngOnInit( ) multiple times.

False: It only calls ngOnInit() once.

What is Inversion Of Control (IoC)?

When you give up control of a functionality to another entity.

True or false: You should fetch data in a component constructor

False: Perform complex initializations outside of the constructor and in the ngOnInit() hook method. Components should be cheap and safe to construct. You shouldn't worry that a new component will try to contact a remote server when created under test or before you decide to display it.

What is Dependency Injection (DI)?

DI is a SPECIFIC type of IoC. It's when you give up control of your dependencies to another entity.

How do you make a new angular project?

ng new [project-name]

How do you automatically generate a new component?

ng g c [path/componentname]

How do you automatically generate a new component into a specific path in your directory?

ng g c [path/componentname]

How do you automatically generate a new service?

ng g s [servicename]

How do you automatically generate a new service into a specific path in your directory?

ng g s [path/servicename]

What does SPA stand for?

Single Page application

What is an SPA, more specifically?

An application that is constructed using a single html page; "views" are changed using DOM manipulation as opposed to changing html pages. This speeds up your application's usage.

What is the component file naming convention?

customname.component.html customname.component.ts customname.component.css customname.component.spec.ts