Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

JavaBatchReview > Angular and TypeScript > Flashcards

Angular and TypeScript Flashcards

1
Q

What is Typescript?

A
  • Typescript is a superset of javascript which primarily provides the option of static typing, classes, and interfaces.
  • Typescript is a transpiled language that is open source.
  • Typescript is compiled into javascript to be served on a webpage
  • Typescript adds a lot of benefits to what javascript is while still being familiar to javascript users
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Is Typescript Loosely or Strongly Typed?

A

Strongly typed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What does the “let” keyword mean?

A

Let is similar to var in some respects but let forces local scoping that var can cause problems with.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What does the Arrow Function (=>) do?

A
  • Defines a lambda function.
  • Don’t need to type “function”
  • Lexically captures the meaning of this.
  • Lexically captures the meaning of arguments.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Compiling vs Transpiling?

A
  • Compiling is when source code is converted into machine code.
  • Transpiling is a special kind of compiling where instead of being converted into machine code it’s compiled into another language.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is Angular?

A
  • Angular is a framework built on top of typescript using declarative templates, dependency injection, end to end tooling, and integrated best practices to speed up the development process.
  • Angular defines components and uses dependency injection to carry out DOM manipulation for you.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does it mean to be a Single Page Application

A
  • A single page application (SPA) is a web application or web site that interacts with the user dynamically by rewriting the current page rather than loading a whole new page from a server.
  • Interaction with the single page application often involves dynamic communication with the web server behind the scenes.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is a Webpack?

A

A Webpack is a module bundler. Takes care of bundling your application for deployment alongside a separate task runner

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is minification?

A
  • The process of removing unnecessary or redundant data without affecting how the resources is processed by the browser.
  • Example would be removing of white space, comments, unused code, shorter variable and function names and so on.
  • Used to compress source code files for deployment.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is a module?

A
  • 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.
  • Modules can be easily imported and exported for use.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What are components?

A
  • Components are the most basic building block of a UI in an angular application.
  • Everything in angular components and the application is represented as a tree of these components.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are decorators?

A
  • The whole purpose of the decorator is to store metadata about a class, method, or property.
  • The component decorator tells angular that a component is a component and then it knows what it needs to do with it.
  • It’s more of an identifier than anything which sounds simple but it’s very important so that angular can differentiate components and their purposes.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are some common decorators?

A 
@Component
@NgModule
@Input
@Output
@Inject
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is a directive?

A
  • Directives allow you to attach behavior to elements in the DOM.
  • Directives are identified with the @Directive decorator.
  • Directives must be present in the declarations field of your NgModule for it to be usable by another directive, component, or application.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is a Structural Directive?

A
  • Must be annotated with the @Directive decorator
  • Structural directives are responsible for HTML layout. - - They shape or reshape the DOM’s structure by adding, removing, or manipulating elements.
  • Structural directives are how Angular does DOM manipulation.
  • Actions of Structural directives also affect children elements.
  • Examples are:
    • NgIf
    • NgFor
    • NgSwitch
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is an Attribute Directive?

A
  • Attribute Directives change the appearance or behavior of a DOM element, component, or another directive.
  • Attribute directives are used as attributes of elements
  • Must be annotated with the @Directive decorator
  • A good example is the NgStyle directive which is built-in to angular.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is ngModel?

A
  • NgModel is an Angular Directive
  • Creates a FormControl instance from a domain model and binds it to a form control element.
  • The FormControl instance will track the value, user interaction, and validation status of the control and keep the view synced to the model.
  • Can be used by itself or as part of a larger form, if so it will also register itself with the form as a child control.
  • Often used to achieve two-way databinding.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is a Dependency Injection?

A

Dependency Injection is a form of Inversion of Control, where you give up control to an outside entity. The outside entity provides you the instance of the dependency that you need, so that you don’t worry about the implementation of your resource, but instead focus on the business logic you are constructing. Dependency Injection is beneficial because it keeps your classes loosely coupled and isolates test cases.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is Data Binding?

A

In angular 4 data binding is how data manipulation in an angular component or web-page is done

20
Q

What are the types of Data Bindings?

A

One-way

Two-way

21
Q

What is one-way data binding?

A
  • When properties of the model get updated so does the UI or the opposite not both.
  • Can flow two ways from html doc to scripts or from scripts to html doc.
  • Doc to scripts
    • When the user changes a field on an webpage you can capture it quickly and easily with a one way data binding done in angular 4 with [ name ].
  • Scripts to doc
    • When you want to display the value of a variable in your script in the html doc but but the values is calculated or volatile meaning there’s no guarantee you know what it is you could use a one way data binding from the script to the page.
    • This is done using interpolation represented by {{ varname }}.
22
Q

What is two-way data binding?

A
  • Means that when properties of the model get updated, so does the UI and the reverse is true.
  • This is done in angular using the ngModel directive
23
Q

How do you make a class a component?

A

Simply specify that a class is a component by annotating it with the @Component decorator.

24
Q

How do you make asynchronous calls using Angular?

A
  • Using a service with a predefined function that is returning an observable or a promise.
  • Make the call to the service and subscribe to it with the subscribe method.
  • Inside the subscribe method define a callback to execute when the service call is resolved and inside that store it in a variable or do any manipulation
25
Q

What is a Pipe?

A

