NG-BOOK

Question 1

AngularJS

Answer 1

client-side technology, written entirely in JavaScript. a “structural framework for dynamic web apps.”

Question 2

Dirty Checking

Answer 2

is a relatively efficient approach to checking for changes on a model. Every time there could be a potential change, Angular will do a dirty check inside its event loop.

Question 3

Event Loop

Answer 3

???

Question 4

$scope object

Answer 4

The $scope object is simply a JavaScript object whose properties are all available to the view and with which the controller can interact.

Question 5

Best Data Binding Practices

Answer 5

it’s considered a best-practice in Angular to bind references in the views by an attribute on an object, rather than the raw object itself.

Question 6

Module

Answer 6

a module is the main way to define an AngularJS app. The module of an app is where we’ll contain all of our application code.

Question 7

module setter method

Answer 7

angular.module(‘myApp’, []);

Question 8

module getter method

Answer 8

angular.module(‘myApp’)

Question 9

Scope

Answer 9

Scopes serve as the glue between the controller and the view. Scopes are objects that contain functionality and data to use when rendering the view.

Question 10

$rootScope

Answer 10

The $rootScope is the eventual parent of all $scope objects.

Question 11

$digest loop

Answer 11

The loop is made up of two smaller loops which process $evalAsyncqueue and the $watch list. The $digest loop keeps iterating until the model stabilizes, which means that the $evalAsync queue is empty and the $watch list does not detect any changes.

Question 12

Controllers

Answer 12

The controller in AngularJS is a function that adds additional functionality to the scope of the view. We use it to set up an initial state and to add custom behavior to the scope object. When we create a new controller on a page, Angular passes it a new $scope.

Question 13

One major distinction between AngularJS and other JavaScript frameworks.

Answer 13

frameworks is that the controller is not the appropriate place to do any DOM manipulation or formatting, data manipulation, or state maintenance beyond holding the model data. It is simply the glue between the view and the $scope model.

Question 14

Controller Hierarchy (Scopes Within Scopes)

Answer 14

With the exception of isolate scopes, all scopes are created with prototypal inheritance, meaning that they have access to their parent scopes.

Question 15

Expressions

Answer 15

All expressions are executed in the context of the scope and have access to local $scope variables. An expression doesn’t throw errors if it results in a TypeError or a ReferenceError. They do not allow for any control flow functions (conditionals; e.g., if/else). They can accept a filter and/or filter chains.

Question 16

$watch

Answer 16

$watch function will monitor a property on the $scope. When it changes in any way, it will call the corresponding function.

Question 17

Filters

Answer 17

In AngularJS, a filter provides a way to format the data we display to the user. Angular gives us several built-in filters as well as an easy way to create our own. We invoke filters in our HTML with the | (pipe) character inside the template binding characters {{ }}. {{ 123.456789 | number:2 }}

Question 18

Filter filter

Answer 18

The filter filter selects a subset of items from an array of items and returns a new array. {{ [‘Ari’, ‘Lerner’, ‘Likes’, ‘To’, ‘Eat’, ‘Pizza’] | filter:’e’ }} <!-- [&quot;Lerner&quot;,&quot;Likes&quot;,&quot;Eat&quot;] -->

Question 19

Filter filter limitTo

Answer 19

{{ San Francisco is very cloudy | limitTo:3 }} <!-- San -->

Question 20

novalidate flag

Answer 20

It is usually a great idea to use the novalidate flag on the form element, as it prevents the browser from natively validating the form.

Question 21

Required

Question 22

Minimum Length

Answer 22

To validate that a form input input is at least a certain {number} of characters, we add the AngularJS directive ng-minlength=”{number}”

Question 23

Maximum Length

Question 24

Matches a Pattern

Answer 24

To ensure that an input matches a regex, we can use ng-pattern=”/PATTERN/”:

Question 25

Email

Answer 25

To validate an email address in an input field, we simply set the input type to email, like so:

Question 26

Number

Answer 26

To validate an input field has a number, we set the input type to number:

Question 27

URL

Answer 27

To validate an input field has a number, we set the input type to number:

Question 28

Control Variables in Forms

Answer 28

formName.inputFieldName.$pristine; formName.inputFieldName.$dirty; formName.inputFieldName.$valid; formName.inputFieldName.$invalid;

Question 29

$error object

Answer 29

This object contains all of the validations on a particular form and a record of whether they are valid or invalid. To get access to this property, use the following syntax: formName.inputfieldName.$error

Question 30

form classes

Answer 30

1 .ng-pristine {}

2 .ng-dirty {}

3 .ng-valid {}

4 .ng-invalid {}

Question 31

HTML Document

Answer 31

An HTML document is a plain text document that contains structure and may be styled through CSS or manipulated with JavaScript.

Question 32

HTML Node

Answer 32

An HTML node is an element or chunk of text nested inside another element. All elements are also nodes; however, a text node is not an element.

Question 33

HTML Element

Answer 33

An element comprises an opening tag and a closing tag.

Question 34

HTML Tag

Answer 34

An HTML tag is responsible for marking the beginning and end of an element. A tag itself is declared using angle brackets.

Question 35

HTML Attributes

Answer 35

To provide additional information about an element, HTML elements can contain attributes. These attributes are always set in the opening tag. We can set them in a key-value pair, like key=”value”, or as only a key.

Question 36

Directives

Answer 36

The simplest way to think about a directive is that it is simply a function that we run on a particular DOM element. A directive is defined using the .directive() method, one of the many methods available on our application’s Angular module.

Question 37

built-in-directives

Answer 37

