Differences

This shows you the differences between two versions of the page.

--- javascript:jade [2014/03/18 00:13] – [Creating a simple web page] mithat
+++ javascript:jade [2014/03/18 03:40] – [Creating web pages] mithat
@@ Line 8: / Line 8: @@
 To use Jade, you must first have Node.js installed on your system. On Windows and MacOS, you can use an [[http://nodejs.org/download/|installer]]; on Linux, you should be able to [[https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager|use your package manager]]((See http://lovingthepenguin.blogspot.com/2013/10/node-no-such-file-or-directory.html for a potential gotcha on Debian-based systems.)).
-Once you have Node.js installed, you have the choice of installing it so it's available system-wide or only for a particular project. To make it available system-wide, open a terminal and enter: <code>npm install jade -g</code>
+Once you have Node.js installed, you have the choice of installing the Jade module so it's available system-wide or only for a particular project. To make it available system-wide, open a terminal and enter: <code>npm install jade -g</code>
 When I am learning new Node.js modules, I prefer to install them on a per-project basis. To do this, open a terminal in your project directory (or navigate to the directory) and enter: <code>npm install jade</code>
@@ Line 16: / Line 16: @@
 ==== Creating an HTML fragment ====
-=== jade.render ===
+=== Rendering strings in Jade to HTML ===
 The first thing we are going to do is use Jade to produce an HTML fragment from a string literal. This is done with the ''jade.render'' method.
@@ Line 22: / Line 22: @@
 var jade = require('jade');
-// Render an HTML fragment from a string literal
+// Render an HTML fragment from a string literal written in Jade.
-// written in Jade.
 var htmlFrag = jade.render('p Hello, world');
@@ Line 31: / Line 30: @@
 output: <code><p>Hello, world</p></code>
-=== jade.compile ===
+=== Compiling strings in Jade into functions ===
-You can also create function that when called will return the fragment with the ''jade.compile'' method.
+You can use the ''jade.compile'' method to create a function that when called will return the converted Jade.
 <file javascript compileFragment.js>
 var jade = require('jade');
-// Compile a function that produces an HTML fragment
+// Compile a function that produces an HTML fragment from a string
-// from a string literal written in Jade.
+// literal written in Jade.
 var frag = jade.compile('p Hello, world');
@@ Line 51: / Line 50: @@
 === jade.renderFile ===
-In a lot of cases, you will want to render code that is stored in a file rather than in a string variable or literal. You can do that with the ''jade.renderFile'' method.
+In a lot of cases, you will want to render code that is stored in a file rather than in a string literal or variable. You can do that with the ''jade.renderFile'' method.
 <file jade myFrag.jade>
@@ Line 61: / Line 60: @@
 var jade = require('jade');
-// Render an HTML fragment from a file
+// Render an HTML fragment from a file written in Jade.
-// written in Jade.
 var htmlFrag = jade.renderFile('myFrag.jade');
@@ Line 79: / Line 77: @@
 };
-// Render an HTML fragment from a file
+// Render an HTML fragment from a file written in Jade.
-// written in Jade.
 var htmlFrag = jade.renderFile('myFrag.jade', options);
@@ Line 88: / Line 85: @@
 output: <code><h1>Hello, there!</h1>
 <p>Nice to meet you.</p></code>
+You can (and should) also take anvantage of the callback that you can pass to ''jade.renderFile'' to handle errors:
+<file javascript renderFragmentFile_3.js>
+var jade = require('jade');
+options = {
+    pretty: true
+};
+// Render an HTML fragment from a file written in Jade.
+// Use callback to trap errors.
+var htmlFrag = jade.renderFile('myFrag.jade', options, function (err, html) {
+        if (err) {
+           throw(err);
+        }
+        return html;
+    });
+console.log(htmlFrag);
+</file>
 === Writing output to file ===
@@ Line 100: / Line 117: @@
 };
-// Render an HTML fragment from a file
+// Render an HTML fragment from a file written in Jade.
-// written in Jade.
+var htmlFrag = jade.renderFile('myFrag.jade', options, function(err, html) {
-var htmlFrag = jade.renderFile('myFrag.jade', options);
+        if (err) {
+           throw(err);
+        }
+        return html;
+    });
-// Write fragment to a file.
+// Write HTML fragment to a file.
-fs.writeFile('myFrag.html', htmlFrag);
+fs.writeFile('myFrag.html', htmlFrag, function(err) {
+    if (err) {
+        throw(err);
+    }
+});
 </file>
@@ Line 115: / Line 140: @@
 </code>
-===== Creating a simple web page =====
-In this section, we will use Jade to build a simple but complete web page. It will serve as an introduction to some fundamental Jade language concepts.
-<file jade myPage.jade>
-doctype html
-html
-    head
-        title A Simple Site
-    body
-        h1 Hello there!
-        p Nice to meet you.
-</file>
-<file javascript buildMyPage.js>
-var jade = require('jade');
-var fs = require('fs');
-options = {
-    pretty: true
-};
-// Render an HTML page from a file
-// written in Jade.
-var html = jade.renderFile('myPage.jade', options);
-// Write HTML to a file.
-fs.writeFile('myPage.html', html);
-</file>
-output:<code>
-$ cat myPage.html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>A Simple Site</title>
-  </head>
-  <body>
-    <h1>Hello there!</h1>
-    <p>Nice to meet you.</p>
-  </body>
-</html>
-</code>
-The basic idea is that Jade uses a shorthand HTML syntax, and indentation is used to nest elements.
-This should be enough to make you comfortable reading the [[http://jade-lang.com/reference/|Jade Language Reference]].