How To Change Template Engine In Express.js

If you don’t have a view engine set in your express/node application, you need to specify file extension with each of your view files. To fix this issue you need to set a default view engine for rendering views.

You can set a template engine using following code.

app.set('view engine', 'jade')

The above code will set Jade as the default template engine. You can change jade with your own templating engine. For example, if you wish to set ejs as your default template engine, use following code.

app.set('view engine', 'ejs')

Read Also: How to use EJS in Express

How To Use EJS with Express

In this tutorial, we are going to configure EJS template engine in Express/Node application.

To install EJS inside your ExpressJS project follow the steps given below,

01. Navigate to your project folder and run the following command,

npm install ejs --save  

02. Now, you need to set ejs as your default view engine. You can do this by using following code.

app.set('view engine', 'ejs');

Read Also: Angularjs filter To Output Plain Text Instead Of HTML

Using Bootstrap Tooltip With AngularJs

Tooltip is a tiny popup box that appears when the user hovers his cursor over a specific element. In this tutorial, we are going to use Bootstrap’s tooltip component in our AngularJs application. For this tutorial, we are using UI Bootstrap components.

To integrate Bootstrap Tooltip within your AngularJs application follow the steps given below:

Step 01:

Link Bootstrap Stylesheet file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Step 02:

Load AngularJs and UI Bootstrap files within your application.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="ui-bootstrap-tpls-1.3.2.min.js"></script>

Step 03:

Include the module within your project by adding ui.bootstrap as a dependency.

angular.module('myApp',['ui.bootstrap']);

Step 04:

Now, finally to add the Bootstrap tooltip use uib-tooltip attribute.

<button tooltip-placement="bottom" uib-tooltip="Hello World!">Hover Over!</button>

Useful Read: Make Bootstrap Popover Appear/Disappear on Hover Instead of Click

Resource: https://angular-ui.github.io/bootstrap/

How To Build Pagination in AngularJS

Pagination in one of the most important and essential component in any web based application. It is the process of dividing data into small groups and creating pages to display each of these groups.

In this tutorial, we are going to use AngularJS to paginate the data. For this tutorial, we are going pagination directive by Michael Bromley.

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS Pagination</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<script src="angular.min.js"></script>
	<script src="dirPagination.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<div class="container" ng-app="myApp">
		<div ng-controller="countryCtrl">
			<table class="table">
			    <thead>
					<tr>
						<th>Country</th>
						<th>City</th>
					</tr>
			    </thead>
				<tbody>
					<tr dir-paginate="item in items | itemsPerPage: 5">
						<td>{{ item.country }}</td>
						<td>{{ item.city }}</td>
					</tr>
				</tbody>
  			</table>
  			<dir-pagination-controls
  				boundary-links="true"
  				direction-links="true"
  			></dir-pagination-controls>
		</div>
	</div>
</body>
</html>

As you can see, we are using bootstrap to style our page. Apart from that we have included following Javascript files,

  1. angular.min.js (Core AngularJS file)
  2. dirPagination.js (Pagination Directive)
  3. app.js (Custom JavaScript file which contains code for our application)

Within our HTML code we are using dir-paginate directive instead of regular ng-repeat directive and to display pagination itself we are using dir-pagination-controls directive. The itemsPerPage attribute for dir-paginate directive states the total number of items which will be displayed on each page. The direction-links attribute for dir-pagination-controls directive used to determine whether to show next and previous arrows and the boundary-links attribute is used to determine if we want to display arrows which points first and last pages. Items variable contains data which it is retrieving from JSON file.

JavaScript:

var app = angular.module('myApp',['angularUtils.directives.dirPagination']);

app.controller('countryCtrl', ['$scope','$http', function($scope, $http){
    $scope.items = [];
    $http.get("country.json").success(function(response){ 
        $scope.items = response;
    });
}]);

As you can see in our JavaScript code we have added angularUtils.directives.dirPagination as a dependency to our application. We have created an scope variable items which will hold our data. Then, we are using $http object to fetch data from country.json file. We are going to store the response i.e the data fetched from country.json inside items variable.

JSON:

