NG-BOOK Flashcards
AngularJS
client-side technology, written entirely in JavaScript. a “structural framework for dynamic web apps.”
Dirty Checking
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.
Event Loop
???
$scope object
The $scope object is simply a JavaScript object whose properties are all available to the view and with which the controller can interact.
Best Data Binding Practices
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.
Module
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.
module setter method
angular.module(‘myApp’, []);
module getter method
angular.module(‘myApp’)
Scope
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.
$rootScope
The $rootScope is the eventual parent of all $scope objects.
$digest loop
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.
Controllers
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.
One major distinction between AngularJS and other JavaScript frameworks.
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.
Controller Hierarchy (Scopes Within Scopes)
With the exception of isolate scopes, all scopes are created with prototypal inheritance, meaning that they have access to their parent scopes.
Expressions
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.
$watch
$watch function will monitor a property on the $scope. When it changes in any way, it will call the corresponding function.
Filters
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 }}
Filter filter
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’ }} <!-- ["Lerner","Likes","Eat"] -->
Filter filter limitTo
{{ San Francisco is very cloudy | limitTo:3 }} <!-- San -->
novalidate flag
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.
Required
Minimum Length
To validate that a form input input is at least a certain {number} of characters, we add the AngularJS directive ng-minlength=”{number}”
Maximum Length
Matches a Pattern
To ensure that an input matches a regex, we can use ng-pattern=”/PATTERN/”:
To validate an email address in an input field, we simply set the input type to email, like so:
Number
To validate an input field has a number, we set the input type to number:
URL
To validate an input field has a number, we set the input type to number:
Control Variables in Forms
formName.inputFieldName.$pristine; formName.inputFieldName.$dirty; formName.inputFieldName.$valid; formName.inputFieldName.$invalid;
$error object
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
form classes
1 .ng-pristine {}
2 .ng-dirty {}
3 .ng-valid {}
4 .ng-invalid {}
HTML Document
An HTML document is a plain text document that contains structure and may be styled through CSS or manipulated with JavaScript.
HTML Node
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.
HTML Element
An element comprises an opening tag and a closing tag.
HTML Tag
An HTML tag is responsible for marking the beginning and end of an element. A tag itself is declared using angle brackets.
HTML Attributes
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.
Directives
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.
built-in-directives
A built-in directive is one that ships out of the box with Angular. All built-in directives are prefixed with the ng namespace.
directive format
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’ } });
Declaring Our Directive with an Expression
<!-- directive: my-directive someExpression -->
Isolate Scope
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.
ng-disabled
Use ng-disabled to bind the disabled attribute to form input fields. A Button
Basic ng Attribute directives
ng-href ng-src ng-disabled ng-checked ng-readonly ng-selected ng-class ng-style
ng-href
When dynamically creating a URL from a property on the current scope, always use ng-href instead of href.
ng-src
Angular will tell the browser to NOT fetch the image via the given URL until all expressions provided to ng-src have been interpolated.
ng-app
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.
ng-controller
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.
JavaScript objects are either copy by value or copy by reference.
String, Number, and Boolean are copy by value. Array, Object, and Function are copy by reference.
ng-include
Use ng-include to fetch, compile, and include an external HTML fragment into your current application.
ng-switch
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 }}
ng-view
The ng-view directive sets the view location in the HTML where the router will manage and place the view elements for different routes.
ng-if
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.
ng-repeat
Use ng-repeat to iterate over a collection and instantiate a new template for each item in the collection.
ng-bind
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:
ng-cloak
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 }}
ng-bind-template
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 }}”>
ng-model
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.
ng-show and ng-hide
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
ng-form
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.
ng-click
Use ng-click to specify a method or expression to run on the containing scope when the element is clicked.
ng-select
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.
ng-submit
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.
ng-class
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.
.directive() method
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)
factory_function
The factory function returns an object that defines how the directive behaves.
A JavaScript object is made up of keys and values.
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.
Restrict(string)
restrict is an optional argument. It is responsible for telling Angular in which format our directive will be declared in the DOM.
