Code Monkey home page Code Monkey logo

express-mvc-ts's Introduction

express-mvc-ts

.NET MVC-like controller structure for Express.js in Typescript

New in version 0.9.x

Version 0.9.x brings new features that break existing code, initially this version will be tagged with beta, so until more testing is done it wont be available on the latest tag.

  • Route method parameters are now populated. The logic is the following:
    1. if the parameter type is either Request or Response, the current instances are injected
    2. if there is an annotation, act accordingly (inject query,form,header,router,body values)
    3. if the parameter type is a class, try to instantiate it with the help of the dependency manager
    4. otherwise try injecting the value from

Words of advice

Since this project is fairly new and it changes a lot even between minor versions, it's recommended that you set a specific version as dependency in your project.json.

This library depends on the experimentalDecorators and emitDecoratorMetadata typescript compiler option which are experimental and may change in the future rendering this library useless.

Purpose

Allows you to write better structured, declaration-oriented and more concise code for your ExpressJS application. The library is mostly inspired by the ASP.NET MVC project with many names being identical.

Getting started

  • Add the library to your project:
npm install --save express-mvc-ts
  • Grab the typescript definition file (express-mvc-ts.d.ts) from the github page and add it to your project. No definitelytyped/tsd/type/@types support yet.
  • Add the experimentalDecorators and emitDecoratorMetadata compiler options to your typescript configuration with the value true.
  • Transform your existing ExpressJS code:
app.get('/', function (req, res) {
    refererService.saveReferer(req.query.referer);
    res.render('home');
});

app.get('/about', function (req, res) {
    if (req.get('Content-Type') === 'application/json') {
        res.json({ description: "This is my site." });
    } else {
        res.render('about');
    }
});

app.get('/contact/form(/:reason)?', function (req, res) {
    res.render('contact/index', { reason: req.params.reason });
});

app.post('/contact/api/save', function (req, res) {
    var contactRequest = req.body;
    myDataStore.saveContactRequest(contactRequest)
        .then(() => res.json({ success: true }))
        .catch(() => res.json({ success: false }));
});

to Controllers *:

import { Controller, Inject, Route, HttpGet, HttpPost, FromHeader } from 'express-mvc-ts';
import { MyRefererDataService } from '../services/refererServices';

@Inject
@Route('')
export class HomeController extends Controller {

   @HttpGet
   public index(referer: string, refererService: MyRefererDataService) {
       refererService.saveReferer(referer);
       return this.view();
   }

   @HttpGet
   public about( @FromHeader('Content-Type') contentType: string) {
       if (contentType === 'application/json') {
           return this.json({ description: "This is my site." });
       } else {
           return this.view('about');
       }
   }
}

@Inject
export class ContactController extends Controller {

   public constructor(private dataStore: MyCoolDataStoreService) {
       super();
   }

   @HttpGet('form(/:reason)?')
   public form(reason: string) {
       return this.view('contact', { reason });
   }

   @HttpPost('api/save')
   public save( @FromBody contactRequest: IContactRequest) {
       return this.dataStore.saveContactRequest(contactRequest)
           .then((response) => this.json({ success: true, response }))
           .catch(() => this.json({ success: false }));
   }
}
  • Invoke the setup method on your app *:
// 1. Include the library
import * as mvc from 'express-mvc-ts';

// 2. Instantiate and configure your ExpressJS app
var app = Express();
// ... configure

// 3. Call mvc.setup on your app
mvc.setup(app);

// 4. Profit
app.listen(); 

* these code samples were not tested, nor do they represent viable real-life scenarios. Detailed samples are coming soon

Caveats / Todos

  • The default value for the view response is always index, this should be the name of the method, like in .NET MVC.
  • There is currently no point specifying method parameters as they will not be populated. The plan is to ultimately have request parameters bound to method parameters like ?name=John => public profile(name: string) { this.request.query.name === name; }
  • If the resulting code is minified, route method parameters may not work since variable names will be mangled/shortened. To avoid this, specify the names explicitly (i.e. method(@FromQuery('search') search:string)).
  • Probably a bunch of other things...

express-mvc-ts's People

Contributors

gasparportik avatar xyunsh avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.