$ Scope Commands

$rootScope – angularjs docs

$scope.$watch – angularjs docs

$scope.$broadcast – angularjs docs

$scope.$on – angularjs docs

this vs $scope – chevtek.io

ng-repeat

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Special properties are exposed on the local scope of each template instance, including:

Variable	Type	Details
$index	number	iterator offset of the repeated element (0..length-1)
$first	boolean	true if the repeated element is first in the iterator.
$middle	boolean	true if the repeated element is between the first and last in the iterator.
$last	boolean	true if the repeated element is last in the iterator.
$even	boolean	true if the iterator position $index is even (otherwise false).
$odd	boolean	true if the iterator position $index is odd (otherwise false).

… full article

Filters

AngularJS provides filters to transform data:

• currency Format a number to a currency format.
• date Format a date to a specified format.
• filter Select a subset of items from an array.
• json Format an object to a JSON string.
• limitTo Limits an array/string, into a specified number of elements/characters.
• lowercase Format a string to lower case.
• number Format a number to a string.
• orderBy Orders an array by an expression.
• uppercase Format a string to upper case.

… full article

More topics covered:

• storing commands in Map
• ng-model for <select … >
• as keyword
• parent + child scope
• ng-repeat sortBy, filter

Links:

• Class code: parent child this
• Class code: $watch
• Class code: $broadcast $on
• Class code: ng-repeat
• Class code: ng-repeat + ajax
• Class code: calculator ex
• Lesson Summary Video!

JavaScript – more features

• Promise – MDN link
• JQuery promise deferrd – MDN link
• Promise – es6-features.org
• Promise.all – es6-features.org
• function* – MDN link

ng-class

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

The directive operates in three different ways, depending on which of three types the expression evaluates to:

1. If the expression evaluates to a string, the string should be one or more space-delimited class names.
2. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
3. If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.

The directive won’t add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then are the new classes added … full article

ng-model

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

ngModel is responsible for:

• Binding the view into the model, which other directives such as input, textarea or select require.
• Providing validation behavior (i.e. required, number, email, url).
• Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
• Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) including animations.
• Registering the control with its parent form.

Note: ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn’t already exist on this scope, it will be created implicitly and added to the scope … full article

More topics covered:

• IEnumerable
• iterators and generators
• JQuery – fail vs catch
• promise – resolve and reject
• promise return –> then
• creating our own promises
• angular drop-down ng-model
• angular checkbox ng-model

Links:

• Class code: 17.08.2020 code
• Class code: promise
• Class code: iterators
• Class code: ng-class
• Class code: ng-model
• Lesson Summary Video!

JavaScript – more features

• Arrow functions – MDN link
• Lexical this – tutorials point
• array: map, filter, find, every, some – poka
• array reduce – MDN link
• set – MDN link
• map – key, value – MDN link
• class, inheritance, getter setter – MDN link

Angular features

• angular.module – bootstrap
• controllers- angular docs
• $scope – angular docs
• ng-controller in HTML

Dependency Injection

Dependency Injection is a software design in which components are given their dependencies instead of hard coding them within the component. It relieves a component from locating the dependency and makes dependencies configurable. It also helps in making components reusable, maintainable and testable.
AngularJS provides a supreme Dependency Injection mechanism. It provides following core components which can be injected into each other as dependencies: Value, Factory, Service, Provider, Constant … full article

More topics covered:

• angular bootstrap file
• angular controller instances
• $scope data + functions

Links:

• Class code: more js
• Class code: AngularJS controllers
• Lesson Summary Video!

AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications (SPA). It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment.

directives: ng-app, ng-init, ng-if, ng-show, ng-bind, {{ }}

JavaScript – more ES6 features

• let – MDN link
• const – MDN link
• destructuring – MDN link

ES6 features summary page

More topics covered:

• downloading angular
• page rendering
• angularjs loop
• console error – dev tools

Links:

• Class code: more js
• Class code: our first AngularJS
• Lesson Summary Video!

What is Cross-Origin Resource Sharing?

Cross-Origin Resource Sharing (CORS) enables client-side code running in a browser in a particular domain to access resources hosted in another domain in a secure manner. Cross-origin requests are typically not permitted by browsers, and CORS provides a framework in which cross-domain requests are treated as same-domain requests.
For example, using CORS, JavaScript embedded in a web page can make an HTTP XMLHttpRequest to a different domain. This is used to send an HTTP or HTTPS request to a web server, and to load the server response data back into the script.
… full article

CORS may be solved by:

• Placing the HTML page on the server
• Enabling CORS –  code or config
• JSONP
• Chrome Extension

Enable CORS in WebApi – click here!

More JS

• XMLHttpRequest – GET POST PUT DELETE
• JQuery – ajax get
• JQuery – ajax post
• JQuery – ajax put + delete
• JQuery Ajax Promise

