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();
			})
		}
	}
}])

Simpler directive with controller

angular.module('directives.searchbutton', [])
  /**
   * Controller used to drive the searchbutton directive.
   */
  .controller('SearchButtonCtrl', function($scope) {

    // Clear the current search property.
    $scope.clearSearch = function() {
      $scope.query = '';
    };

  })
  .directive('searchbutton', function() {
    return {
      template: 
      /* should be a string */
 <form ng-submit="search()">
  <div class="input-group stab-search-button">
    <input type="search" class="form-control stab-search-text" placeholder="{{ 'SEARCH_EMAIL' | i18n }}" ng-model="query" ng-focus="focus=true" ng-blur="focus=false">
      <span class="stab-search-close icon-circle-close" ng-show="query != ''" ng-click="cancel()"></span>
      <span class="input-group-btn">
      <button class="btn btn-default icon-search-white stab-btn-icon hidden-xs" type="button" ng-disabled="query == '' || query.length <= 2" ng-click="search()">
      </button>
    </span>
  </div>
</form>
/* end of should be a string */,
      scope: {
        query: '=query',
        focus: '=focus',
        blur: '=blur',
        search: '&onSearch',
        cancel: '&cancelSearch'
      },
      controller: 'SearchButtonCtrl'
    };
  });
  /* example usage */
  <div searchbutton="" data-query="data.searchTerm" data-on-search="doSearch()" data-cancel-search="exitSearch()" data-focus="data.searchFocus">
  </div>

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...

The Plunker exercise

Solutions

Plunker Solution