Section 1
Preview this deck
ng-class-even
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (215)
Section 1
(50 cards)
ng-class-even
Same as ng-class, but will only take effect on even rows.
ng-csp
Changes the content security policy.
How event binding works?
Event binding allows us to listen any DOM event and call a component method when it's triggered. To capture an event from our template, we wrap the name of the event we want to listen to in a parentheses and specify the method to call. Any event can be listened without the "on": mouseover, blur, submit. (click)="doThis($event)" // event object can be accessed
ng-copy
Specifies a behavior on copy events.
ng-hide
Hides or shows HTML elements.
How to add html and css to our Component from a template?
On Component add attributes: TemplateUrl: '...' and styleUrls: ['...'] with path to the template files.
ng-bind-template
Specifies that the text content should be replaced with a template. Unlike the ng-bind, this can take multiple {{}} elements. (ng-bind just takes the string itself)
Why is it good that the css is scoped to the Component?
Adds a custom attribute to the html and css too. If we would reuse this class ".description" on an other component they wouldn't clash, they all scoped to the directive.
ng-checked
Specifies if an element is checked or not.
ng-jq
Specifies that the application must use a library, like jQuery.
How to import Class B to an other file?
In order for Class B to be imported into another file, Class B needs to use the export keyword.
What is SystemJs used for?
Is a JS library that allows us to import other libraries.
ng-form
Specifies an HTML form to inherit controls from.
What is the decorator function?
Adds more behavior to our class from outside of our class. If must be declared immediately before the class. The decorator turns our old JS class into a component. import { bootstrap } from '@angular/platform-browser-dynamic'; import { Component } from '@angular/core'; //COMPONENT TOP @Component({//apply our comp. decorator to our class selector: 'my-app', // custom html selector where we want our component to load template: '<h1>...</h1>' // content }) //COMPONENT BOTTOM class AppComponent { } bootstrap(AppComponent) // instantiate app
ng-disabled
Specifies if an element is disabled or not.
ng-cut
Specifies a behavior on cut events.
How class property binging works?
Class binding allows us to specify a CSS class to a DOM element if a component property is true. [class.featured]="part.featured" If the value is true the class added, otherwise it's removed. Note that the html element and the class are properly scoped. If you bind directly to the class element property, it will overwrite all classes. [class]="property"// not a good practice
ng-include
Includes HTML in an application.
What are the ways to access latest version of JS ES6?
- Babel (transpile: it gets changed into JavaScript) - TypeScript (superset of js transpile)
What is two-way binding? How to bind data both ways?
Two-way binding means that if the component property is modified inside the component (JavaScript) or inside our web page (HTML), it will stay in sync. 1: Bind the input value to a property. We need to listen for the input event on our input box. <input type="text" [value]="part.qty" (input)="part.qty =$event.target.value" 2: Using [(ngModel)] allows us to have one command to express two-way data binding. You can only use it for data bound properties, like form fields. It won't work if you use it for a method. <input type="text" [(ngModel)]="part.qty">
ng-keypress
Specifies a behavior on keypress events.
That is the import and what bootstrap function used for?
import { bootstrap } from '@angular/platform-browser-dynamic'; Import: ES2015 feature (imports fn, obj, primitives) bootstrap: Instantiates Angular 2 app.
ng-blur
Specifies a behavior on blur events.
ng-href
Specifies a url for the <a> element.
ng-controller
Defines the controller object for an application.
How to format screen data?
Use pipe: Takes in data as input and transforms it to a desired output. (lowercase, date, number, decimal, replace, slice, json) You can create your custom pipes.
ng-focus
Specifies a behavior on focus events.
What are the difference between Angular 1 and Angular 2?
- Speed - Components vs controllers and scope - Simpler directives - Intuitive data binding - Services are now just a class
ng-class-odd
Same as ng-class, but will only take effect on odd rows.
ng-cloak
Prevents flickering when your application is being loaded.
ng-app
Defines the root element of an application.
ng-keyup
Specifies a behavior on keyup events.
ng-init
Defines initial values for an application.
ng-if
Removes the HTML element if a condition is false.
What is Component?
Basic building blocks, controls a portion of the screen. It's a directive with a template. Easily nest one inside the other. In Angular, we add dynamic behavior to HTML using directives.
ng-bind-html
Binds the innerHTML of an HTML element to application data, and also removes dangerous code from the HTML string.
How property binging works?
Property binding allows us to glue component properties to any DOM element properties. [src]='part.image' The square brackets tell Angular to set this DOM element property to our component property. If the component property changes, update this DOM. (one-way binding)
What services are used for?
To organize and share code across your app, and where we create our data access methods. http calls
ng-click
Specifies an expression to evaluate when an element is being clicked.
What is the observable in http calls?
Our http calls return an observable, not a promise, which behaves more like an array.
ng-keydown
Specifies a behavior on keydown events.
ng-class
Specifies CSS classes on HTML elements.
ng-bind
Binds the content of an HTML element to application data. Pretty much the same as {{}} (curly markup -- which is generally preferable because it is less verbose) but can be useful if template is displayed in it's raw state before angular compiles -- because ng-bind is an attribute, it makes bindings invisible to the user while the page is loading.
ng-dblclick
Specifies a behavior on double-click events.
What is dependency injection? How to use it?
We use dependency injection to create and send services to the classes that need them. @Injectable() We give our dependency injector providers so that it knows what classes it can create and send for us. We ask for dependencies by specifying them in our class constructor.
What is ngOnInit function?
ngOnInit is invoked after the component is constructed and is the best place to initialize property values. Easier to test.
Why is good to build a model for our up? How to build a model in TypeScript?
TypeScript helps to be more object oriented with our data, can use classes to model our data. Can specify class property types. This will allow our compiler to check our code and ensure we're getting and setting things properly. If we use the wrong property names compiler would throw an error. - Create a new file - Create a JS class with export(so it can be imported) - Add your data properties and declare a type for each - Import your model to your component file - Use your model Class name with []: Tells the type Script to treat this like an array of CarParts. * Good practice to keep mock data separate from your model and your components, in it's own file.
What are the 3 different kinds of directives?
Directive: how we add dynamic behavior to HTML - Component directive: has a template - Structural directive: Alters layout by adding, removing or replacing HTML elements. ngFor, ngIf - Attribute directive
ng-change
Specifies an expression to evaluate when content is being changed by the user.
ng-list
Converts text into a list (array).
Section 2
(50 cards)
ng-non-bindable
Specifies that no data binding can happen in this element, or its children.
select
AngularJS modifies the <select> element's default behaviors.
ng-show
Shows or hides HTML elements.
$error
a
AngularJS modifies the <a> element's default behaviors.
ng-selected
Specifies the selected attribute of an element.
limitTo
Limits an array, or a string, into a specified number of elements/characters.
ng-model
Binds the value of HTML controls to application data.
ng-readonly
Specifies the readonly attribute of an element.
ng-mousemove
Specifies a behavior on mousemove events.
ng-repeat
Defines a template for each data in a collection.
ng-srcset
Specifies the srcset attribute for the <img> element.
ng-paste
Specifies a behavior on paste events.
$invalid
currency
Format a number to a currency format.
ng-src
Specifies the src attribute for the <img> element.
script
AngularJS modifies the <script> element's default behaviors.
angular.isArray()
Returns true if the reference is an array
ng-minlength
Specifies the minimum number of characters allowed in the input field.
input
AngularJS modifies the <input> element's default behaviors.
angular.lowercase()
Converts a string to lowercase
ng-transclude
Specifies a point to insert transcluded elements.
angular.uppercase()
Converts a string to uppercase
$dirty
ng-maxlength
Specifies the maximum number of characters allowed in the input field.
angular.forEach()
Executes a function for each element in an object or array
date
Format a date to a specified format.
ng-mouseup
Specifies a behavior on mouseup events.
ng-open
Specifies the open attribute of an element.
angular.copy()
Creates a deep copy of an object or an array
ng-options
Specifies <options> in a <select> list.
ng-model-options
Specifies how updates in the model are done.
uppercase
Format a string to upper case.
filter
Select a subset of items from an array.
ng-mousedown
Specifies a behavior on mousedown events.
ng-mouseenter
Specifies a behavior on mouseenter events.
number
Format a number to a string.
form
AngularJS modifies the <form> element's default behaviors.
lowercase
Format a string to lower case.
ng-switch
Specifies a condition that will be used to show/hide child elements.
ng-style
Specifies the style attribute for an element.
orderBy
Orders an array by an expression.
ng-submit
Specifies expressions to run on onsubmit events.
json
Format an object to a JSON string.
ng-mouseover
Specifies a behavior on mouseover events.
textarea
AngularJS modifies the <textarea> element's default behaviors.
ng-value
Specifies the value of an input element.
ng-pluralize
Specifies a message to display according to en-us localization rules.
ng-required
Specifies the required attribute of an element.
ng-mouseleave
Specifies a behavior on mouseleave events.
Section 3
(50 cards)
The $scope object is the _____ model in Angular
data
angular.isNumber()
Returns true if the reference is a number
angular.bootstrap()
Starts AngularJS manually
_____ are the properties of a scope
Models
It is ideal to contain the logic in a _____ and the data on the _____ of the controller
1) controller 2) scope
The '.module("appName")' method is also called the _____ method for the Angular module since it is how we reference a module
getter
_____ are attributes or elements that augment a DOM element into a reusable DOM component
Directives
$sanitize
service that parses the html into tokens and removes potentially dangerous ones ()
Scopes provide the ability to _____ for model changes
watch
angular.isUndefined()
Returns true if the reference is undefined
The scopes of the application refer to the application _____.
model
_____s are attached to the DOM where _____ properties are accessed through bindings
Scope
What is the event loop called?
$digest() loop
angular.isFunction()
Returns true if the reference is a function
angular.toJSON()
Serializes a JSON string
The _____ object is the closest object to the global context in an Angular app and is considered to be the parent of all $scope objects
$rootScope
angular.isDefined()
Returns true if the reference is defined
The '.module("appName", [])' method is also called the _____ method for the Angular module since it is how we define a module
setter
What Angular object interacts with the controller and whose properties are available to the view?
The model object: $scope
angular.isDate()
Returns true if the reference is a date
_____ format functions available in the view
Filters
When a value has changed since the last time the event loop ran, the value is considered to be _____.
Dirty
What symbol is used to denote internals and other built-in library functions in Angular?
$ (dollar sign)
_____ _____ are what binds expressions to the view in the form of {{ }}
Value bindings
angular.equals()
Returns true if two references are equal
List in order of execution: A) View template links to scope B) App renders the view C) App sets up DOM to notify Angular of property changes
A > C > B
Describe what "$timeout" does
It is an Angular service that is a function with two arguments: 1) A function to be called and 2) Amount of milliseconds to wait before calling the function (Argument 1) again
What are the arguments of the "controller()" method?
1) String: name of the controller (Required) 2) Function: logic of the controller (Required)
The second argument of '.module()' is an array of strings listing modules that the _____ loads _____ the module itself is loaded
1) injector 2) before
The template (HTML w/data bindings) is rendered into the _____.
View
The $scope object is a connection between the _____ and the _____ and the glue between the _____ and the _____
1) view 2) HTML 3) view 4) controller
All _____ found on the $scope object are automatically accessible to the view
properties
The _____ presents data to the user. The _____ consists of application data and functions that interact with that data. The _____ mediates between the two.
1) View 2) Model 3) Controller (MVC framework)
angular.isString()
Returns true if the reference is a string
_____ _____ validate user input
Form controls
angular.fromJSON()
Deserializes a JSON string
What are two things we need to nest an Angular app inside of a web app?
1) angular.js file 2) Set ng-app attribute/directive on an element in the DOM
angular.isElement()
Returns true if the reference is a DOM element
In the context of data binding, it is considered a best-practice in Angular to bind references in the _____ by a(n) _____ on an object, rather than the raw object itself
1) views 2) attribute
What are four reasons why we use scope?
1) Watch for model changes 2) Propagate model changes through the app and other components 3) Nested for isolated functionality and model properties 4) Provide an environment to evaluate expressions
What are the arguments of the "module()" method?
1) String: name of the module (Required) 2) Array: if specified, will create a new module. If not specified, will look for the named module (Optional) 3) Function: logic for module configuration (Optional)
angular.element()
Wraps an HTML element as an jQuery element
What are four advantages to using modules?
1) Keeps the global scope clean 2) Makes tests cleaner and easier to write 3) Easier to share code between applications 4) Can load different portions of code at any time
Which directive specifies a _____ class that injects functions and values into the scope of a DOM element?
ng-controller "Controller"
Describe what it means for something to be "Bi-directional" in Angular
Bi-directional means that if the view changes the value, the model observes the change through dirty checking, and if the model changes the value, the view updates with the change
angular.isObject()
Returns true if the reference is an object
Which directive binds an input, select, textarea, or custom form control to a property on the scope using NgModelController? (Binds the view to the model)
ng-model
angular.module()
Creates, registers, or retrieves an AngularJS module
The process of checking for values that have changed since the last event loop is called _____.
Dirty checking
The _____ object is where we define the business functionality of the application, the methods in our controllers, and properties in the views
$scope
Section 4
(50 cards)
What is ng-app and how does Angular bootstrap?
What is the difference between `angular.module("app", [])` and `angular.module("app")`?
Explain what is services in Angular.js ?
In angular.js services are the singleton objects or functions that are used for carrying out specific tasks. Often related to business logic.
ng-repeat
Repeats for every entity in the controller's loop
controller
A Javascript object that controls the data and, I guess, the app itself
Explain what are directives ? Mention some of the most commonly used directives in Angular.js application ?
directive is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior.
dependencies
Split up modules according to functionality
If Angular cannot find a property within the local scope, it will go up a scope until it reaches the $rootScope. What happens if the property is not found in the $rootScope?
It moves on and will not update the view
ng-hide
Hides the element if true
When would you use $q.all()?
directives best practices
Use element directives for UI widgets Use attribute directives for mixin behaviors (stuff that affects behavior of HTML elements) such as a tooltip
directive
Basically an HTML attribute that controls the functionality of the HTML element
custom directive
Custom HTML tags basically, but can do many more things
How would you filter a list via ng-repeat?
Where would you make your network calls (Network calls = $http): 1) controller 2) template 3) directive 4) or service Why?
ng-show
Shows the element if true
What other frameworks use dependency injection?
React, Ember, ...
What are: 1) $index 2) $even 3) $odd 4) $first 5) $last
When would you use: 1) factory 2) provider 3) service 4) value 5) constant
Explain what are the key features of Angular.js ?
- Two way data binding - Scope - MVC
How would you inject services and what are the different ways to do so?
filter
Does something to the input (data is usually piped into the filter), e.g. {{ data | filter:options }}
What are promises and how would you use them?
Explain what is scope in Angular.js ?
Scope refers to the application model, it acts like glue between application controller and the view. It can watch expressions and propagate events.
filter - limitTo
Exactly what you think it does.
What phases are there in Angular?
Config --> Bootstrap --> Run
ng-app
Specifies what Angular app the HTML contained within will function under
How do you ensure Angular uses jQuery when using both?
A scope created inside of a directive is called the _____ scope
isolate
$ - sign
Indicates something is a built-in in Angular
What is the difference between ng-if and ng-show?
What is 2 way binding?
What is dependency injection?
What is MVVM architecture?
What are filters?
ng-include
Used for including HTML templates (these incur an AJAX request after the initial page loads)
Why would you use ng-submit instead of ng-click?
What is ng-repeat?
What's jqLite?
Why would you use: 1) ng-src 2) ng-bind 3) ng-cloak
What is the difference between: 1) factory 2) provider 3) service 4) value 5) constant
Explain what is Angular Expression? Explain what is key difference between angular expressions and JavaScript expressions?
Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as {{ expression }} The context is the scope object.
name-changing
<product-title> tag in HTML will translate into productTitle in app.direct(...)
dependency injection
Injecting the services that a controller needs as arguments to the controller function
What is $http?
ng-src
Use this to specify the source of the image.
2-way data binding
Expressions re-evaluated when property changes
filter - orderBy
Takes in an attribute of the entity and whether ascending or descending
The _____ and _____ directives create their own child scopes and attach them to the DOM element
1) ng-controller 2) ng-repeat
Why would you use: 1) .config() phase 2) .run() phase
Section 5
(15 cards)