A pipe takes in data as input, does some transformations, returns some output

26
Q

What is a Service?

A
  • Services are angular’s way of fetching/storing data.
  • Angular has services so that components don’t have to both fetch data and display/present it in the view.
  • Reduces code bloat.
  • Increases modularity.
  • Can use the same service in multiple components or applications.
27
Q

What is Function Binding?

A
  • Binding the function is a way of setting a function context.
  • .bind() when you want that function to later be called with a certain context, useful in events.
  • Use .call() or .apply() when you want to invoke the function immediately, and modify the context.
  • Call/apply call the function immediately, whereas bind returns a function that when later executed will have the correct context set for calling the original function. This way you can maintain context in async callbacks, and events.
  • The first argument in the bind method is the method that will be bound to this
28
Q

What is Interpolation?

A
  • The populating of a placeholder with values from a string or variable to be viewed by the user.
  • Done with {{ varname }}
29
Q

What is an Observable?

A
  • A collection that arrives over time.

- Often used to handle async data requests

30
Q

What is a Provider?

A
  • A provider is an object or class that provides a component with data.
  • In short terms it is a service that is registered to a component or module.
  • A field or attribute in component or module decorators that tell angular what services to inject into the component
31
Q

What is an Injectable?

A
  • A Decorator that tells angular that the class is available to the Injector for creation.
  • Objects that are injectable can be created and injected into a component or service.
32
Q

What is Routing?

A

Routing is the ability to send users from one page in an application to another page in the application and back.

33
Q

What is the lifecycle of a component?

A
  • The lifecycle of a component is managed by angular itself, creation, rendering, data-bound properties, and it has hooks for you to allow you to respond to these events
  • The most used is probably ngOnInit which is generated for every component when using ng g c.
34
Q

What are the Lifecycle Hooks?

A
  • ngOnChanges - called when an input binding value changes
  • ngOnInit - after the first ngOnChanges
  • ngDoCheck - after every run of change detection
  • ngAfterContentInit - after component content initialized
  • ngAfterContentChecked - after every check of component content
  • ngAfterViewInit - after component’s view(s) are initialized
  • ngAfterViewChecked - after every check of a component’s view(s)
  • ngOnDestroy - just before the component is destroyed
35
Q

What is CLI?

A
  • CLI stands for Command Line Interface.
  • Set of commands that you can run on the command line
  • The Angular CLI is used for constructing the scaffolds of apps and components from the command line.
36
Q

What is NPM?

A
  • NPM is the Node Package Manager
  • Npm is a package manager used for web technologies
  • Npm has a software registry with a bunch of packages (modules)
  • Used to share reusable code and keep it up to date.
  • Npm could refer to a couple of things, the website, the registry, or the client CLI.
37
Q

What are Event Emitters?

A
  • EventEmitter is a class in angular that’s used by directives and components to emit custom events.
  • Event emitters are defined as output events which is where you can create them and you can reference those events in the component and specify what they emit.
38
Q

What is bootstrapping?

A
  • Bootstrapping is the creation of specified components when the app is loaded and the addition of those components to the browser DOM.
  • Components to be bootstrapped are specified by listing them in the NgModule’s bootstrap array.
39
Q

What are the data types in Typescript?

A 
Boolean
String
Number
Array
Enum
Any
Void
40
Q

CLI commands to generate components and services

A
  • Ng g c component-name - generates a component.

- Ng g service service-name - generates a service.

41
Q

What is a template?

A
  • A template is a scaffold for how something is supposed to look or act.
  • In angular you can define HTML templates for the applications components, you can define template contexts in interpolation expressions and many other things.
  • You can load the templates into the application using the ng-template tag.
42
Q

Explain the Http module.

A
  • The Http Module is deprecated and it’s now common practice to use the HttpClient Module instead.
  • The HttpClient module is used to send Http requests and receive responses.
  • It’s set up by injecting it into the component meant to use it, done by placing a private variable in the constructor.
  • You can reference the http variable to send http request and return observables and promises.
43
Q

How do I include a Module into my application?

A
  • Import the module in your app module using import { modulename } ‘module path’;
  • Then list it as an import in the imports array of the NgModule
  • After that you can inject it where you need it when/if necessary.
44
Q

Which are the subtypes of Data Binding?

A
  • Interpolation - property name is enclosed in double curly braces {{ propertyName }}.
  • Property
    • Used to bind values of component/model properties to the HTML element
      might change the behavior of the element depending on values
    • [property]=”expression”.
  • Attribute
    • set the values of an attribute directly, must only be used when the element doesn’t have the property itself.
    • Done in a way similar to property binding but using an attribute prefix
    • [ attr.attr-name ] = ‘expression’
  • Class
    • add and remove CSS class names from HTML elements
    • Similar to attribute binding but starts with the class prefix not the attribute prefix
    • [class.Class-Name]=’expression’
  • Style
    • Used to set inline styles to the HTML element
    • Style itself adds only a single line to the inline style
    • To add multiple styles with angular you can use the NgStyle directive.
45
Q

How do I bundle my Angular application?

A
  • Ng build command for the cli will bundle the application into a dist/ folder
  • Specifying a production built with –prod will be more optimized for user interaction
  • Not specifying production will not be optimized but it will be enough to pass around the development team

JavaBatchReview (13 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions