Table of Contents
Requirejs - Angularjs Equipvalence
1. Angular Module dependency
1.1 Using Module in Angularjs
index.html
#index.html
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
<script src="assets/libs/angular-material/angular-material.min"></script> <---------- library file------------
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="obj = {}">Change binding</button>
<my-component obj="obj"></my-component>
<my-componentx obj="obj"></my-componentx>
</body>
</html>
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();
};
}]);
1.2 Using Module with Requirejs
index.html
#index.html <body> ... <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </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();
};
});
});
