...

var app = angular.module("MyApp", []);

// Create custom filter
app.filter("reverse", function() {
  return function(input) {
    var result = "";
    input = input || "";
    for (var i=0; i<input.length; i++) {
      result = input.charAt(i) + result;
    }
    return result;
  };
});

Advanced Concepts

Directives

Directives are Angular's method of creating new HTML elements with their own custom functionality. For instance, we can create our own custom element "my-directive"

angular.module('BrownBagDemoApp')
  .directive('myDirective', function () {
    return {
      restrict: 'E',
        template: '<a href="http://pentaho.com">Click me to go to Pentaho</a>'
    };
  });

Digest Cycle

How does Angular know when something has changed and it's time to update the bindings??

• AngularJS works on a concept of dirty checking: a simple process of comparing a value with its previous value and if it has changed then a change event is fired.
• Dirty checking is performed via a digest cycle that is controlled by $digest service
• During the compilation phase, $scope evaluates all of its properties and creates a watchExpression for each one.
• When a watchExpression detects that a $scope property has changed then a listener function is fired.

Dependency Injection

• Implicit: Angular will assume the function parameter names are the names of the dependencies. It evaluates function signatures using the toString() method and then see if there is a matching service available.
  Note: that this will only work with non-minified/non-obfuscated code as angular needs to parse the arguments in-tact.

• Explicit: Use the $inject annotation to define what is going to be injected.
  Note: This method allows for minifiers to rename the function parameters and still be able to inject the proper services into the function.

• Inline: Allows us to pass an array of arguments instead of a function when defining an angular object. The elements inside this array are the list of injectable dependencies as strings, with the last argument being the function definition of the object.
  **Note: This will also work with minified/obfuscated code

// Implicit
angular.module('myApp')
  .controller('MyCtrl', function($scope, myService) {
  // Do something awesome
});


// Explicit
var MyCtrl = function(some$scope, someService) {
  // Do something awesome
}
MyCtrl.$inject = ['$scope', 'myService'];


// Inline
angular.module('myApp')
  .controller('MyCtrl', ['$scope', 'myService', 
  	function($scope, myService) {
      // Do something awesome  
}]);

Building

TODO: add content here

...

angular.module('admin-users', [])
.config(function ($routeProvider) {
  $routeProvider.when('/admin/users', {...});
  $routeProvider.when('/admin/users/new', {...});
  $routeProvider.when('/admin/users/:userId', {...});
});

angular.module('admin-projects', [])
.config(function ($routeProvider) {
  $routeProvider.when('/admin/users', {...});
  $routeProvider.when('/admin/users/new', {...});
  $routeProvider.when('/admin/users/:userId', {...});
});

angular.module('admin', ['admin-projects', 'admin-users']);

• Directives

  • While declaring an AngularJS directive, the naming convention followed is camelCase. For example, we would define the name of the directive as 'myDatePicker'. But when you actually use the directive in your HTML, it is the dash-separated version (my-date-picker).
  • To make your directives and attributes HTML5 compliant, you can prefix all AngularJS attributes with "data-" or "x-". That is, "x-ng-show" or "data-date-picker", and AngularJS will treat it just like you wrote it like a normal HTML element.

...