# IT:AD:Angular.JS:HowTo:Understand/The Basics #
* [[../|(UP)]]
{{indexmenu>.#2|nsort tsort}}
* 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`.
## Notes ##
### Installation
* To get started, you just need to install on the core file: [[IT/AD/Angular.JS/HowTo/Install]]
### API Documentation
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]].
### Angular Applications
* 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.*
...
//notice name ('App1') must match
var app1 = angular.module('App1',[]);
### Angular Bits and Bobs
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/]]
### 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`:
:
...
//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;}
}]);
### Scope
* 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/]]
### Model Output Binding
* `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.
FullName:
FullName:{{first + last}}
FullName:{{firstLast()}}
//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;}
}]);
### Model Input Binding
* 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:
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;}
}]);
### Example,
putting all that together, you get:
### Binding to Scalars
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:
### 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:
### Continuing
### Binding
* $compile <- Angular compiler
* $scope <-
* $rootScope <- refers to where ng-app was applied.
* $apply <- propagate model changes
* $watch
* $watchCollection
* $destroy
* $eval
## Resources ##
* http://www.slideshare.net/KeithBloomfield/angularjs-crash-course
* http://www.w3schools.com/angular/angular_intro.asp
* http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/
* http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes