IT:AD:Angular.JS:HowTo:Understand/The Basics

(UP)

Summary

Angular.JS is a client side javascript MVC framework + databinding. Which makes it very close to a MVVM clientside framework.
Angular.JS extends the DOM with Attributes, known as Directives, or declarative statements, known as Expressions.
- eg: data-ng-app, data-ng-controller, data-ng-bind, data-ng-model, data-ng-array.

To get started, you just need to install on the core file: IT:AD:Angular.JS:HowTo:Install

The following is just a crash course in the basics. It's hopefully will get you started. To go further, you'll need more: IT:AD:Angular.JS:HowTo:Find the API.

* A distinct advantage of Angular is the fact that a page (eg…god forbid…Sharepoint…) can host n angular apps as modules, each distinctly from each other. * data-ng-app='...' is used to tie a DOM element to a backing app module of the same name: * the returned app instance is later used to add more functionality/controllers to the app (see below). * data-ng-app='...' with auto-bootstrap automatically bootstraps the app upon page load.

<body data-ng-app='App1'>
  ...
</body>

//notice name ('App1') must match
var app1 = angular.module('App1',[]);

You'll start off mostly hearing about Angular Controllers/ (see next part), but park it for later that you'll be need to also know about:

Controllers
Filters
Routes
etc.

We'll come back to those. For now Angular Controllers/

* A SPA App is an orchestration of Views (eg div elements on the page) that are hidden and displayed depending on some logic. * A View's root element is tied to its associated backing controller using data-ng-controller:

<!-- refer to the name the controller was registered under -->:
<callout icon="true" type="data-ng-app='App1'>
  <div data-ng-controller=`SomeFormCtrl`">...</callout>
</div>

//Create the app:
var app1 = angular.module('App1',[]);

//pointing to a backing controller registered with the above app ('app1'), 
//using a specific name (SomeFormCtrl):
app1.controller('SomeFormCtrl', ['$scope', function ($scope) {
    $scope.first = 'John';
    $scope.last = 'Smith';
    $scope.firstLast = function(){return $scope.first + ' ' + $scope.last;}
}]);

Each controller has a binding scope.
It can be considered as the controller's live model.
When you bind a View's elements, you're data binding to the controller's scope/model.
So far so good.
The unexpected is: if the property can't be found in the current scope, it will recurse up anscestor scopes to find it.
- that's different than IT:AD:Durandal.JS

* data-ng-bind='...' is used to bind a view element's innerHtml to a scope property. * It's live, in that if something changes in the underlying $scope, the View automatically updates: * You can use angular directives (ie, attributes), or angular expressions (ie, moustache binding): * Either way, the text is evaluated, which can be a useful (but possibly sloppy) feature.

<callout icon="true" type="data-ng-app='App1'>
  <div data-ng-controller=`SomeFormCtrl`>
   <div><span>FullName:</span><span ng-data-bind='first + last'/"></callout>
   <div><span>FullName:</span><span ng-data-bind='firstLast()'/></div>
   <div><span>FullName:</span>{{first + last}}</div>
   <div><span>FullName:</span>{{firstLast()}}</div>
  </div>
</div>

//Create the app:
var app1 = angular.module('App1',[]);

//pointing to a backing controller registered with the above app ('app1'), 
//using a specific name (SomeFormCtrl):
app1.controller('SomeFormCtrl', ['$scope', function ($scope) {
    $scope.first = 'John';
    $scope.last = 'Smith';
    $scope.firstLast = function(){if (!dc){dc=' ';}return $scope.first + dc + $scope.last;}
}]);

Inputs can be used to push properties back into the model.
data-ng-model= is used to tie the current INPUT element to a property in the current or ancestor scope:

<callout icon="true" type="data-ng-app='App1'>
  <div ng-controller="SomeFormCtrl">
    <!-- To bind input Value's, we use ng-model -->
    <div>First:<input ng-model="first"/"></callout>
    <div>Last:<input ng-model="last"/></div>
    <div>Full:<span ng-bind="firstLast()"/></div>
  </div>
</div>

var app1 = angular.module('App1',[]);
app1.controller('SomeFormCtrl', ['$scope', function ($scope) {
    $scope.first = 'John';
    $scope.last = 'Smith';
    $scope.firstLast = function(){if (!dc){dc=' ';}return $scope.first + dc + $scope.last;}
}]);

putting all that together, you get:

We've already covered binding to scalars above (both for InnerHtml or Value reasons), but just for completeness, here's a recap before we go on to the more interesting problem of binding to arrays:

Arrays are more interesting in that

Arrays can be Filtered → Ordered → Projected.
use the data-ng-repeat= attribute, then use pipe syntax pass through orderBy:, etc.
We desire our UI to update upon changes to the the array.

Here are some examples:

$compile ← Angular compiler
$scope ← * $rootScope ← refers to where ng-app was applied.
$apply ← propagate model changes
$watch
$watchCollection
$destroy
$eval

IT:AD:Angular.JS:HowTo:Understand/The Basics

Summary

Notes

Installation

API Documentation

Angular Applications

Angular Bits and Bobs

Angular Controllers

Scope

Model Output Binding

Model Input Binding

Example,

Binding to Scalars

Binding to Arrays

Continuing

Binding

Resources

Notes