jam + angularjs gists

aggregation.js

'use-strict';

define(
  'directives/directive-aggregator'
  ['directives/todoBlur' ,'directives/todoFocus']
  ,{blur:blur, focus:focus}
);

//-----------------------------------------
//or
//-----------------------------------------

'use-strict';

define(
  'directives/todo-directives'
  ,['app']
  ,function todoDirectiveModule(app) {
    var blur,focus;

    blur = app.todomvc.directive('todoBlur', function() {
      return function blurDirective( scope, elem, attrs ) {
        elem.bind('blur', function() {
          scope.$apply(attrs.todoBlur);
        });
      };
    });

    focus = app.todomvc.directive('todoFocus', function( $timeout ) {
      return function( scope, elem, attrs ) {
        scope.$watch(attrs.todoFocus, function( newval ) {
          if ( newval ) {
            $timeout(function() {
              elem[0].focus();
            }, 0, false);
          }
        });
      };
    });

    return {blur:blur, focus:focus};
  }
)

app.js

'use strict';

/**
 * The main TodoMVC app module.
 *
 * @type {angular.Module}
 */
var todomvc = angular.module('todomvc', []);

//-----------------------------------------
//becomes
//-----------------------------------------

'use strict';


define(
  'app'
  ,[
    'angularjs'
  ]
  ,function TodoMVCApp(angularPlaceHolder /*angular is not a AMD module*/) {
    var angularModule = angular.module('todomvc', [])
        ,app = {}

    app.init = function init() {
      //using global angular var
      angular.bootstrap(document, ['todomvc']);
    }

    //make the "todomvc" (Angular) module available on the "app" (AMD) module
    app.__defineGetter__('todomvc', function() {return angularModule;})

    return app;
  }
);

index.html

<script src="../../assets/base.js"></script>
<script src="js/libs/angular/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script>
<script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoBlur.js"></script>


//-----------------------------------------
//becomes
//-----------------------------------------

<script data-main="main" src="jam/require.js"></script>

installing-angular.sh

jam install angularjs
ls jam/angularjs 
cat jam/jam.json
cat jam/require-config.js

installing-jam.sh

sudo npm install -g jamjs

jam-angular-note.js

//instead of this
require('angularjs', function(angular) {/*angular is undefined*/})

//use this 
require('angularjs', function() {/*angular is in the global namespace*/})

//or something  this
require('angularjs', function(notAngular) {/*notAngular is indefined but angular is in the global namespace*/})

main.js

'use-strict';

define(
  'main'
  ,[
    'app'
    ,'controllers/todoCtrl'
    ,'directives/todoBlur'
    ,'directives/todoFocus'
    ,'services/todoStorage'
  ]
  ,function mainModule(todomvc) {


    todomvc.init();
  }
)

todoBlur.js

'use strict';
 /**
 * Directive that executes an expression when the element it is applied to loses focus.
 */
app.todomvc.directive('todoBlur', function() {
  return function blurDirective( scope, elem, attrs ) {
    elem.bind('blur', function() {
      scope.$apply(attrs.todoBlur);
    });
  };
});


//-----------------------------------------
//becomes
//-----------------------------------------

'use strict';

define(
  'app'
  ,[
    'angularjs'
  ]
  ,function TodoMVCApp(angularPlaceHolder /*angular is not a AMD module*/) {
    var angularModule = angular.module('todomvc', [])
        ,app = {}

    app.init = function init() {
      //using global angular var
      angular.bootstrap(document, ['todomvc']);
    }

    //make the "todomvc" (Angular) module available on the "app" (AMD) module
    app.__defineGetter__('todomvc', function() {return angularModule;})

    return app;
  }
);