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.

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:

<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>
<div ng-app="sanitize_app" ng-controller="sanitize_control">
<div ng-bind-html="Message"></div>


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

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