More topics covered:

• Showing XHR tab in dev console
• display AJAX result into a table
• $.each
• variable starts with $
• Why CORS important for development
• CORS differ by ports
• Postman overcomes CORS
• Enable CORS for specific domain
• Enable CORS for specific header
• Enable CORS for specific method
• Enable CORS for entire class

Links:

• Class code: movies project + AJAX
• Lesson Summary Video!

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation and other interface components. was developed by Twitter

Bootstrap Home page – click here!

More JS

• call, apply
• function-copy
• scope
• Hoisting – MDN doc
• Closure – MDN doc
• IIFE (Immediately Invoked Function Expression) – MDN doc

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page

full article

AJAX xmlhttprequest – MDN

More topics covered:

• js “compilation”
• variables and func in window scope
• js – random, Math.floor
• js using Garbage Collector (GC)
• function foo vs foo = var function
• adding js script link to HTML
• Bootstrap grid system

Links:

• Class code: adding bootstrap v3.3
• Class code: more js features
• Class code: card game
• Class code: ajax xmlhttprequest
• Bootstrap v3.3 – css gallery
• Lesson Summary Video!

What is JQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript … full article

jQuery was originally created in January 2006

What is JQuery UI?

jQuery UI is a collection of GUI widgets, animated visual effects, and themes implemented with jQuery (a JavaScript library), Cascading Style Sheets, and HTML. According to JavaScript analytics service, Libscore, jQuery UI is used on over 197,000 of the top one million websites, making it the second most popular JavaScript library. Notable users include Pinterest, PayPal, IMDb, The Huffington Post, and Netflix.

More JavaScript

Arrays, forEach, creating objects as JSON, creating objects in methods, creating objects in ctor methods, adding function to an object, arguments in functions, ES6 shortcuts

More topics covered:

• Content Delivery Network (CDN)
• Minify javascript
• import jquery into HTML page
• JQuery – dollar sign $
• JQuery on page load function
• JQuery selectors
• JQuery animations
• JQuery adding events

Links:

• Class code: JQuery intro
• Class code: JQuery more …
• Class code: more js …
• JQuery – demo
• JQuery home page
• JQuery ui page
• Importing JQuery – w3schools
• Learning JQuery – w3schools
• Lesson Summary Video!

What is JavaScript?

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative
programming) styles. … full article

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.
The standard of scripting languages like JavaScript is ECMAScript

What is ECMAScript?

The full form of ECMA is European Computer Manufacturer’s Association. ECMAScript is a Standard for scripting languages such as JavaScript, JScript, etc. It is a trademark scripting language specification. JavaScript is a language based on ECMAScript. A standard for scripting languages like JavaScript, JScript is ECMAScript. JavaScript is considered as one of the most popular implementations of ECMAScript.

ECMAScript 5
ECMAScript 5 was released in 2009.
These were the new features released in 2009:
The “use strict” directive, String.trim, Array.isArray, Array.forEach, Array.map, Array.filter, Array.reduce, Array.reduceRight, Array.every, Array.some, Array.indexOf, Array.lastIndexOf, JSON.parse, JSON.stringify, Date.now, Property Getters and Setters, New Object Property Methods

ECMAScript 5 Syntactical Changes:
Property access [ ] on strings, Trailing commas in array and object literals, Multiline string literals, Reserved words as property names

ECMAScript 6
ECMAScript 6 is also known as ES6 and ECMAScript 2015.
Some people call it JavaScript 6.

Some of the new features in ES6:
JavaScript let
JavaScript const
JavaScript Arrow Functions
JavaScript Classes
Default parameter values
Array.find()
Array.findIndex()
Exponentiation (**) (EcmaScript 2016)

What is ScratchJS?

ScratchJS is a Chrome add-on for DevTools which integrates both the Traceur and Babel transpilers, allowing you to test out the new JS features coming with ECMAScript 6, also known as ES6 or ES2015. It also supports CoffeeScript, LiveScript and more compile-to-JS languages will be added soon

More topics covered:

• javascript types
• javascript basic commands
• javascript var in memory + refresh
• type coercion
• === and !==
• if-else, while, do-while, switch-case, try-catch-finally
• parseInt
• alert
• prompt
• chrome dev tools
• chrome console
• running js in scratchJS
• running js in HTML page
• button onclick
• document – DOM
• document.getElementById + value
• DOM manipulation
• innerHTML
• blank.org

Links:

• Class code: JavaScript (JS) intro
• Class code: more js …
• Class code: js inside HTML
• js inside HTML – live demo!
• What is JavaScript – MDN
• JavaScript – w3schools
• ScratchJS download link
• Learning JavaScript – nice videos
• Lesson Summary Video!