Create instant search with angular JS

AngularJS is a very powerful JavaScript Framework. It is used to create a Single Page Applications. It is an open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

Prerequisites before Start Angular JS

You should have a basic knowledge of Java Script. As i am going to Create Instant Search using angular JS, it will be good if you have knowledge of other web technologies like HTML, CSS, AJAX, etc.

angularjs-instant-search

AngularJS Atrributes with HTML

  • AngularJS extends HTML using ng-directives.
  • The ng-app directive defines an AngularJS application.
  • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  • The ng-bind directive binds application data to the HTML view.

AngularJS Filters

  • currency Format a number to a currency format.
  • date Format a date to a specified format.
  • filter Select a subset of items from an array.
  • json Format an object to a JSON string.
  • limitTo Limits an array/string, into a specified number of elements/characters.
  • lowercase Format a string to lower case.
  • number Format a number to a string.
  • orderBy Orders an array by an expression.
  • uppercase Format a string to upper case.

Bellow is the simple example of angular JS

Instant Search using angular JS
This project will allow users to instant search from list of items by typing into a text field.

html Code

CSS Code

Angular JS

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Recommended Posts:


Prem Tiwari

An engineer by profession and a passionate blogger by heart. Founder of FreeWebMentor.com (A Programming blog for beginners), Tech Speaker at various forums. A part from this he is an open source enthusiast, WordPress Lover, Blogger, SEO, and Growth Strategic.

Article Tags: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.