Implementing jquery mobile in express js application with jade template

in layout.jade view file

doctype 5
html
         head
                 title= "MyMobileApp"
                 link(rel='stylesheet', href='/stylesheets/style.css')
                 link(rel='stylesheet', href='/stylesheets/jquery.mobile.css')
                 script(src='/javascripts/jquery.mobile.js')
                 script(src='/javascripts/jquery.js')
                 <meta name="viewport" content="width=device-width, initial-scale=1">
         body(class="ui-mobile-viewport ui-overlay-c")
                 div(data-role='page')
                 div(data-role='header',class='ui-header ui-bar-b')
                          h1 
                                   p My Sample Application
                 div(data-role='content',class='ui-content')
                          block content
                 div(data-role='footer',class='ui-header ui-bar-b')
                          h4= "Page Footer"

now, in index.jade view file,


extends layout

block content
p page content goes here

careful on indenting. jade template reacts the most with indentation.

Advertisements

Directories of an express application

express_directory

The directory structure of a typical express application is,

  1. Public: – public assets are stored in this folder. Inside this folder, there are subfolders for images, javascripts and style sheets.
  2. Routes:-  express is best known for quick routing, the routes folders store the routing information.
  3. Views:- views folder stores view files.  You may find jades, jhtml or ejs files.

Also node_module folder has the modules for the application, and app.js is the main entry file for your application.

Installing express js and setting up an express application

Hello everybody and good evening. Now today I am going to discuss (form a practical prospective) about a node.js framework, which is called express js. You can find the framework at http://expressjs.com/. So let’s install the framework.

Assume that you have installed node.js already. Node.js has a command line tool called npm, which installs node.js packages. We will use npm to install express framework. (I will discuss about node in a latter post. I hope)

In the command prompt, type:

        npm install -g express

This will install express framework globally in your PC.  Now you can use express per project basis, but in this post I will focus on express command line tool.  Now type in command prompt,

        express -h

you will see the uses and option of express in command prompt.

Now we will create an express app. We will use jade template engine which is the default option for creating an app with express command tool. Just go to a suitable place in your PC, better with command prompt, if not then open command prompt at that folder and type in command prompt,

        express myApp

now, install dependencies (as instructed which you executes the last command)

        cd myApp
         npm install

npm install command will install the dependencies at node_modules folder. You can check that. Also, you can see package.json file. That file stores the dependency package for this project.

ok, now type,

        node app

now at the command prompt you will see express server is running. Open browser, type, localhost:3000 (you will see in command prompt, if you are using windows 7, you can use 127.0.0.1:3000, I have not tested in windows 8). You will see the output in browser.