A built-in directive is one that ships out of the box with Angular. All built-in directives are prefixed with the ng namespace.

Question 38

directive format

Answer 38

we declare the directive in HTML using my-directive, the directive definition must be myDirective. angular.module(‘myApp’, []) .directive(‘myDirective’, function() { return { restrict: ‘E’, template: ‘Click me to go to Google’ } });

Question 39

Declaring Our Directive with an Expression

Answer 39

<!-- directive: my-directive someExpression -->

Question 40

Isolate Scope

Answer 40

an isolate scope is completely separate from the current scope of the DOM. In order to set properties on this fresh object, we’ll need explicitly pass in data via attributes, similar to the way we pass arguments into a method in JavaScript or Ruby. The main use case for such directives is reusable widgets that can be shared and used in unexpected contexts without polluting the scope around them or having their internal scope corrupted inadvertently.

Question 41

ng-disabled

Answer 41

Use ng-disabled to bind the disabled attribute to form input fields. A Button

Question 42

Basic ng Attribute directives

Answer 42

ng-href ng-src ng-disabled ng-checked ng-readonly ng-selected ng-class ng-style

Question 43

ng-href

Answer 43

When dynamically creating a URL from a property on the current scope, always use ng-href instead of href.

Question 44

ng-src

Answer 44

Angular will tell the browser to NOT fetch the image via the given URL until all expressions provided to ng-src have been interpolated.

Question 45

ng-app

Answer 45

Placing ng-app on any DOM element marks that element as the beginning of the $rootScope. $rootScope is the beginning of the scope chain, and all directives nested under the ng-app in your HTML inherit from it.

Question 46

ng-controller

Answer 46

use ng-controller, which is a built-in directive whose purpose is to provide a child scopes for the directives that are nested inside. We’ll use this directive to place a controller on a DOM element. ng-controller takes a single argument.

Question 47

JavaScript objects are either copy by value or copy by reference.

Answer 47

String, Number, and Boolean are copy by value. Array, Object, and Function are copy by reference.

Question 48

ng-include

Answer 48

Use ng-include to fetch, compile, and include an external HTML fragment into your current application.

Question 49

ng-switch

Answer 49

We use this directive in conjunction with ng-switch-when and on=”propertyName” to switch which directives render in our view when the given propertyName changes.

And the winner is

{{ person.name }}

Question 50

ng-view

Answer 50

The ng-view directive sets the view location in the HTML where the router will manage and place the view elements for different routes.

Question 51

ng-if

Answer 51

Use ng-if to completely remove or recreate an element in the DOM based on an expression. ng-if differs from ng-show and ng-hide in that it actually removes and recreates DOM nodes, rather than just showing and hiding them via CSS.

Question 52

ng-repeat

Answer 52

Use ng-repeat to iterate over a collection and instantiate a new template for each item in the collection.

Question 53

ng-bind

Answer 53

Although we can use the {{ }} template syntax within our views (Angular interpolates these), we can mimic this behavior with the ng-bind directive. use ng-controller, which is a built-in directive whose purpose is to provide a child scopes for the directives that are nested inside. We’ll use this directive to place a controller on a DOM element. ng-controller takes a single argument:

Question 54

ng-cloak

Answer 54

An alternative to using the directive ng-bind to prevent a flash of unrendered content is to use ng-cloak on the element containing {{ }}:

{{ greeting }}

Question 55

ng-bind-template

Answer 55

Similar to the ng-bind directive, we can use the ng-bind-template directive if we want to bind multiple expressions to the view. ng-bind-template=”{{ message }} {{ name }}”>

Question 56

ng-model

Answer 56

The ng-model directive binds an input, select, textarea, or custom form control to a property on the surrounding scope. The bottom line is to always have a . in your ng-models.

Question 57

ng-show and ng-hide

Answer 57

ng-show and ng-hide show or hide the given HTML element based on the expression provided to the attribute.

2 + 2 isn’t 5, don’t show
2 + 2 isn’t 5, don’t hide

Question 58

ng-form

Answer 58

We use ng-form when we need to nest a form within another form. The normal HTML tag doesn’t allow us to nest our forms, but ng-form will.

Question 59

ng-click

Answer 59

Use ng-click to specify a method or expression to run on the containing scope when the element is clicked.

Question 60

ng-select

Answer 60

Use the ng-select directive to bind data to an HTML element. ng-options takes a comprehension expression for its attribute value, which is just a fancy way of saying it can take an array or an object and loop over its contents to provide the options available when using the select tag.

Question 61

ng-submit

Answer 61

We use ng-submit to bind an expression to an onsubmit event. This directive also prevents the default action (sending the request and reloading the page), but only if the form does not contain an action attribute.

Question 62

ng-class

Answer 62

Use ng-class to dynamically set the class of an element by binding an expression that represents all classes to be added. Duplicate classes will not be added.

Question 63

.directive() method

Answer 63

A directive is defined using the .directive() method, one of the many methods available on our application’s Angular module. angular.module(‘myApp’) .directive(‘myDirective’, function($timeout, UserDefinedService) { // directive definition goes here }) The directive() method takes two arguments: name(string) factory_function(function)

Question 64

factory_function

Answer 64

The factory function returns an object that defines how the directive behaves.

Question 65

A JavaScript object is made up of keys and values.

Answer 65

When the value for a given key is set to a string, boolean, number, array, or object, we call the key a property. When we set the key to a function, we call it a method.

Question 66

Restrict(string)

Answer 66

restrict is an optional argument. It is responsible for telling Angular in which format our directive will be declared in the DOM.