Create a search engine by using AngularJS

In this tutorial I will explain to you how you can create a search engine by using AngularJS. You will be able to use this search engine to filter the information on a web page.

So, I have created a AngularJS app:

<div ng-controller="Info">
<ul>
<li ng-repeat="info in information | filter:'Nullam'">{{info.text}}</li>
</ul>
</div>

Next I will create my controller:

<script language="javascript">
function Info($scope)
{
$scope.information = [
{text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis, arcu nec tempus rutrum, lorem enim bibendum sapien, non convallis libero velit quis velit. Ut aliquet diam sit amet varius cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id cursus ante.'},
{text: 'Proin ultricies, leo quis auctor imperdiet, nisl mauris efficitur nibh, non sodales purus nisl eu massa. Nullam lobortis nisi non tempor dapibus.'},
{text: ' Nulla fermentum enim in gravida pretium. Nunc sagittis lorem odio, at fermentum sem iaculis in. Praesent elit quam, suscipit ut commodo vel, elementum et urna. Etiam id sem et nisl congue aliquet. Donec eu libero sit amet elit dictum tincidunt sed at ligula.'}
];
}
</script>

As you can see, <li ng-repeat="info in information | filter:'Nullam'">{{info.text}}</li> will display the information from my controller and will filter it by keyword: 'Nullam'

Video Tutorial:









Leave a Comment