General Flashcards
Four elements of an angular app
components, directives, routers, services
Which element of angular encapsulates the template, data and the behaviour of a view?
Component. A component can be thought of as a “view” component.
Suggest an advantage of angular components being decoupled from the DOM
An advantage of having components decoupled from the DOM is that they are unit testable.
Which element of angular is used to modify the DOM and extend the behaviour of DOM elements?
Directives.
What is a .js.map file for?
Maps the JS code to it’s corresponding TS code in debugging.
What did typescript namespaces used to be called?
Internal modules
In angular what is the equivalent of a java annotation or a c# attribute?
Decorator
Translate the following code to English
import {Component} from ‘angular2/core’
Import the Component decorator from the angular2/core module
What type of code element is a decorator
A function
Create an <li> that iterates through an array of courses</li>
<li>{{ course }}</li>
Is a component a service, template or directive?
Directive
declare a button with a click handler that adds a server
Add Server
Declare an input with a 2-way binding to a first name property.
Declare a stop button that is enabled when the running property is true.
Stop
What does an asterisk mean in Angular
An asterisk prefix denotes a structural directive.
What is a structural directive?
Structural directives change the DOM
Declare a paragraph that shows only when error is true.
<p>Whoops!</p>
What would the ngIf value be to show a template called whoops if ok = false <p>good</p>
“ok; else whoops”
Declare a local template containing the text “No server!” that can be referenced by noServer.
<p>No server!</p>
Contrast structural and attribute directives
Structural directives add and remove elements whereas attribute directives only change the element they are placed on.
How can you tell a directive is built-in?
Built-in directives are prefixed with ng.
What do the square brackets mean in the following:
<p></p>
The square brackets mean that the ngStyle is using dataBinding
What’s wrong with this? State two fixes.
<p></p>
The property background-color is not a valid java object property name. Fix 1: wrap background-color in single quotes. Fix 2: change background-color to backgroundColor (camel case).
In a sentence:
[ngClass]=”{online: serverStatus === ‘up’}”
if the component’s serverStatus property equals “up” add the class “online” to the element, otherwise remove it.