[
	{
		"country"	: 	"India",
		"city"		: 	"Pune"
	},
	{
		"country"	: 	"Canada",
		"city"		: 	"Waterloo"
	},
	{
		"country"	: 	"Russia",
		"city"		: 	"Moscow"
	},
	{
		"country"	: 	"France",
		"city"		: 	"Paris"
	},
	{
		"country"	: 	"Japan",
		"city"		: 	"Tokoyo"
	},
	{
		"country"	: 	"New Zealand",
		"city"		: 	"Auckland"
	},
	{
		"country"	: 	"Nepal",
		"city"		: 	"Kathmandu"
	},
	{
		"country"	: 	"United Kingdom",
		"city"		: 	"London"
	},
	{
		"country"	: 	"Brazil",
		"city"		: 	"Rio De Janeiro"
	},
	{
		"country"	: 	"Peru",
		"city"		: 	"Lima"
	},
	{
		"country"	: 	"Chile",
		"city"		: 	"Santiago"
	},
	{
		"country"	: 	"Germany",
		"city"		: 	"Berlin"
	},
	{
		"country"	: 	"China",
		"city"		: 	"Beijing"
	},
	{
		"country"	: 	"Thailand",
		"city"		: 	"bangkok"
	},
	{
		"country"	: 	"South Korea",
		"city"		: 	"Seoul"
	},
	{
		"country"	: 	"Belgium",
		"city"		: 	"Brussels"
	},
	{
		"country"	: 	"Spain",
		"city"		: 	"Madrid"
	},
	{
		"country"	: 	"Netherlands",
		"city"		: 	"Amsterdam"
	}
]

Our JSON file contains a list of countries and cities which we have hardcoded inside that file. In your case it might come from the database or from an api.

Read Also: Limit the length of a string with AngularJS

So, in the way we can create a basic pagination using AngularJS. If you have any queries or suggestions, please let me know in the comment section.

How to Strip HTML Tags in AngularJS

Here’s a reusable code snippet which allows you to remove HTML tags from text using a simple AngularJS filter.

var app = angular.module('myApp', []);

app.filter('stripTags', function() {
	return function(text) {
		return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
	};
});

Usage:

<p>{{ someRandomText | stripTags }}</p>  

Read Also: Capitalize The First Letter of String Using AngularJS

Source: http://stackoverflow.com/a/17315483

How to Change AngularJS Template Brackets?

If you are using AngularJS with a template engine like Twig or Laravel’s Blade template engine, you might want to change its {{ curly braces }} to avoid any conflicts.

Useful Read : Set friendly names for validation attributes in Laravel

To change AngularJS delimiters use the following code,

<script>
var myNgApp = angular.module('myNgApp',[]);

myNgApp.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});
</script>

 

How to Check if Element Exists With jQuery

In order to test if an element exists or not we are going to use jQuery length() method. if the element exists jQuery property will return total number of matched elements on the page.

Quick Tip : How to get element by href in jQuery?

$(document).ready(function(){  
   if ($('img').length) {   
      console.log('We have found at least one image on the page');  
   } else {  
      console.log('There is no image on the page');  
   }  
  
});

 

Show Password – jQuery

In this post, we are going to take a look at a simple functionality which allows us to show password with help of check box.

See Also: How to get element by href in jquery?

HTML:

<div>
	<input type="password" id="password" name="password" />&nbsp;&nbsp;
	<input type="checkbox" id="showPass" />Show Password</div>
</div>

 jQuery:

$(document).ready(function(){
	$('#showPass').on('change',function(){
		var isChecked = $(this).prop('checked');
		if (isChecked) {
			$('#password').attr('type','text');
		} else {
			$('#password').attr('type','Password');
		}
	});
});

Click Here to view working demo.

How to get element by href in jquery?

jQuery is one of the most popular and widely used JavaScript libraries in the world. Its beauty is in its selectors and inbuilt functions which enable you to perform many complex tasks with very few lines of code.

While working on client’s project, I was required to select <a> tag element by its URL i.e value of href attribute. Thanks to jQuery, I was able to perform this task very easily. Here’s the code which allows you to select <a> element by href.

var link = $('a[href="http://coffeecupweb.com"]');

The above code will select <a> element with http://coffeecupweb.com. You can also select links starting with a certain URL using attributeStartsWith selector.

var links = $('a[href^="http://coffeecupweb.com"]');

See Also:

Check if an image is loaded using jQuery