Node.js + Express – Tutorial – PugJS Templating Engine (formerly JADE)

00:00:00 I am welcome back to you no chance with
00:00:03 you I promise that we would have a look
00:00:05 at the different templating engines and
00:00:07 I'm going to start with shade which is
00:00:10 the default engine that shipped with our
00:00:12 what our boiler plate here basically we
00:00:15 set up I want to introduce you to that
00:00:17 language how it works or how does
00:00:19 templating engine works and how we can
00:00:22 create our HTML files with it and output
00:00:25 type content dynamically there let's
00:00:27 start
00:00:28 I open the lay out Dutch shade file in
00:00:32 our fuse folder and this is the kind of
00:00:35 route layout that our earth use are
00:00:37 extending and here's the first feature
00:00:40 we can well extend layouts and insert
00:00:43 content dynamically so here for example
00:00:46 in the layout the shape while providing
00:00:48 a bicycle basic skeleton for all our
00:00:51 layouts this is a basic HTML document
00:00:55 skeleton and there we can anomaly enter
00:00:58 well the specific content of our other
00:01:02 layouts we'll get back to this a second
00:01:04 because now you might wonder this is our
00:01:06 HTML skeleton it doesn't really look
00:01:08 like HTML right that's one of the most
00:01:11 important things about Jade we don't use
00:01:14 the standard HTML tags there but we use
00:01:18 indentation to structure our document so
00:01:22 the tag names are the same you have our
00:01:25 doctype HTML at the beginning but at a
00:01:27 normal HTML probably would have like
00:01:29 like days right this would be how it is
00:01:32 written a normal HTML type element and
00:01:34 yeah document our HTML element might
00:01:37 look like this and also we would have
00:01:40 closing tags we don't have to some shade
00:01:43 we don't have the smaller and greater
00:01:46 signs to create our tags which has tag
00:01:49 names and we use indentation to make
00:01:52 clear in which well level will currently
00:01:55 add and how we nest elements so we don't
00:01:57 have opening and closing tags we only
00:02:00 have the tag name and then you can think
00:02:02 of
00:02:03 all these tags which are indented one
00:02:05 indentation to the right are inside say
00:02:08 she melted therefore all these two
00:02:12 elements here are inside the head tag
00:02:14 and this lot of thing which I will
00:02:17 explain the second is inside the body
00:02:19 tag so for example if I want to create
00:02:23 an unordered list here I would create
00:02:25 our run or delays it as the default HTML
00:02:28 select your element tag just without
00:02:31 well the greater and smaller side
00:02:35 operators this is my own route list now
00:02:38 I'll hit enter it automatically indents
00:02:40 for me otherwise I would have chest you
00:02:42 well go one indentation to the right if
00:02:45 you read my list item and well now I
00:02:48 want to enter some text I want to
00:02:50 display with with the opening and
00:02:52 closing list item tag I just have its
00:02:55 base to have an empty space here and
00:02:57 then I enter my my text whenever I want
00:03:01 to output just like that normal text now
00:03:03 if I save this and reload this page you
00:03:07 can see we now get this bullet point
00:03:09 here and if I have a look at the source
00:03:11 code we can see it's inside this
00:03:13 unordered list element this is basically
00:03:16 how we structure our code here we were
00:03:19 using this indentation and we're
00:03:21 outputting text between two elements
00:03:23 just by writing it behind the element of
00:03:27 an empty space between now if we have
00:03:30 more text and we don't want to like
00:03:32 enter this all in one line you will say
00:03:35 like this it's very very long it can
00:03:38 also enter a new line but now we would
00:03:41 think of this as a new tag which you
00:03:43 would not recognize therefore I enter a
00:03:45 dot here indent indent is to the right
00:03:49 and now I can have more lines here if I
00:03:52 save this and reload you see you get
00:03:55 this new list item and all this text is
00:03:57 inside this one list item element here
00:04:00 even though with multiple lines here if
00:04:03 I remove the dot you can see now it's
00:04:06 picking this are separate elements can
00:04:08 already see you here my editor and if I
00:04:10 will
00:04:10 well it's kind of broken because we have
00:04:14 this DSM whatever element which are
00:04:16 obviously not recognized so the start
00:04:19 here is important to have a multi-line
00:04:21 string following this tag so I hope this

