AngularJS Plunker

====== Requirejs - Angularjs Equipvalence ====== ===== - Angular Module dependency ===== ==== - Using Module in Angularjs ==== **index.html**


#index.html



  
    
    AngularJS Plunker
    
    
    
    
      <---------- library file------------

Where is the MODULE NAME defined?


    1 /*!
    2  * Angular Material Design
    3  * https://github.com/angular/material
    4  * @license MIT
    5  * v0.11.4
    6  */
    7 (function( window, angular, undefined ){
    8 "use strict";
    9 
   10 (function(){
   11 "use strict";
   12 
   13 angular.module('ngMaterial', ["ng","ngAnimate","ngAria","material.core","material.core.gestures","material.core.layout","material.core.theming.palette","material.core.theming","material.core.animate","mate      rial.components.autocomplete","material.components.backdrop","material.components.bottomSheet","material.components.button","material.components.card","material.components.checkbox","material.components.ch      ips","material.components.content","material.components.dialog","material.components.divider","material.components.datepicker","material.components.fabActions","material.components.fabShared","material.com      ponents.fabSpeedDial","material.components.fabToolbar","material.components.fabTrigger","material.components.gridList","material.components.icon","material.components.input","material.components.list","mat      erial.components.menu","material.components.menuBar","material.components.progressCircular","material.components.radioButton","material.components.progressLinear","material.components.select","material.com      ponents.sidenav","material.components.slider","material.components.sticky","material.components.subheader","material.components.swipe","material.components.switch","material.components.toast","material.com      ponents.tabs","material.components.toolbar","material.components.tooltip","material.components.virtualRepeat","material.components.whiteframe"]);
   14 })();
   15 (function(){
   16 "use strict";

**script.js**


var app = angular.module('StarterApp', ['ngMaterial']);                   <---------- MODULE NAME ngMaterial-----------

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){     <-------$mdXXXX defined in MODULE ngMaterial---
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };
 
}]);

==== - Using Module with Requirejs ==== **index.html**


#index.html


...

**main.js**


#main.js
require.config({
  baseUrl : '.',
  paths : {
    'LIBRARY_NAME' : 'IT'S PATH RELATIVE TO BASEURL',
    'angular' : 'assets/libs/angular/angular',
    'angularAMD' : 'assets/libs/angularAMD/angularAMD',   
    'ocLazyLoad' : 'assets/libs/ocLazyLoad/dist/ocLazyLoad',
    /// angular-material
    'angular-animate' : 'assets/libs/angular-animate/angular-animate.min',
    'angular-aria' : 'assets/libs/angular-aria/angular-aria.min',
    'angular-material' : 'assets/libs/angular-material/angular-material.min',       <------- REQUIRE MODULE and location --------
  },  
  shim : { 
    'LIBRARY_NAME' : {
        deps: ['LIBRARY_NAME','jquery-ui'],
        exports: 'MODULE_NAME'
    },
    'angularAMD' : ['angular'],
    'angular' : {
        deps: ['jquery','jquery-ui'],
        exports: 'angular'
    },
    'underscore' : {
      exports : '_'
    },
    'angular-animate' : {
      exports: "ngAnimate",
      deps: [ "angular" ]
    },
    'angular-aria': {
      exports: "ngAria",
      deps: [ "angular" ]
    },
    'angular-material' : {                                            <-------- REQUIRE MODULE NAME defined above ------------
      deps: ['angular', 'angular-animate', 'angular-aria'],
      exports: 'ngMaterial'                                          <---------- MODULE NAME defined by the lib used below ---------------
    },
  },
  // comment out when use bootstrap.js
  deps : ['app/app.module']
  //deps : ['../bootstrap']
});


#app/app.module.js

var module = [
  'LIBRARY_NAME',
  'angularAMD',
  //'../app/core/core.module',
  'angular-translate',
  'angular-translate-loader-static-files',
  'angular-ui-router',
  'ocLazyLoad',
  'angular-css-injector',
  'angular-material',                                        <----------REQUIRE MODULE---------------
]; //needed module

// The name of all angularjs module
var e = [
   'MODULE_NAME',
  'ui.router',
  'oc.lazyLoad',
  'pascalprecht.translate',
  'angular.css.injector',
  'ngAnimate',
  'ngMaterial',                                       <----------- MODULE NAME -----------
  //'app.nodes',
  //'app.topology',
  //-- common --
  //'app.common.login',
  //'app.common.nav',
  //'app.common.topbar',
  'app.common.layout',
  //-- core --
  //-- components --
];

define(module, function(ng) {
  'use strict';

  var app = angular.module('app', e);

  // The overal config he is done here.
  app.config(function ($stateProvider, $urlRouterProvider,  $ocLazyLoadProvider, $translateProvider, cssInjectorProvider) {

    // Route Settings
    $urlRouterProvider.otherwise("/"); // set the default route

    cssInjectorProvider.setSinglePageMode(true); // remove all added CSS files when the page change

    // set the ocLazyLoader to output error and use requirejs as loader
    $ocLazyLoadProvider.config({
      debug: true,
      asyncLoader: require
    });

    $translateProvider.preferredLanguage('en_US');
  });

  // comment out when use bootstrap.js
  ng.bootstrap(app);
  console.log('bootstrap done (: ');
  return app;
});


## controller.js

define(['app/app.module'], function (app) {
  'use strict';

  app.register.controller('AppCtrl', function ($state, $scope, $mdSidenav) {     <----- $mdXXXXX defined in module---
    $scope.toggleSidenav = function(menuId) {
      $mdSidenav(menuId).toggle();
    };  
  }); 
});