What is Angular?

AngularJS lets you extend HTML vocabulary for your application.

MVVC

Filters

Filters are used for formatting data displayed to the user.

example

Built-in Filters

List of built-in filters

Custom Filters

You can create your own to do anything.

angular.module('app')
	.filter('numberFormat', [function () {
		return function (number) {
			if (number !== undefined) {
				var abs = Math.abs(number);
				if (abs >= Math.pow(10,12)) {//trillion
					number =  (number / Math.pow(10, 12)).toFixed(1)+ 't';
				} else if (abs < Math.pow(10,12) && abs >= Math.pow(10, 9)) {//billion
					number =  (number / Math.pow(10, 9)).toFixed(1)+ 'b';
				} else if (abs < Math.pow(10, 9) && abs >= Math.pow(10, 6)) {//million
					number =  (number / Math.pow(10, 6)).toFixed(1)+ 'm';
				} else if (abs < Math.pow(10, 6) && abs >= Math.pow(10, 3)) {//thousand
					number =  (number / Math.pow(10,3)).toFixed(1)+ 'k';
				}
			}
			return number;
		};
	}]);

					

Example

Directives

Directives let you invent new HTML syntax, specific to your application.

Built-in Directives

Angular comes with great directives you can use.

List of built-in directives

angular.element

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."

Angular's jqLite

Mouse Events with Angular

• ngMousedown
• ngMouseover
• ngMouseenter
• ngMouseleave
• ngMousemove
• ngMouseup

ngShow/ngHide

• ngShow
• ngHide

ngSwitch/ngIf

• ngSwitch
• ngIf

Example

Exercise 1

Exercise 2

Solution 1

Solution 2

Creating Custom Directives

A linking function is enough to create a directive.

var app =  angular.module('app', [])
app.directive('myDirective', [function(){
	return {
		link: function() {
			//Do something here.
		}
	}
}])
						

Linking function has access to:

• scope: is an Angular scope object.
• element: is the jqLite-wrapped element that this directive matches.
• attrs: is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

var app =  angular.module('app', [])
app.directive('myDirective', [function(){
	return {
		restrict: "E", //Defaults to "A" for attribute.
		link: function(scope, element, attrs) {
			//Do something here...
		}
	}
}])
						

Basic behavior using element

app.directive('superwoman', [function(){
	return {
		restrict: "E",
		link: function(scope, element, attrs) {
			element.bind('mouseenter', function(){
				alert("I'm busy saving the world. Come back later.")
			})
		}
	}
}])
						

Using attrs

app.directive('classy', [function(){
	var link = function(scope, element, attrs) {
		element.bind('mouseenter', function(){
			element.addClass(attrs.classy);
		})
	}
	return {
		restrict:"A",
		link: link
	}
}])
						

Using scope

app.controller('SuperController', ['$scope', function($scope){
	$scope.totalSuperwomen = 20;
	$scope.addOne = function() {
		$scope.totalSuperwomen ++;
	}
}])

app.directive('superwoman', [function(){
	return {
		restrict: "E",
		link: function(scope, element, attrs) {
			element.bind('mouseenter', function(){
				scope.addOne();
				scope.$apply();
			})
		}
	}
}])

						

Services

The service factory function generates the single object or function that represents the service to the rest of the application.

Built-in Services

• $http
• $filter
• $rootScope
• $location service parses the URL in the browser address bar and makes the URL available to your application.
• $animate is available in the AngularJS core, however, the ngAnimate module must be included to enable full out animation support. Otherwise, $animate will only perform simple DOM manipulation operations.

$http

The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise with two $http specific methods: success and error.

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
	// this callback will be called asynchronously
	// when the response is available
  }).
  error(function(data, status, headers, config) {
	// called asynchronously if an error occurs
	// or server returns response with an error status.
});
						

// Simple POST request example (passing data) :
$http.post('/someUrl', {msg:'hello word!'}).
  success(function(data, status, headers, config) {
	// this callback will be called asynchronously
	// when the response is available
  }).
  error(function(data, status, headers, config) {
	// called asynchronously if an error occurs
	// or server returns response with an error status.
  });
						

Custom Services

The service factory function generates the single object or function that represents the service to the rest of the application.

Exercise time...

Solutions