Objectives and outcomes

In this tutorial we are going to learn about angular-js ngSanitize module. We use $sanitize service to sanitize an html string.

ngSanitize
Image source: (https://docs.angularjs.org/api/ngSanitize)

For this module to work properly we need to link angular-sanitize.js file to our application which can be done in four ways:



If you have downloaded angular package on localhost

<script src="angular-1.4.6/angular-sanitize.js"></script>


Using CDN

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-sanitize.js"></script>


Using npm

npm install angular-sanitize@1.4.6


Using bower

bower install angular-sanitize@1.4.6


HTML code:

<html>
<head>
<meta charset="utf-8">
<title>AngularJS ngSanitize</title>
<script src="angular-1.4.6/angular.min.js"></script>
<script src="angular-1.4.6/angular-sanitize.js"></script>
</head>
<body>
<div ng-app="sanitize_app" ng-controller="sanitize_control">
<div ng-bind-html="Message"></div>
</div>
</body>
</html>


Javascript

<script>
var app = angular.module('sanitize_app', ['ngSanitize'])
app.controller('sanitize_control', function ($scope) 
{
$scope.Message = "<span>Learn AngularJS with</span> <b>codeshot.in</b>.";
});
</script>




The sanitize service decode the normal string in to html code.