Skip to main content

RequireJS: Getting Started

Modular programming helps to divide the application code based on the module. These programming style helps to manage as well develop the application easily. Requirejs is lightweight framework used in javascript to develop applications using the modular programming.

RequireJS is lightweight javascript framework which enables AMD(Asynchronous Module Loader). RequireJS helps to load javascript file and modules asynchronously. Apart from using in browser , it’s also be used alongside in Node projects.

Why RequireJS?
It’s lightweight, scalable, comes with an excellent optimising tool. Apart from these the use of  RequireJS comes handy when you need to divide and load javascript files and modules whenever they need.
Suppose you had an application which have a home page, employees, and projects module. And had 3 javascript files like home.js, employees.js and projects.js. Normally in single page application you need to load these files when the page loads. Like

<script src="home.js"></script>
<script src="employees.js"></script>
<script src="projects.js"></script>

Suppose you need a framework like jquery datatables for employees. You will have load the frameworks also in the first load. If the user go to projects, the page will load entire js files .

Here the comes the requirejs for the rescue. What requireJs do is, it will load only selected files for the site. Suppose the user is in home page , it will not load the employee.js and projects.js and also the datatable framework. It increases the performance the speed of the site.


  1. Node
  2. gulp
  3. Bower
Source Code
  1. Run the command inside blog-require npm install
  2. Next run the command bower install  to install front end dependencies
  3. gulp serve to run the server

Getting started
The application files are inside the dev folder. Open the index.html and go to the end of the file . You could see a

<script data-main="app" src="bower_components/requirejs/require.js"></script>
It loads the app.js file. In require the extension will not be used. So instead of app.js it will only say “app”. app.js is the entry point to the application Next open the app.js file.
define(['config'], function(config) {
 "use strict";
Here in we only loading the config file. Note that we are not using .js extension. Inside the function you will get an object of the loaded module. Lets look in to config.js.
    paths: {
        jquery: 'bower_components/jquery/dist/jquery.min',
        page: 'bower_components/page/page',
        text : 'bower_components/requirejs-text/text',
        underscore : 'bower_components/underscore/underscore-min'
Here we are configuring the requirejs application. In path you could specify the modules you need to load. Later we could use the names instead of the full path when we load more modules. It’s just specifying the libraries we need
Note: When we load modules using RequireJS, it’s means we need that module in the application. It’s a required dependency. So if the module is not available it will throw an error and stops execution.
We will continue to add modules and check how it’s loaded in next post.


Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done.
Am using
PostgreSQL 9.1WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists
1. Apache Version :2.2.17  2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin.
Install WAMP server where ever you need.
Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation.

At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error.

Your PHP installation does not support PostgreSQL. You need to recompile PHP using the --with-pgs…

Angular - 4 year road map

AngularJS is one of the most popular JavaScript frameworks in the web. The Google developed framework is considered as one of the easiest framework to kick start a project. Two way binding and the dependency injection is the highlight of this framework.
My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4
One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interesting. …

Angular 4 - Modules, components and routing

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing.

You could check out the code from here.
git checkout -b part2.0 origin/part2.0
We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components.

npm install bootstrap@3
We need to add the bootstrap stylesheet in tha .angular-cli.json.

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Our first Module

Lets add a new module employee. Inside "src/app" run

ng generate module employee or
ng g m employee
Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also.
ng g m employee --routing
Time for component

It will create new employee module with its own routing.lets add a component for listing the employee. So inside employee folder run

ng g c empl…