Develop

kit/example-2/index.html

@@ -12,13 +12,13 @@ <h1>JavaScript Module Loading using Require.js</h1>
 		<p class="lead">How to run this example.</p>
 
 		<ol>
-			<li>Open Example-1.html in browser using any HTTP-SERVER.</li>
+			<li>Open Example-2.html in browser using any HTTP-SERVER.</li>
 			<li>Press F12, go to console tab.</li>
 			<li>See the message get displayed on that console tab.</li>
 		</ol>
 
-		<script type="text/javascript" src="app/module1.js"></script>
-		<script type="text/javascript" src="app/module2.js"></script>
+		<script type="text/javascript" src="app/module1.js" async="true"></script>
+		<script type="text/javascript" src="app/module2.js" async="true"></script>
 		<script type="text/javascript" src="app/print.js"></script>
 		<script type="text/javascript" src="app/init.js"></script>
 	</body>

kit/example-3/index.html

@@ -17,6 +17,11 @@ <h1>JavaScript Module Loading using Require.js</h1>
 			<li>See the message get displayed on that console tab.</li>
 		</ol>
 
+		<!-- 
+			Specifing single entry point to our application; 
+			Loading require.js as the first script dependency file with configration options set in main
+			for other files dependency loading and application execution.
+		 -->
 		<script type="text/javascript" src="libs/require.js" data-main="main"></script>
 	</body>
 </html>

kit/example-3/main.js