00:04:25 is clear we use our HTML tags here how
00:04:28 invitation is important for nesting all
00:04:32 these elements and that we don't have to
00:04:34 open enclosing elements now we can out
00:04:36 text there now you might say okay this
00:04:41 is very nice
00:04:41 but I also might have some CSS classes
00:04:45 or some attributes I want to attach
00:04:47 right well you sure have so let's go one
00:04:52 to the left so that we run the same lab
00:04:54 less unordered list and here I want to
00:04:58 create an input element and it should be
00:05:00 of type text how do I do this we use
00:05:05 parentheses for this now in these
00:05:08 parentheses we can specify all
00:05:10 attributes you want to attach this HTML
00:05:13 element Blahnik type equals and then
00:05:18 string text let me save this and reload
00:05:25 no now we get this input element here
00:05:30 and as you can see you got this type
00:05:32 text element attached to it now if you
00:05:34 also went to want to add a class and
00:05:36 let's say an ID we do this a class set
00:05:42 by just adding a dot and then the class
00:05:44 name so class name this will add the CSS
00:05:47 class class name and then if we had a
00:05:50 hash tag we can't add an ID saved us
00:05:54 know again inspect this as you can see
00:05:58 it has the ID Eddie ID and the class
00:06:01 class name if you're using a mat which
00:06:06 is a plug-in for many editors which you
00:06:08 see that the – tool allows you to write
00:06:10 kilobyte or an engine or Mille in their
00:06:13 HTML tags by just writing dot class name
00:06:16 getting tablet
00:06:17 if that's a similar syntax here were
00:06:21 adding CSS class with a dot in front of
00:06:24 the name and IDs with a hashtag in front
00:06:27 of the name so that's one important
00:06:29 thing now here's another important thing
00:06:32 in the title of our layout here you see
00:06:35 that I got title equal and not titled
00:06:38 space if I remove the equal sign I
00:06:41 reload this page watch this tile on the
00:06:44 tab here it's now titled if I add the
00:06:48 equal sign and reload it's expressed
00:06:52 because title if we have an equal sign
00:06:56 right after the tag name refers to a
00:07:00 variable which is injected so to say
00:07:03 into this template which is added and it
00:07:06 is done through well known in this case
00:07:08 you're in our index wrote here what
00:07:11 we're rendering already x-file referring
00:07:14 you to our index layout or index jade
00:07:18 file we're setting this title variable
00:07:20 Express so if it changed this year to
00:07:23 cool huh and save this and reload o
00:07:29 restart my server and then reload you
00:07:34 can see I got cool huh so this is how we
00:07:37 insert variables this chava script
00:07:41 object already set is the last video of
00:07:42 the thing into our template and in the
00:07:45 template we cannot output it with this
00:07:49 but by using just a variable name we set
00:07:52 in this chava script object but this
00:07:53 equal sign is important to tell Jade hey
00:07:55 don't render the following thing as text
00:07:57 use this variable is a variable and use
00:08:01 whatever this variable contains now
00:08:05 report the feature is we might have if
00:08:09 statements here so we might have if
00:08:12 let's say condition is true then we want
00:08:17 to display just let's say paragraph
00:08:20 which says it's true obviously we don't
00:08:24 have condition yet and you could either
00:08:27 just specify in a row
00:08:29 and add another variable you let me do
00:08:32 this condition should be let's say it's
00:08:35 true restart the server and reload this
00:08:38 page now you can see it's true and if I
00:08:41 set it to false here and again restarted
00:08:46 do this it's gone even though it's still
00:08:49 in my shade farm because here we check
00:08:53 on this condition very important now
00:08:58 this is we can if use if conditions by
00:09:02 the way we can also define variables
00:09:05 inside this shade template if we need
00:09:07 you for any reason we can quickly do
00:09:10 this by adding a – a – a den of our
00:09:12 condition equals true now this is always
00:09:17 true if I and I only does the template
00:09:20 that we need to know need to restart my
00:09:22 server if I'm not reload we can again
00:09:24 see this even though we're still passing
00:09:27 it as false here but I'm overwriting it
00:09:29 in my layout by well setting it
00:09:32 basically as a new variable okay so this
00:09:35 is clear we can set variables we can use
00:09:37 these control structures we are
00:09:39 obviously not classic HTML tags or so

