AngularStrap

() Bootstrap

 Sleek, intuitive, and powerful front-end framework for faster and easier web development. 

Characteristic of the success of the collaborative opensource era powered by   GitHub.

A new semantic layer for the web.
The most starred project on GitHub with ~70K !

 Encapsulation

Philosophy

Prevent a hard fork...
Leverage the past and future work.

Speed

The more code you have...
The more places there are for bugs to hide!

 Native Rewrite

Bootstrap v3

 The most popular front-end framework for developing responsive, mobile first projects on the web. 

 Payload size becomes a critical issue

AngularJS v1.2

A brand-new API for animations using ngAnimate.

 Moving the leveraged bet on the AngularJS team

 AngularStrap

  Since 2012-09-08...

  15 directives & services

  5 helpers

  37 contributors

  800+ commits

  33 releases (12 in 2014)

  200 watchers

  730 forks

  3700 stars

 Demo Time!

 Architecture

Everything is a service!

angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.helpers.dimensions'])

  .provider('$modal', function() {

  });
          

Standard provider defaults

angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.helpers.dimensions'])

  .provider('$modal', function() {

    var defaults = this.defaults = {
      animation: 'am-fade',
      template: 'modal/modal.tpl.html',
      html: false,
      ...
      show: true
    };

    this.$get = function($window, ...) {
    });

  });
          

Easy configuration

angular.module('myApp', ['mgcrea.ngStrap'])

  .config(function($modalProvider) {

    angular.extend($modalProvider.defaults, {
      animation: 'am-flip-x'
    });

  });
          

Plain old JS objects

  .provider('$modal', function() {

    this.$get = function($window, ...) {

      function ModalFactory(config) {

        var $modal = {};

        $modal.show = function() {...}
        $modal.hide = function() {...}

        return $modal;

      }

      return ModalFactory;

    });

  });
          

Skinny directives, fat services!

  .directive('bsModal', function($window, $location, $sce, $modal) {
    return {
      scope: true,
      link: function postLink(scope, element, attr, transclusion) {

        // Directive options
        var options = {scope: scope, element: element, show: false};
        angular.forEach(['template', 'placement', ...], function(key) {
          if(angular.isDefined(attr[key])) options[key] = attr[key];
        });
        // Initialize modal
        var modal = $modal(options);
        // Trigger
        element.on(attr.trigger || 'click', modal.toggle);
        // Garbage collection
        scope.$on('$destroy', function() {
          modal.destroy();
        });

      }
    };
  });
          

Easily extend components

  .provider('$aside', function() {

    var defaults = this.defaults = {
      template: 'aside/aside.tpl.html',
      ...
    };

    this.$get = function($modal) {

      function AsideFactory(config) {

        var $aside = {};

        // Common vars
        var options = angular.extend({}, defaults, config);

        $aside = $modal(options);

        return $aside;
      }

      return AsideFactory;

    };

  })
          

Create app singletons helpers

.factory('successAlert', function($alert) {

  return $alert({title: 'Success', content: 'Your data has been successfully saved.', placement: 'top-right', type: 'success', duration: 3, show: false});

})

.controller('MyAppCtrl', function(successAlert) {

  $scope.onSuccess = function() {
    successAlert.show();
  }

})
          

Merci!

 +Olivier Louvignes
 mgcrea
 @olouv

Any questions?