RequireJS – Environment Setup

RequireJS – Environment Setup ”; Previous Next In this chapter, we will understand how to set up the environment for RequireJS. For this, you need to download the latest version of RequireJS library. You can download either the minified version or detailed version. After downloading, we need to include the require.js file in your libs folder and the structure of your project should be as shown below − projectname/ |–index.html |–libs/ |—main.js |—require.js |—helper/ |—-util.js We need to define an html file as index.html where RequireJS is loaded as shown below. <html> <head> <script data-main = “libs/main” src = “libs/require.js”></script> </head> <body> <h1> RequireJS Sample Page </h1> </body> </html> Note that only require.js with a RequireJS call is included in the script tag to load the script. RequireJS in Node There are two ways to get the Node adapter. npm − You can install the latest release of requirejs from the command prompt as shown below. npm install requirejs Download r.js − You can download the r.js file from the download page and source from r.js repository page. Print Page Previous Next Advertisements ”;

RequireJS – Home

RequireJS Tutorial PDF Version Quick Guide Resources Job Search Discussion RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming. It also helps to improve the speed and quality of the code. This tutorial is intended to make you comfortable in getting started with RequireJS and its various functions. Audience This tutorial is designed for software programmers who aim to learn the basics of RequireJS and its programming concepts in simple and easy ways. This tutorial will walk you through the different components of RequireJS with suitable examples. Prerequisites Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Document Object Model (DOM) and any text editor. As we are going to develop a web based application using RequireJS, it will be good if you have an understanding on how internet and web based applications work. Print Page Previous Next Advertisements ”;

RequireJS – Plugins

RequireJS – Plugins ”; Previous Next RequireJS contains a small set of plugins which allow loading various types of resources as dependencies. Following is a list of available plugins in RequireJS − text domReady i18n CSS loading text The text plug-in is used for loading text based resources asynchronously which is mainly used for inserting the HTML content in JavaScript files. It can be loaded when you use the text! prefix in any require or define module call and pass the file extension to the plug-in. Compare to normal module loading, the text plug-in loads modules using XHR and will not add the code to the header as a script tag. The text file resource can be included as dependency in the code as − require([“mymodule”, “text!mymodule.html”, “text!mymodule.css”], function(mymodule, html, css) { //the html and css variables will be the text //of the mymodule.html file and mymodule.css files respectively } ); domReady The RequireJS can be used to load scripts before DOM is ready and developers can interact with DOM, only when scripts load completely. Sometimes scripts can be loaded before DOM is ready. So, to overcome this problem, RequireJS provides modern approach called DOMContentLoaded event which calls the domReady function once DOM is ready. require([”domReady”], function(domReady) { domReady(function() { //the domReady function is called when DOM is ready //which is safe to manipulate DOM nodes in this function }); }); i18n It can be used with multiple locales that provide i18n bundle support which will be loaded automatically when a module or dependency specifies “i18n!” prefix. To make use of this, download it and put it in the same directory where your main JavaScript file is present. Place this plug-in in the directory called “nls” to locate your localization files. For instance, assume that we have one js file called country.js with the following content and place it in the directory as mydirectory/nls/country.js − define({ “root”: { “india”: “india”, “australia”: “australia”, “england”: “england” } }); You can add specific translation to a file by using fr-fr locale and the above code will change as − define({ “root”: { “title”: “title”, “header”: “header”, “description”: “description” }, “es-es”: true }); Next, specify the file at mydirectory/nls/es-es/country.js with the following content − define({ “root”: { “title”: “título”, “header”: “cabecera”, “description”: “descripción” }, “es-es”: true }); You can set the locale by passing it to the plugin with the help of module config in the main.js file as shown below − requirejs.config({ config: { //set the config for the i18n plugin i18n: { locale: ”es-es” } } }); CSS loading using RequireJS You can use some plug-ins to load the CSS file by just appending to the header link to load the CSS file. The CSS can be loaded by using your own function as shown below − function myCss(url) { var mylink = document.createElement(“mylink”); mylink.type = “text/css”; mylink.rel = “stylesheet”; mylink.href = url; document.getElementsByTagName(“head”)[0].appendChild(mylink); } Print Page Previous Next Advertisements ”;