AngularJS
Good tutorials:
Example
<!DOCTYPE html>
<html ng-app="exampleApp" >
<head>
<title>AngularJS Demo</title>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script src="angular.js"></script>
<script>
var myApp = angular.module("exampleApp", []);
myApp.controller("dayCtrl", function ($scope) {
// controller statements will go here
});
</script>
</head>
<body>
<div class="panel" ng-controller="dayCtrl">
<div class="page-header">
<h3>AngularJS App</h3>
</div>
<h4>Today is {{day || "(unknown)"}}</h4>
</div>
</body>
</html>
Utility methods
angular.isNumber(o);
angular.isString(o);
angular.isArray(o);
angular.isObject(o);
angular.lowercase(o);
angular.uppercase(o);
angular.extend(obj1, obj2); // add properties of obj2 to obj1
for (var prop in myData) {
console.log("Name: " + prop + " Value: " + myData[prop]);
}
angular.forEach(myData, function (value, key) {
console.log("Name: " + key + " Value: " + value);
});
Modules
var myApp = angular.module("myApp", []); // create the app
var myApp = angular.module("myApp"); // gives an error if the app hasn't been created
myApp.name; // "myApp"
myApp.constant(key, value); // define a constant
myApp.value(key, value); // define a service that returns a constant
myApp.controller(name, constructor); // create a controller
myApp.service(name, constructor); // create a service
myApp.factory(name, provider); // create a service
myApp.provider(name, type); // create a service
myApp.config(callback); // register a function to configure a model after loading
myApp.run(callback); // register a function to run after load and configure
myApp.animation(name, factory); // create animations
myApp.directive(name, factory); // create a directive to extend HTML
myApp.filter(name, factory); // create a filter
Controllers
myApp.controller("dayCtrl", function($scope){ // inject the dependency on $scope
$scope.day = "Thursday";
})
.controller("tomorrowCtrl", function($scope){ // fluent api allows chaining
$scope.day = "Friday";
});
In the view:
<div ng-controller="dayCtrl">
<h4>Today is {{day}}</h4>
</div>
<div ng-controller="tomorrowCtrl">
<h4>Tomorrow is {{day}}</h4>
</div>
Directives
myApp.directive("highlight", function () { // factory function
return function (scope, element, attrs) { // returns a worker function
if (scope.day == attrs["highlight"]) {
element.css("color", "red");
}
}
});
In the view:
<h4 ng-controller="dayCtrl" highlight="Monday">
Today is {{day}}
</h4>
Filters
<p>{{price | currency }}</p>
<p>{{pubdate | date}}</p>