Skip to main content

RequireJS: Application routing

Find the previous episode here.

Checkout the part2.0 branch
git checkout -b part2.0 origin/part2.0


In this section we will look into how a routing can be done. For this we are using another lightweight routing framework Page.js.  First install it using bower.

bower install visionmedia/page.js
We already had added the page in config.js. Now we need to create a router.js which will be in router folder.  
define(['page'], function(page) {

});
We will create a blank module with loading the page framework. Here we use the Module ID for the module which we defined in config.js. You could use the url also like "bower_components/page/page" But it would be better if a module id us used.

NOTE: In requireJS the .JS extension will not be used.

Next we will require the router module in app.js.
define(['config'], function(config) {
 "use strict";
 require(['router/router']);
});
This will load the router module after loading the config module.
Now we will look into the router module.
page('*', routerFn);
    page.start();
    function routerFn(ctx) {
     if (ctx.hash === 'home') { 
      require(['modules/home/HomeCtrl'], function(home) {

      });
        }else if (ctx.hash === 'employee') {
            
        }else if (ctx.hash === 'project') {
            
        }else {
         page('#home');
        }
    }
It's completely based on the path.js . You could refer the docs. We are starting the router and check the hash in the context and loading the appropriate module. Here we check the "#home" and loading the Home Module.
In HomeCtrl.js we will add the functionalities. 
define([], function() {
 function start(){
  alert("home");
 }

 return{
  start : start
 };
});
Start will work as an constructor. As soon as the module and it's dependencies were loaded the it will start execute the code inside the function. The return object is necessory to access the start function from outside the module. You could read more of javascript scope here.
Next the home module start function need to called from router.
require(['modules/home/HomeCtrl'], function(home) {
       home.start();
      });
You could click the home link and see the alert is working.
So our routing is complete and we will look into templating the home module in next part.

Comments

norhan said…

نجار ابواب بالرياض نجار بالرياض
تركيب ستائر بالرياض شركة تركيب ستائر بالرياض
تنظيف مكيفات بالرياض شركة تنظيف مكيفات بالرياض
شركة تنظيف افران الغاز بالرياض شركة تنظيف افران بالرياض

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…