Hide
Search Results

Configuring Routing

Time Estimate: 10 minutes

Difficulty Level: Beginning

Summary

This example shows how to configure routing for your Mojito application. In Mojito, routing is the mapping of URLs to mojit actions.

Implementation Notes

Before you create routes for your application, you need to specify one or more mojit instances that can be mapped to URLs. In the application.json below, the mapped_mojit instance of RoutingMojit is created, which can then be associated in a route defined in routes.json.

[
  {
    "settings": [ "master" ],
    "specs": {
      "mapped_mojit": {
        "type": "RoutingMojit"
      }
    }
  }
]

The example routes.json below associates the mapped_mojit instance defined in application.json with a path and explicitly calls the index action. If the controller for RoutingMojit had the function myFunction, you would use the following to call it: mapped_mojit.myFunction. Based on the custom-route route below, when an HTTP GET call is made on the URL http:{domain}:8666/custom-route, the index action is called from the custom-route instance.

[
  {
    "settings": ["master"],
    "custom-route": {
      "verbs": ["get"],
      "path": "/custom-route",
      "call": "mapped_mojit.index"
    }
  }
]

The name of the mojit instance is arbitrary. For example, the mojit instance mapped_mojit above could have just as well been called mojit-route. Just remember that the name of the mojit instance in routes.json has to be defined and have a mojit type in application.json.

You can also configure multiple routes and use wildcards in routes.json. The modified routes.json below uses the wildcard to configure a route for handling HTTP POST requests and calls the method post_params from the post-route mojit instance.

[
  {
    "settings": ["master"],
    "custom-route": {
      "verbs": ["get"],
      "path": "/custom-route",
      "call": "mapped_mojit.index"
    },
    "another-route": {
      "verbs": ["post"],
      "path": "/*",
      "call": "mojit-post-route.post_params"
    }
  }
]

The routes.json above configures the routes below. Notice that the wildcard used for the path of "another-route" configures Mojito to execute post_params when receiving any HTTP POST requests.

  • http://localhost:8666/custom-route
  • http://localhost:8666/{any_path}

Setting Up this Example

To set up and run configure_routing:

  1. Create your application.

    $ mojito create app configure_routing

  2. Change to the application directory.

  3. Create your mojit.

    $ mojito create mojit RoutingMojit

  4. To create an instance of RoutingMojit, replace the code in application.json with the following:

    [
      {
        "settings": [ "master" ],
        "appPort": 8666,
        "specs": {
          "mapped_mojit": {
            "type": "RoutingMojit"
          }
        }
      }
    ]
    
  5. To map routes to specific actions of the mojit instance, replace the code in routes.json with the following:

    [
      {
        "settings": ["master"],
        "root_route": {
          "verbs": ["get","post"],
          "path": "/",
          "call": "mapped_mojit.index"
        },
        "index_route": {
          "verbs": ["get"],
          "path": "/index",
          "call": "mapped_mojit.index"
        },
        "show_route": {
          "verbs": ["get","post"],
          "path": "/show",
          "call": "mapped_mojit.show"
        }
      }
    ]
    

    The mapped_mojit instance is created in application.json and configured here to be used when HTTP GET calls are made on the paths /index or /show.

  6. Change to mojits/RoutingMojit.

  7. Modify your controller to contain the index and show actions by replacing the code in controller.server.js with the following:

    YUI.add('RoutingMojit', function(Y, NAME) {
      // Builds object containing route information
      function route_info(ac) {
        var methods = "",
            name = "",
            action = ac.action,
            path = ac.http.getRequest().url,
            routes = ac.config.getRoutes();
        if (action === "index" && path === "/") {
          name = "root_route";
          routes.root_route.verbs.forEach(function(n) {
              methods += n + ", ";
          });
        } else if (action==="index") {
          name = "index_route";
          routes.index_route.verbs.forEach(function(n) {
              methods += n + ", ";
          });
        } else {
          name = "show_route";
          routes.show_route.verbs.forEach(function(n) {
              methods += n + ", ";
          });
        }
        methods = methods.toUpperCase();
        return {
          "path": path,
          "name": name,
          "methods": methods.replace(/, $/, "")
        };
      }
      Y.namespace('mojito.controllers')[NAME] = {
        index: function (ac) {
          ac.done(route_info(ac));
        },
        show: function (ac) {
          ac.done(route_info(ac));
        }
      };
    }, '0.0.1', {requires: ['mojito-config-addon', 'mojito-http-addon']});
    
  8. To display your route information in your index template, replace the content of index.hb.html with the following:

    <div id="{{mojit_view_id}}">
      <b>Route Path:</b> {{path}}<br/>
      <b>HTTP Methods:</b> {{methods}}<br/>
      <b>Route Name:</b> {{name}}
    </div>
    
  9. To display your route information in your show template, create the file show.hb.html with the following:

    <div id="{{mojit_view_id}}">
      <b>Route Path:</b> {{path}}<br/>
      <b>HTTP Methods:</b> {{methods}}<br/>
      <b>Route Name:</b> {{name}}
    </div>
    
  10. Run the server and open the following URL in a browser to see the index route: http://localhost:8666/index

  11. To see the show route, open the following URL in a browser:

    http://localhost:8666/show