@@ -1,6 +1,10 @@
 /**
  *	require is global now, thus can be accessed by window.require;
  *	Require.js config API, takes require.js configuration object.
+ *	
+ *	@config-options:
+ 		-> paths: Specify the path for js files; It is relative to the baseUrl;
+ 		   if baseUrl is not provided then by default baseUrl path will become the path where the require.js main file reference.
  */
 requirejs.config({
 	paths: {

kit/example-4/main.js

@@ -1,3 +1,10 @@
+/**
+ *  require is global now, thus can be accessed by window.require;
+ *  Require.js config API, takes require.js configuration object.
+ *
+ *  @config-options:
+        -> baseUrl: Specify the baseUrl Url, As baseUrl is specify the path for js files will change and will be relative to this baseUrl;
+ */
 requirejs.config({
     baseUrl: "libs",
 
@@ -7,6 +14,9 @@ requirejs.config({
     }
 });
 
+/**
+ *  Require.js onError method to handle Async timeout error.
+ */
 requirejs.onError = function(err) {
     if (err.requireType === 'timeout') {
         alert("error: " + err);

kit/example-5/main.js

@@ -1,3 +1,10 @@
+/**
+ *  require is global now, thus can be accessed by window.require;
+ *  Require.js config API, takes require.js configuration object.
+ *
+ *  @config-options:
+        -> shim (deps): Help to manage dependencies loading
+ */
 requirejs.config({
 	baseUrl: "libs",
 
@@ -14,12 +21,15 @@ requirejs.config({
 	}
 });
 
+/**
+ *	Require.js onError method to handle Async timeout error.
+ */
 requirejs.onError = function(err) {
-    if (err.requireType === 'timeout') {
-        alert("error: " + err);
-    } else {
-        throw err;
-    }
+	if (err.requireType === 'timeout') {
+		alert("error: " + err);
+	} else {
+		throw err;
+	}
 };
 
 require(['app/init']);

kit/example-6/index.html

@@ -12,7 +12,7 @@ <h1>JavaScript Module Loading using Require.js</h1>
 		<p class="lead">How to run this example.</p>
 
 		<ol>
-			<li>Open Example-5.html in browser using any HTTP-SERVER.</li>
+			<li>Open Example-6.html in browser using any HTTP-SERVER.</li>
 			<li>Press F12, go to console tab.</li>
 			<li>See the message get displayed on that console tab.</li>
 		</ol>

kit/example-6/main.js

@@ -1,3 +1,10 @@
+/**
+ *  require is global now, thus can be accessed by window.require;
+ *  Require.js config API, takes require.js configuration object.
+ *
+ *  @config-options:
+        -> shim (exports): Help to check it the provided library is AMD supported.
+ */
 requirejs.config({
 	baseUrl: "libs",
 
@@ -13,12 +20,15 @@ requirejs.config({
 	}
 });
 
+/**
+ *	Require.js onError method to handle Async timeout error.
+ */
 requirejs.onError = function(err) {
-    if (err.requireType === 'timeout') {
-        alert("error: " + err);
-    } else {
-        throw err;
-    }
+	if (err.requireType === 'timeout') {
+		alert("error: " + err);
+	} else {
+		throw err;
+	}
 };
 
 require(['app/init']);

kit/example-7/app/init.js

@@ -1,10 +1,18 @@
+/**
+ *	The goal of this file is to provide the basic understanding:
+ *	-> 	How to global object store
+ *
+ *	How to run this example.
+ *	1. Open Example-7.html in browser.
+ *	2. Press F12, go to console tab.
+ *	3. See the message get displayed on that console tab.
+ */
+
 define(["config"], function(config) {
 
 	"use strict";
 
 	var url = config.url;
-
-	console.log(url);
-
+	console.log("Global Url: ", url);
 
 });

kit/example-7/config.js

@@ -1,3 +1,7 @@
+/**
+ *	@module: Global object; use to store global application setting.
+ */
+
 define([], function() {
 
 	"use strict";
@@ -6,5 +10,4 @@ define([], function() {
 		url: "http://www.google.com"
 	};
 
-
 });

kit/example-7/index.html

@@ -1,11 +1,22 @@
 <!doctype html>
 <html>
 	<head>
-		<title>Example 6</title>
+		<meta charset="utf-8">
+		<title>Example 7</title>
+		<link rel="stylesheet" type="text/css" href="../styles.css">
 	</head>
 	<body>
 
-		<h1>Require.js Integration.</h1>
+		<h1>JavaScript Module Loading using Require.js</h1>
+
+		<p class="lead">How to run this example.</p>
+
+		<ol>
+			<li>Open Example-7.html in browser using any HTTP-SERVER.</li>
+			<li>Press F12, go to console tab.</li>
+			<li>See the message get displayed on that console tab.</li>
+		</ol>
+
 		<script src="libs/require.js" data-main="main"></script>
 	</body>
 </html>

kit/example-7/main.js

@@ -1,15 +1,22 @@
+/**
+ *  require is global now, thus can be accessed by window.require;
+ *  Require.js config API, takes require.js configuration object.
+ */
 requirejs.config({
-    paths: {
-        app: 'app'
-    }
+	paths: {
+		app: 'app'
+	}
 });
 
+/**
+ *	Require.js onError method to handle Async timeout error.
+ */
 requirejs.onError = function(err) {
-    if (err.requireType === 'timeout') {
-        alert("error: " + err);
-    } else {
-        throw err;
-    }
+	if (err.requireType === 'timeout') {
+		alert("error: " + err);
+	} else {
+		throw err;
+	}
 };
 
-requirejs(['app/init']);
+require(['app/init']);

kit/example-8/app/init.js

@@ -1,10 +1,18 @@
+/**
+ *	The goal of this file is to provide the basic understanding:
+ *	-> 	How to bust require.js cache.
+ *
+ *	How to run this example.
+ *	1. Open Example-8.html in browser.
+ *	2. Press F12, go to console tab.
+ *	3. See the message get displayed on that console tab.
+ */
+
 define(["config"], function(config) {
 
 	"use strict";
 
 	var url = config.url;
-
-	console.log(url);
-
+	console.log("Global Url: ", url);
 
 });

kit/example-8/config.js

@@ -1,3 +1,7 @@
+/**
+ *	@module: Global object; use to store global application setting.
+ */
+
 define([], function() {
 
 	"use strict";
@@ -6,5 +10,4 @@ define([], function() {
 		url: "http://www.google.com"
 	};
 
-
 });

kit/example-8/index.html

@@ -1,11 +1,22 @@
 <!doctype html>
 <html>
 	<head>
-		<title>Example 7</title>
+		<meta charset="utf-8">
+		<title>Example 8</title>
+		<link rel="stylesheet" type="text/css" href="../styles.css">
 	</head>
 	<body>
 
-		<h1>Require.js Integration.</h1>
+		<h1>JavaScript Module Loading using Require.js</h1>
+
+		<p class="lead">How to run this example.</p>
+
+		<ol>
+			<li>Open Example-8.html in browser using any HTTP-SERVER.</li>
+			<li>Press F12, go to console tab.</li>
+			<li>See the message get displayed on that console tab.</li>
+		</ol>
+
 		<script src="libs/require.js" data-main="main"></script>
 	</body>
 </html>

kit/example-8/main.js

@@ -1,16 +1,28 @@
+/**
+ *  require is global now, thus can be accessed by window.require;
+ *  Require.js config API, takes require.js configuration object.
+ *
+ *  @config-options:
+        -> deps: Load & executes the dependencies file rightaway in Async way.
+        -> callback: This function will get executed immediately after loading the deps files.
+        -> urlArgs: Appends query string for each loading file; This feature can be used to Require.js cache bust.
+ */
 requirejs.config({
     paths: {
         app: 'app'
     },
 
     deps: ["app/init"],
     callback: function() {
-    	console.log("In callback");
+        console.log("In Requirejs callback api method");
     },
 
     urlArgs: "bust=" + (new Date()).getTime()
 });
 
+/**
+ *  Require.js onError method to handle Async timeout error.
+ */
 requirejs.onError = function(err) {
     if (err.requireType === 'timeout') {
         alert("error: " + err);