Load AngularJS by a single JS file:
This file covers AngularJS v1 == "Angular JS"

It seems the HTML expressions expand from both scopes and from controller thises.
Using controllerAs references avoids isolation constraints and
you can dot walk to anything, but only from controller 'this' (not any scope).

Not sure because docs definitely imply they are different, but it looks to me
like "application" and "module" are the same exact thing.


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
This will load a minimal jQuery subset if jQuery not already loaded.

Generally, use data-ng-* for attribute names.
Can shorten to ng-*, but for some reason that HTML will not validate.

ng-directives:
    data-ng-app:  SCOPES existing app to el.  Any element (incl. inline els).
       May only scope app "" or those created with angular.module(appName).
       I seem to be unable to use two apps on one page.
       Add to "html" element for single-page applications.
       Apps load faster if scope of the app is smaller.
    data-ng-model:  Binds HTML control to app data
        Regardless of the model name, makes available Angular state vars for the input:
            formName.inputName.$valid  "" invalid for email,
                                          valid for text unless "required" too
            formName.inputName.$dirty  even if reverted back to orig value
            formName.inputName.$touched  de-focused
        The direct "model" vars are ??? and vanish when the input field val changes.
        The formName.input.* vars are dynamic even as typing single characters!
        A video show colocated value-less attr "ng-model-instant" but that
          seems to be the default with 1.4.8.
        Can adjust responsivity somehow.
    data-ng-bind:  Binds app data to HTML view, though {{exprs}} more common
       Can bind constraints (from exprs), not just variable names, like {{exprs}}.
       Can bind to any el (incl. inline els.) to set text content of that el.
    data-ng-init:  Variable initialization:  data-ng-init='fn="John"; ln="other";'
        Apparently can be on any element that loads at page load time.
        Variable execution context like for {{ exprs }} is the app (empirically from the scope).
    data-ng-controller:  SCOPES existing controller to el.
        Pages commonly have more than one (scoped to different els).
        If add to attr value " as objRef"
            Then add this.key defs to the controller and reference these
            with {{ objRef.ctrlThisKey }} instead of {{ ctrlKey }}.

Create non-"" application.  Non-empty names.
    Presence of 2nd param to angular.module() means CREATE app.
    angular.module("app", []).controller("ctl", function($scope, $rootScope) {
                                            OR  function($scope, $http) {
                                            OR  function($scope, $resource) {
                [The "[]" contains list of depended-upon, existing module names]
        // $scope is something like application object
        // $rootScope apparently is the application object
        $scope.firstName= "John";  // Initialize a bound input value
        $scope.lastName= "Doe";
        $scope.fn = function() { return...; } // Define an app function
          // Good for displaying derived values
        $scope.anArr = [arbitrary,app,data];
    });

Create your own custom directives:
A directive is function that returns objects.
Accessing the directive as an lc-hyphened element attr write the value of
fn().template as the element's text content.
Or as an element name.
If change restrict value from default of "EA" and set "C" or "M" then:;
    Element, Attribute Class, Comment
Or same lc-hyphened  word in comment or as a tag.  M
Or as a lc-hyphened CSS classname.  C
The template value may contain HTML.
    angular.module("app", []).directive("dNameCamelCase", function() {
        return { template|templateUrl: "val", restrict: "A", scope: { attrName: "@" }
    });
I don't see a way to read bound variables into the template.
Colocated attr values available same as attrs for an E.
Though name defined with camelcase, it is used LC-hyphenated.

Expressions, either in data-ng-bind values or in {{exprs}}.
These are NOT JavaScript, but Angular expressions.
No conditionals, loops, exceptions.
Supports filters.
Can prettyprint objects using a json pipe:  {{ data | json }}

General variable expansion
Use {{ exprs }} within the content.  This sets up a monitor/watcher to
  change the display dynamically according to data changes.
Use {{ :exprs }} to resolve the var just once.
To do something without output, including assigning a new variable, set css display: none:
  <ng-container style="display:none">{{this.mode = "Modality"}}</ng-container>

<anyEl ng-repeat="x in <list>">...</ayEl>
Use {{ $index, $even, $odd }} within the content.  $even and $odd are booleans.

Dynamic element visibility:
  ng-show="myForm.myAddr.$error.email"
  Useful for input validation by using JS conditions like:
      formName.inputName.$error.<VAL_TYPE>
      Where <VAL_TYPE> like "email", "pattern"

Angular vars:
    [$appScope.]<FORM_NAME>.<EL_NAME>.$name == <EL_NAME>
    [$appScope.]<FORM_NAME>.<EL_NAME>.$error{<VAL_TYPE>:val,...}
    [$appScope.]<FORM_NAME>.<EL_NAME>.$valid|$dirty|$touched|$untouched|$pristine|$invalid
    [$appScope.]<FORM_NAME>.<EL_NAME>.$viewValue|$modelValue
      $modelValues get automatically updated from $viewValues immediately when validated
      $scope.formName.intputName.$modelValue === $scope.bindName
      If assign to $scope.bindName, both $modelValue and $viewValue get it.
      If HTML page sets invalid value ($viewValue), $modelValue (and $scope.bindName) gets cleared!

Dynamic input CSS classes
    ng-empty
    ng-not-empty
    ng-touched
    ng-untouched
    ng-valid
    ng-invalid
    ng-dirty
    ng-pending
    ng-pristine

Filters
    Angular-expr | <FILTER>[:'arg']
    currency
    filter (array element contains substr test).  Arg is a model binding name.
    lowercase, uppercase
    orderBy    EXAMPLE:  data-ng-repeat='x in names | orderBy:"country"'

$http
    HTTP server comm. via XMLHttpRequest or JSONP.
    http.get(url).then(function(response) { response.data.*... });
    Reads JSON data into response.data object.
    $resource is factory for RESTful wrappers for lower-level $http's.
        Have to include an optional *.js and then
        angular.model(yourAppName, ["ngResource"]);
        before can use $resource.

data-ng-if="<BOOL EXPR>"
data-ng-disabled="<BOOL EXPR>"  Sets attr "disabled" iff expr is true.
data-ng-show="BOOL EXPR>"  Same thing for visibility
data-ng-hide="BOOL EXPR>"  Same thing with reverse logic

ng-click="<ANGULAR EXPR>"  Just like onclick.

Form Validation
Use to disable standard HTLM5 validation:  novalidate  (input el. attr)

Common Angular API functions
angular.lowercase(), angular.uppercase()
angular.isString(), angular.isNumber()

Include in any element:  data-ng-include="path.html"
(HTML and angular code (as child of the el))

_.filter(list, function(item) { return x; })  Returns filtered list.

$location.search() is a read and write function (like jQuery) for parsing
and adding/setting params in the page URL.

double-colon
{{::varName}} means just populate value at load, don't watch for updates.

SCOPE HIERARCHY
Key attribute to identify a scope is .$id
Scope checked from Chrome debugger with angular.element(elRef).scope().$id
If you use element attr 'data-ng-app' (only above all other Angular directives?)
this element will get root scope.

To pass events to ng-click handler functions you must pass $event.