data-ng-app, data-ng-controller, data-ng-bind, data-ng-model, data-ng-array.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:
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;}
}]);
* 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;}
}]);
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
data-ng-repeat= attribute, then use pipe syntax pass through orderBy:, etc.Here are some examples: