
<h2>
  <a href="http://html2jade.org/" target="_blank">http://html2jade.org/</a>
</h2>
<p>Nice site powered by jade, convert html to jade template and vice versa.</p>
<h2>
  <a href="http://naltatis.github.io/jade-syntax-docs/" target="_blank"
    >http://naltatis.github.io/jade-syntax-docs/</a
  >
</h2>
<p>Jade Template Syntax Documentation by Example</p>


Few Links About Convert Jade to Html and Vice Versa


<p>
  This is a tutorial on how to create a contact form with AngularJS at
  <a
    href="https://github.com/keystonejs/keystone-classic#getting-started"
    target="_blank"
    rel="noopener"
    >keystone.js</a
  >. It is for the <strong>keystone-classic</strong>, not the latest
  <a
    href="https://github.com/keystonejs/keystone#getting-started"
    target="_blank"
    rel="noopener"
    >keystone</a
  >. The <strong>keystone-classic</strong> is built on top of node.js,
  express.js on server-side, and database using MongoDB. Use Jade to translate
  the template and translate server-side data to the UI side. It has the contact
  form, but this blog shows how to build Angularjs form inside the
  <strong>keystone-classic</strong>. Don't ask why, it is just something comes
  into your mind, and want to give it a try, but hopefully this would help you
  if this is what you're looking for.
</p>
<h2>Define API Routing</h2>
<p>
  We will create a contact form, so first we'll need to define the API route at
  keystone.js server side./p&gt;
</p>
<p>
  We gonna define an HTTP post <code>/api/contact</code> for our angular form to
  use later to post contact form data. The second and third parameter is to
  define API routing at keystone.js.<code>routes.views.contact.create</code>
  is a point to a file that contains the actual API code.
</p>
<pre><code class="language-javascript">// index.js
exports = module.exports = function (app) {
app.post('/api/contact', keystone.initAPI, routes.views.contact.create);
}
</code></pre>
<h2>API backend code</h2>
<p>
  At the backend of the API code, we call our <code>Enquiry model</code> to
  create data then return either error or success message based on the logic.
</p>
<pre><code class="language-javascript">
exports.create = function (req, res) {
    var application = new Enquiry.model(),
        updater = application.getUpdateHandler(req);

    updater.process(req.body, {
        flashErrors: true,
        fields: 'name, email, phone, enquiryType, message',
        errorMessage: 'There was a problem submitting your enquiry:'
    }, function (err) {
        if (err) {
            res.apiResponse(err.errors);
        } else {
            res.apiResponse();
        }
    });
}
</code></pre>
<h2>Enquiry Model - MongoDB document</h2>
<p>
  Define MongoDB schema, so Keystone.js is using MongoDB for database storage.
  You can host your own MongoDB or use any MongoDB cloud service. Keystone.js is
  also using npm package Mongoose to access MongoDB. Following is the code from
  keystone.js, I only modify a couple of things.
</p>
<pre><code class="language-javascript">
var keystone = require('keystone'),
	Types = keystone.Field.Types;

var Enquiry = new keystone.List('Enquiry', {
	nocreate: true,
	noedit: true
});

Enquiry.add({
	name: { type: Types.Name },
	email: { type: Types.Email },
	phone: { type: String },
	enquiryType: { type: Types.Select, options: [
		{ value: 'message', label: "Just leaving a message" },
		{ value: 'question', label: "I've got a question" },
		{ value: 'other', label: "Something else..." }
	] },
	message: { type: Types.Markdown, required: true },
	createdAt: { type: Date, default: Date.now }
});

Enquiry.schema.pre('save', function(next) {
	this.wasNew = this.isNew;
	next();
})

Enquiry.schema.post('save', function() {
	if (this.wasNew) {
		this.sendNotificationEmail();
	}
});

Enquiry.schema.methods.sendNotificationEmail = function(callback) {
	
	var enqiury = this;
	
	keystone.list('User').model.find().where('isAdmin', true).exec(function(err, admins) {
		
		if (err) return callback(err);
		
		new keystone.Email('enquiry-notification').send({
			to: admins,
			from: {
				name: 'someone is sending message',
				email: 'contact@mytech.com'
			},
			subject: 'New Enquiry for me',
			enquiry: enqiury
		}, callback);
		
	});
	
}

Enquiry.defaultSort = '-createdAt';
Enquiry.defaultColumns = 'name, email, enquiryType, createdAt';
Enquiry.register();

</code></pre>
<h2>Test the API</h2>
<p>
  Before creating any client-side code, you need to make sure the server-side
  API is available. Following this, I'm using Postman, a chrome extension tool
  for testing API. After you verified the result, now I'm ready to create an
  angular form app since the server is ready.
</p>
<p>
  <img
    src="http://res.cloudinary.com/dmwrakaup/image/upload/v1448875040/eafnpjdsbnbbomdr8vaw.png"
    alt=""
    width="614"
    height="483"
  />
</p>
<h2>Angular Form App Structure</h2>
<p>
  First, let's define the app structure, I'll define my angular form app as
  following. It'll contain two pages, one is a page for users to submit contact
  information. Another is the confirmation page.
</p>
<p><img src="https://d1p0mp3f1fx0hz.cloudfront.net/_9589oewgh.png" alt="" /></p>
<h2>Create Angular Javascript Code</h2>
<p>
  At the app.js, I define my pages, create and confirm the page's angular
  controller and Html. Also, define my module's name and this angular app's
  dependencies, which so far is the only route.
</p>
<pre><code class="language-javascript">
var contactUsApp = angular.module('dhe.contactUs', ['ngRoute']);
contactUsApp.config(["$routeProvider", function ($routeProvider) {
        'use strict';
        $routeProvider.
      when('/', {
            templateUrl: '/apps/contactUs/views/create.html',
            controller: 'createCtrl'
        }).
      when('/confirm', {
            templateUrl: '/apps/contactUs/views/confirm.html',
            controller: 'confirmCtrl'
        }).
      otherwise({
            redirectTo: '/'
        });
    }]);

</code></pre>
<h2>Create an Angular Controller</h2>
<p>
  Here we create an Angular controller, I only defined ui submit function, which
  is posting the UI form to the server-side API and redirect to the confirm
  page. To share scope information I create another service as scopeServcie.
</p>
<pre><code class="language-javascript">
/* globals contactUsApp */
contactUsApp.controller('createCtrl', 
    function ($scope, $http, $window, scopeService) {
    'use strict';
    function formPost() {
        if ($scope.contactForm.$valid) {
            $http.post("/api/contact", $scope.cu).success(function () {
                scopeService.cu = $scope.cu;
                $window.location.href = "#confirm";
            });

        }
        else {
        }
    }
    
    $scope.ui = {
        submit: formPost
    };
});
</code></pre>
<h2>Factory for share scope globally at the app</h2>
<p>
  This is just a code snippet for creating a scopeService that shared objects
  between controllers.
</p>
<pre><code class="language-javascript">
contactUsApp.factory('scopeService', 
    function () {
    'use strict';
    return {};
});
</code></pre>
<h2>Create Html page</h2>
<p>
  Compare to the controller part, HTML is a little more code. I need to add
  <code>ng-model</code> to the text box so angular validation will work. Also
  when the user submits the button add the <code>ng-click</code> to the
  createController's submit function.
</p>
<pre><code class="language-markup">
&lt;div class="container"&gt;
    &lt;h1&gt;Contact&lt;/h1&gt;
    &lt;p&gt;Do you need to contact me? You can just go to the message and write to me, rest of fields are all optional.&lt;/p&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-sm-8 col-md-6"&gt;
            &lt;form name="contactForm" novalidate&gt;
                &lt;input type="hidden" name="action" value="contact"&gt;
                &lt;div class="form-group"&gt;
                    &lt;label&gt;Name&lt;/label&gt;
                    &lt;input type="text" name="name.full" class="form-control" placeholder="(optional)" ng-model="cu.name"&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    &lt;label&gt;Email&lt;/label&gt;
                    &lt;input type="email" name="email" class="form-control" placeholder="(optional)" ng-model="cu.email"&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    &lt;label&gt;Phone&lt;/label&gt;
                    &lt;input type="text" name="phone" placeholder="(optional)" class="form-control" ng-model="cu.phone"&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    &lt;label&gt;What are you contacting about?&lt;/label&gt;
                    &lt;select name="enquiryType" class="form-control" ng-model="cu.enquiryType"&gt;
                        &lt;option value=""&gt;(select one)&lt;/option&gt;
                        &lt;option value="message"&gt;Just leaving a message&lt;/option&gt;
                        &lt;option value="question"&gt;I've got a question&lt;/option&gt;
                        &lt;option value="other"&gt;Something else...&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    &lt;label&gt;Message&lt;/label&gt;
                    &lt;textarea name="message" placeholder="Leave us a message..." rows="4" class="form-control" ng-model="cu.message" required&gt;&lt;/textarea&gt;
                &lt;/div&gt;
                &lt;div class="form-actions"&gt;
                    &lt;a class="btn btn-primary" ng-disabled="contactForm.$invalid &amp;&amp; contactForm.$dirty" ng-click="ui.submit()"&gt;Send&lt;/a&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h2>Angular Validation class</h2>
<p>
  Angular had added the following CSS class for style in a different case. Each
  following CSS class shows a different state of the ng-model.
</p>
<p>
  Detailed description checkout this
  <a
    href="https://docs.angularjs.org/guide/forms"
    target="_blank"
    rel="noopener"
    >link</a
  >.
</p>
<dl class="dl-horizontal">
  <dt><code>ng-valid</code></dt>
  <dd>the model contains a valid value</dd>
  <dt><code>ng-invalid</code></dt>
  <dd>the model contains an invalid value</dd>
  <dt><code>ng-valid-[key]</code></dt>
  <dd>
    the model contains a valid value, the key can be added as
    <code>$setValidity</code>
  </dd>
  <dt><code>ng-invalid-[key]</code></dt>
  <dd>
    the model contains an invalid value, the key can be added as
    <code>$setValidity</code>
  </dd>
  <dt><code>ng-pristine</code></dt>
  <dd>user has not used the control yet</dd>
  <dt><code>ng-dirty</code></dt>
  <dd>user already used the control.</dd>
  <dt><code>ng-touched</code></dt>
  <dd>the control has been blurred</dd>
  <dt><code>ng-untouched</code></dt>
  <dd>the control hasn't been blurred</dd>
  <dt><code>ng-pending</code></dt>
  <dd>any $asyncValidators are unfulfilled</dd>
</dl>
<h2>Angular Validation Style</h2>
<p>
  Following style is only when the user had entered something into the form and
  the form contains invalid input.
</p>
<pre><code class="language-css">
input.ng-dirty.ng-invalid, select.ng-dirty.ng-invalid, textarea.ng-dirty.ng-invalid{
    border: 1px solid #dd4b39;
}
</code></pre>
<h2>ConfirmController</h2>
<p>
  ConfirmController almost like just one line of code, basically using the
  scopeService create above to get the scope from the previous page,
  createController
