Week 8 Angular Study Guide

Question 1

What is a framework?

Answer 1

A framework is a platform for developing software applications. It provides a foundation on which software developers can build programs for a specific platform. A framework may also include code libraries, a compiler, and other programs used in the software development process.

Question 2

What is Angular?

Answer 2

It is an open-source TypScript-based frontend framework developed by Google (in 2010).

It uses a component structure that represents a view on a webpage

We use Angular to create SPA’s (Single Page Applications)
- SPA’s allow for faster and more responsive web pages and a better user-experience

Question 3

What makes and Angular app?

Answer 3

TypeScript framework developed and maintained by Google.

Reusbale code through the inclusion of modules

Dynamics views through the usage of components and templates

DOM manipulation is handled through Directives

Single-page applications are created through the use of Routing

Handle Dependency Injection through the use of Services

Question 4

What is TypeScript?

Answer 4

it is open-source and invented & maintained by Microsoft

it is a super-set of JS

it is strictly typed

Browsers themselves cannot interpret TS, so it must be transpiled into JS.

It has syntax closer to higher level languages like Java, and a compiler, therfore it gives us compilation errors.

Question 5

What is Node JS?

Answer 5

It is a JS interpreter/server environment that allows us to run JS outside of the browser.

Question 6

What is NPM? What does it stand for?

Answer 6

NPM = Node Package Manager

It is included in the download of Node.js and consists of a CLI (Command Line Interface) that interacts with a remote registry

Similar to maven, it can manage dependencies and versions
- This is done through the package.json file (which acts like the pom.xml).

Question 7

What is Angular CLI?

Answer 7

Angular CLI (Command Line Interface) is the CLI that is used to scaffold and build the Angular Project using module.

Question 8

What is the Angular command for the CLI?

Answer 8

ng is the Angular command for the CLI

Question 9

How do you install Angular?

Answer 9

to install Angualar, we call npm install -g @angular/cli

Question 10

What is Webpack? What does it do?

Answer 10

The angular CLI uses a tool called webpack which is a build automation tool.

it minifies all of our JS scripts, HTML and CSS files and bundles them together

The webpack traverses our application looking for import statements and builds a dependency graph

Question 11

What can you compare package.json to? Where is it stored? What is it for?

Answer 11

Think of the pom.xml file within your Angular project

The package.json file is stored in the root of your application

This file is used to give information to npm (node package manager) and identify all the project's dependencies and handle them.

Question 12

What are Angular components?

Answer 12

Components are the most basic block of an Angular app. An Angular App contains a tree of Angular Components

Question 13

What is the full structure of a component?

Answer 13

mycmp.component.css – the component’s private styling sheet

mycmp.component.html -- HTML Template

mycmp.component.ts -- Here we define the module, its properties, lifehooks, etc.

mycmp.component.spec.ts -- unit testing file

Question 14

How do you create a component?

Answer 14

To create a component run: ng g c mycomponent

Question 15

Where are changes added to after creating a component? What method is created?

Answer 15

As soon as we create a component, all changes are added to our app.module.ts file

As soon as the component is created, ngOnInit method is created
- this method is called by default when the class is executed.

It also has a constructor

the app component is the Parent component and any new components that we create and the Child components

Question 16

What is Data-Binding?

Answer 16

Data binding is a technique to link your data to your view layer.

By binding a variable, you are telling the framework (in this case, Angular) to watch it for changes.
- If changes are detected, the framework will update the view.

Question 17

What are the types of Data-Binding?

Answer 17

One-Way Binding

Two-Way Data Binding

Question 18

Explain One-Way Binding.

Answer 18

One-way binding will bind the data from the component to the view (DOM) or from the view to the component.

This is unidirectional (we change one thing)

For example: Interpolation -> Interpolation refers to binding expressiong into marked up language (we turned the property of the app component into HTML text (as the title like so {{title}})

Interpolation allows you to incorporate properties and embed them into an HTML file with {{}};

Question 19

What is Class Binding?

Answer 19

Class binding is used to set a class property of a view element. It is a type of One-Way Binding.

Question 20

Explain Two-Way Binding.

Answer 20

2-way data binding in Angular will help users to exchange data from the component to view, and from view to component (bidirectional)

2-way databinding is a combo of Property Binding and Event Binding

2-way binding can be achieved with the [(ngModel)] directive...think banana in a box!

Question 21

What are Directives?

Answer 21

Directives change the appearence behavior or layout of the DOM (Document Object Model)

Question 22

What do Structural Directive do?

Answer 22

These change the DOM layout by adding/removing DOM elements

ngFor and ngIf

Question 23

What do Attribute Directives do?

Answer 23

These change the appearence or behavior of a particular element, component, or another directive.

We typically build these ourselves

Example:
The @Input directive is an example of and Attribute Directive.

Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template

Question 24

What are two types of @Decorators? What do they do?

Answer 24

The @Component decorator tells Angular that we want a class to be treated as a component
- It provides the metadata for how this particular Component Class should be processed, used, and instantiated.

The @NgModule decorator takes a metadata object that describes how to compile a component’s template and how to create an injector at runtime.
- An NgModule is a class marked by the @NgModule decorator.

Question 25

What does an Angular Module Class do?

Answer 25

An Angular module class describes how the application parts fit together. Every application has at least one Angular module, the root module that you bootstrap to launch the application. You can call it anything you want. The conventional name is AppModule.

Question 26

What does the @NgModule decorator do?

Answer 26

The @NgModule decorator identifies AppModule as an Angular module class (also called an NgModule class).

@NgModule takes a metadata object that tells Angular how to compile and launch the application.
- imports — the BrowserModule that this and every application needs to run in a browser.
- declarations — the application’s lone component, which is also …
- bootstrap — the root component that Angular creates and inserts into the index.html host web page.

Question 27

What is Dependency Injection?

Answer 27

Dependency injection is a technique in which an object receives other objects that it depends on. These other objects are called dependencies.

The "injection" refers to the passing of a dependency (a service) into the object that would use it.

Dependencies are services or objects that a class needs to perform its function.

Question 28

What are Angular Services?

Answer 28

Angular services are singleton objects that get instantiated only once during the lifetime of an application.

-Services are a great way to share information among classes that don’t know each other.

-Services can depend on other services.

-The @Injectible decorator defines this as a provider, and its metadata specifies that it will be provided at the root level.

Question 29

What do Observables do?

Answer 29

Observables provide support for passing messages between parts of your application. They are used frequently in Angular and are the recommended technique for event handling, asynchronous programming, and handling multiple values.

Question 30

What is the Observable Pattern?

Answer 30

The Observer Pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of state changes. - This pattern is similar (but not identical) to the publish/subscribe design pattern.

Question 31

What does the Angular Router do? How can it affect a Single Page application?

Answer 31

The Angular Router handles navigation from one view to the next - Router enables navigation by interpreting a browser URL as in instruction to change the view.

In a Single Page Application, we change what the user sees by showing or hiding portions of the display which corresponds to particular components…instead of reaching out to a server to get a new page.