angularjs - samples

angular apply example.js

// respond to a Bootstrap carousel "slid" event
$('#my-carousel').on('slid', '.carousel', function() {
  // first, since we're outside AngularJS, we need to grab
  // the AngularJS scope that this element resides in
  var scope = angular.element(this).scope();

  // next, we find the active item in the carousel, and grab
  // some data-* from it
  var active = $(this).find('.active');
  var description = active.attr('data-description');

  // pretend we have "<p>{{description}}</p>" in the HTML,
  // which we want to update with the data we grabbed
  // finally, because we've made changes to the model without
  // going through an ng-* action, we need to $apply

  scope.$apply(function() {
    scope.description = description;
  });

});

angular directive sample.js

var directives = angular.module('guthub.directives', []);

directives.directive('butterbar', ['$rootScope',function($rootScope) {
  return {
    link: function(scope, element, attrs) {
      element.addClass('hide');
      
      $rootScope.$on('$routeChangeStart', function() {
        element.removeClass('hide');
      });
      
      $rootScope.$on('$routeChangeSuccess', function() {
        element.addClass('hide');
      });
    }
  };
}]);

angular directive template.js

var myModule = angular.module(...); 
myModule.directive('directiveName', function (injectables) {
  return {
    restrict: 'A',
    template: '<div></div>',
    templateUrl: 'directive.html',
    replace: false,
    priority: 0,
    transclude: false,
    scope: false,
    terminal: false,
    require: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
});

angular testing example.js

//a basic test structure
 describe() {
    beforeEach()
    afterEach()
    it() {
        expect().matcher()
    }
}


// controllers.js
// This controller returns three json elements in $scope variable 
function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}



//=======================

// RTcontroller.js
// In this controller we have created a service, from which data will be returned in "stocks" variable of angular  // $scope via $http and $q object.  

var app = angular.module('angularjstest', []); 

app.controller('StockListCtrl', function($scope, stockService) { // Angular Controller Definition 
                                                                 // with service injection
        stockService.getStocks().then(function(data) {           // Angular promise
            $scope.stocks = data;
        });
   });

app.factory('stockService', function($http, $q) {               // Angular Service Declaration
    return {
        getStocks: function() {                                 
            var deferred = $q.defer();                          // Deferred Object Declaration
            $http.get('stocks.json').success(function(data) {   // Asynchronous Service calling
                 deferred.resolve(data);
            }).error(function(){
                 deferred.reject();
            });
        return deferred.promise;
     }
   }
});


//===================================

// The Angular.js test spec coding
describe('Controller function', function() {  // Jasmine Test Suite

  describe('PhoneListCtrl', function() {      // Inner Test suite for Angular Controller
    var scope;

    beforeEach(inject(function($rootScope, $controller) {  // Data initialisation in case of Headless Browser
                                                           // $rootScope is the Angular Built-in object from which
                                                           // angular scope will be created.
      scope = $rootScope.$new();
      var ctrl = $controller(PhoneListCtrl, {$scope: scope}); // Controller object will be created for the 
                                                              // PhoneListCtrl controller in testing environment.
    }));

    it('should create "phones" model with 3 phones', function() { 
      expect(scope.phones.length).toBe(3); // Individual Test Component - refer to source javaScript code
    });                                    // of the above Angular Controller
  });

  describe('StockListCtrl', function() {
     var scope;
     var $httpBackend, $rootScope, createController, _stockService;

	 beforeEach(function () {
            module("angularjstest");   // Angular Module Initialisation
        }); 

    beforeEach(inject(function($rootScope, $controller, $injector ,stockService) {

	  $httpBackend = $injector.get('$httpBackend'); // Mock object for Testing Environment with $http service 
	  $httpBackend.when('GET', 'stocks.json').respond([{"Product": "REL", "BBP": "10", 
                                                           "BSP": "10.2", "LTP": "10.1"}]); 
                             // Send the mock data by creating $httpbackend service
	  $rootScope = $injector.get('$rootScope');
	  scope = $rootScope.$new();
	  var $controller = $injector.get('$controller'); // Creating the Angular Controller for Test Environment
	  _stockService = stockService;
	  spyOn(stockService, 'getStocks').andCallThrough(); // Calling of the 'getStocks' method is ensured// by spyOn 
	  createController = function() { // Method to create controller 
              return $controller('StockListCtrl', {'$scope' : scope }, {stockService : _stockService});
          }; 

    }));

    it('should call getStocks', function() {
	  var controller = createController();
	  expect(_stockService.getStocks).toHaveBeenCalled(); // Service method is called or not
	  $httpBackend.flush();
    });
    it('should have more than 0 stock', function() {
	  var controller = createController();
	  $httpBackend.flush();
          expect(scope.stocks.length).not.toBe(0); // some stock data is expected to be returned from here -
                                                   // We have created mock service for this above.

    });
  });
});