</p>
<pre><code class="language-javascript">
contactUsApp.controller('confirmCtrl',  
    function ($scope, scopeService) {
    'use strict';
    $scope.cu = scopeService.cu;
});
</code></pre>
<h2>ConfirmController's HTML</h2>
<p>The confirmController's HTML just binds the scope to the UI.</p>
<pre><code class="language-markup">
&lt;article class="container"&gt;
    &lt;h1&gt;Contact&lt;/h1&gt;
    &lt;h3&gt;Thanks, I got your message...&lt;/h3&gt;
    &lt;div class="form-group" ng-show="cu.name"&gt;
        &lt;label&gt;Name: &lt;/label&gt;
        {{cu.name}}
    &lt;/div&gt;
    &lt;div class="form-group" ng-show="cu.email"&gt;
        &lt;label&gt;Email: &lt;/label&gt;
        {{cu.email}}
    &lt;/div&gt;
    &lt;div class="form-group" ng-show="cu.phone"&gt;
        &lt;label&gt;Phone: &lt;/label&gt;
        {{cu.phone}}
    &lt;/div&gt;
    &lt;div class="form-group" ng-show="cu.enquiryType"&gt;
        &lt;label&gt;Enquiry Type&lt;/label&gt;
        {{cu.enquiryType}}
    &lt;/div&gt;
    &lt;div class="form-group" ng-show="cu.message"&gt;
        &lt;label&gt;Message: &lt;/label&gt;
        {{cu.message}}
    &lt;/div&gt;
&lt;/article&gt;
</code></pre>
<h2>Load Script for Angular App</h2>
<p>
  I'm using jade, so the following is how I defined the angular script to my
  jade page. In production mode, should bundle all the script together. Also,
  for angular script loader and the order of how to script load. You only need
  to be aware of the first there javascript here,
  <code>angular.js, angular-route, app.js</code>. If you need to load any other
  angular app to your own app, you have to put that app before your app.js.
  That's the only rule for loading angular javascript in this way. But the rest
  of the script, controllers, services, views, directives, angular will take
  care of that. You only need to be aware of which one should be put first.
</p>
<pre><code class="language-javascript">
block js
	script(src='/js/vendor/angular.js')
	script(src='/js/vendor/angular-route.js')
	script(src='/apps/contactUs/app.js')
	script(src='/apps/contactUs/controllers/confirmController.js')
	script(src='/apps/contactUs/controllers/createController.js')
	script(src='/apps/contactUs/services/scopeService.js')
</code></pre>
<p>
  That's, the following is a sample image of how our two angular page contact
  form page will look like.
</p>
<p>CreateController</p>
<p>
  <img
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_g7blkl6wk.png"
    alt=""
    width="491"
    height="414"
  />
</p>
<p>ConfirmController</p>
<p><img src="https://d1p0mp3f1fx0hz.cloudfront.net/_cb0i096us.png" alt="" /></p>


How to Create a Simple Angular Contact Form at Keystone.js


<p>
  Gigya provides social share feature, include facebook, google plus's share,
  comment and tons of other features to engage your website and the user.
</p>
<p>
  <a
    href="http://www.gigya.com/products/add-ons/social-engagement/"
    target="_blank"
    >http://www.gigya.com/products/add-ons/social-engagement/</a
  >&nbsp;
</p>
<p>
  This blog shows very simple way to imprement this, first you need to go to
  gigya.com to register and get a account.
</p>
<p>
  Once you get a account, following is simple code written by jade to add
  comment area.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_h0fq3t53b.png"
    alt=""
  />
</p>
<p>&nbsp;</p>
<h3>Gigya comment module written in jade</h3>
<pre><code class="language-javascript"> 
	.container
		#commentsArea
	script(type='text/javascript').
		var params ={
		categoryID: 'technology',
		streamID: window.location.pathname,
		version: 2,
		containerID: 'commentsArea',
		cid:'',
		enabledShareProviders: 'facebook,twitter,yahoo,linkedin,googleplus'
		}
		gigya.comments.showCommentsUI(params);

</code></pre>
<h3>Gigya comment module written in javascript</h3>
<pre><code class="language-javascript">
&lt;div class="container"&gt;
      &lt;div id="commentsArea"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
      var params ={
      categoryID: 'technology',
      streamID: window.location.pathname,
      version: 2,
      containerID: 'commentsArea',
      cid:'',
      enabledShareProviders: 'facebook,twitter,yahoo,linkedin,googleplus'
      }
      gigya.comments.showCommentsUI(params);
      
      
    &lt;/script&gt;