00:09:44 tags but added by try and change
00:09:46 templating engines
00:09:47 we may also loop so let me say I have a
00:09:53 number variable oops
00:09:55 thank you variable which I will call
00:09:59 just any array and this should just be
00:10:04 well an array of three numbers now
00:10:07 notice that I never have a semicolon
00:10:09 anything like this at the end because in
00:10:13 Jai templating engine you do everything
00:10:16 with indentation there is no need to
00:10:18 tell what an end a word when a line ends
00:10:21 because what indentation and line breaks
00:10:24 are the way how you structure your
00:10:26 element or your document so this is my
00:10:30 variable and now I want to create a new
00:10:37 loop I can say for each value this
00:10:40 we'll be dynamically created in my any
00:10:43 array here I want to do something let's
00:10:48 say I wanted to long after the new
00:10:50 paragraph with this value now again
00:10:53 using this equal sign make sure I don't
00:10:55 want to output a text of value but I
00:10:57 want to refer this value variable which
00:11:00 I'm creating here so let me save this
00:11:03 and reload and now you can see I got one
00:11:05 two three here just how we use loose now
00:11:08 the last important thing I want to cover
00:11:10 this with you is this block thing maybe
00:11:13 you already wondered that in this
00:11:15 index.js file in our route we're
00:11:18 rendering a route or a few called index
00:11:20 and we do have an index file here in
00:11:23 next shade but I was making all changes
00:11:27 in the layout of change file and yet
00:11:29 well it appeared here the reason is let
00:11:34 me get rid of all of that that as I said
00:11:37 at the beginning this layout serves as
00:11:40 our basic layout as the skeleton which
00:11:42 outer layers reuse and extend and add
00:11:45 their content into it and we can provide
00:11:48 basic hooks in our skeleton where we
00:11:51 want our inheriting layouts or views to
00:11:55 be able to insert content we define such
00:11:58 hooks with block keyword so we're
00:12:02 setting block content here and this
00:12:04 means this is a Content block which can
00:12:07 be used by our views extending this
00:12:10 layout to enjoyed something let's see
00:12:14 how this works in the index touch a file
00:12:16 here you can see we're having a
00:12:20 declaration begin moves as extends
00:12:22 layout which just says this view this
00:12:25 document is based on this layout of a
00:12:29 file it's the same but add something to
00:12:31 it it inherits from this file so we're
00:12:34 extending the slay out this layout name
00:12:37 obviously has to match this layout name
00:12:39 here before the dot shade and then we're
00:12:42 saying and what we add something
00:12:44 document but I can't just write it here
00:12:46 right this doesn't not work because this
00:12:50 layer Chaffin is closed in itself we
00:12:53 only provide these hooks where an
00:12:56 extending layout may enter something so
00:12:59 recording this blog content here and in
00:13:02 here work again having this blog content
00:13:05 and by desperate and if I hey I want to
00:13:08 enter something into this blog content
00:13:11 and this is what I do insert I again
00:13:15 insert a title expressed along that's
00:13:18 why it's appearing YouTube and then
00:13:20 again I have a paragraph with again
00:13:22 using this title oh and here we see
00:13:25 another notation if we have a mixture of
00:13:28 normal text add a variable we enter this
00:13:32 variable by using hashtag and then curly
00:13:35 braces and the variable name between the
00:13:38 curly braces too well basically injure
00:13:41 this variable T content of this variable
00:13:43 inside a normal text this is how we work
00:13:47 with the J templating engine to serve
00:13:49 the very basics and I will start working
00:13:52 with that in our no chairs projects but
00:13:55 I will show our templating language is
00:13:57 food out the next week is two so I hope
00:14:01 this helps you understand this
00:14:04 templating language and of course you
00:14:06 will also learn more when we're actually
00:14:08 using it in the next videos see you
00:14:10 there bye

You may also like