</code></pre>
<h3>Gigya shared module written in jade</h3>
<pre><code class="language-javascript">
	script(type='text/javascript').
		var act = new gigya.socialize.UserAction();
		var thisUrl = window.location.href;
		var imageSrc = $("img.img-responsive")[0] || '';
		act.setTitle($("header h1").text());
		act.setLinkBack(thisUrl);
		act.addMediaItem({ type: 'image', src: imageSrc, href: thisUrl });
		var showShareBarUI_params=
		{
		containerID: 'shareDiv',
		shareButtons: 'Facebook-Like,Twitter-Tweet,googleplus-share,LinkedIn',
		userAction: act
		}
	script(type='text/javascript').
		gigya.socialize.showShareBarUI(showShareBarUI_params);
</code></pre>
<h3>Gigya shared module written in javascript</h3>
<pre><code class="language-javascript">
  &lt;script type="text/javascript"&gt;
      var act = new gigya.socialize.UserAction();
      var thisUrl = window.location.href;
      var imageSrc = $("img.img-responsive")[0] || '';
      act.setTitle($("header h1").text());
      act.setLinkBack(thisUrl);
      act.addMediaItem({ type: 'image', src: imageSrc, href: thisUrl });
      var showShareBarUI_params=
      {
      containerID: 'shareDiv',
      shareButtons: 'Facebook-Like,Twitter-Tweet,googleplus-share,LinkedIn',
      userAction: act
      }
    &lt;/script&gt;
    &lt;script type="text/javascript"&gt;gigya.socialize.showShareBarUI(showShareBarUI_params);&lt;/script&gt;<br /><br />
</code></pre>
<p>Reference</p>
<p>
  <a
    href="http://developers.gigya.com/display/GD/Gigya%27s+Documentation"
    target="_blank"
    >gigya documents</a
  >
</p>


How to Use gigya to Share and Comments


<p>condition for adding css class to html in Jade.</p>
<h3>Example Code</h3>
<p>
  append css class&nbsp;<strong>active</strong>&nbsp;when variable is equal to
  1. The variable&nbsp;<strong>data.Value</strong>is coming from node.js server
  side.
</p>
<p>
  <code>
    input(type='submit' value='button' class="btn btn-link"
    name="number")(class= data.Value === 1 ? "active" : "")
  </code>
</p>
<h3>The Html Code</h3>
<p>The actual html code will generate like following.</p>
<p>
  <code>
    input class="btn btn-link active" name="pageNumber" type="submit"
    value="1"</code
  >
</p>


Code Snippet - How to Add CSS Class to Jade


<h2>Jade Variable Example</h2>
<p style="font-size: 14px; font-weight: normal">
  following h1 will show's the "hello, h1 will be this."
</p>
<p style="font-size: 14px; font-weight: normal">
  <code>- foo = "hello, h1 will be this." h1=foo</code>
</p>
<h6>more example you can find at here.</h6>
<p style="font-size: 14px; font-weight: normal">
  <a
    href="http://naltatis.github.io/jade-syntax-docs/#variables"
    target="_blank"
    >Jade Variable example</a
  >
</p>
<p style="font-size: 14px; font-weight: normal">&nbsp;</p>


JADE VARIABLE EXAMPLEfollowing h1 will show's the "hello, h1 will be this."- foo = "hello, h1 will be this." h1=fooMORE EXAMPLE YOU CAN FIND AT HERE.Jade Variable example [http://naltatis.github.io/jade-syntax-docs/#variables]

Category Jade

Few Links About Convert Jade to Html and Vice Versa

How to Create a Simple Angular Contact Form at Keystone.js

How to Use gigya to Share and Comments

Code Snippet - How to Add CSS Class to Jade

Code Snippet - How to Use Variable with Jade