How to use AngularJS on the Webpage

AngularJS is a JavaScript MVC framework that use to build the single page web application but you can use it build any type of web application and use its features like – two-way data binding, templating, AJAX handling, etc.

If you are already using jQuery in your project then you can use AngularJS as a replacement or use both of them in the web application.

In this tutorial, I create a simple example to show how you can use it on your web page.

How to use AngularJS on the Webpage


Contents

  1. Download and Include
  2. Define ng-app
  3. Filters
  4. Conclusion

 


1. Download and Include

  • Download AngularJS script library from its Offical website or use CDN link.
  • Include the <script> in <head> section.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js" ></script>

2. Define ng-app

AngularJS Framework first checks the ng-app directive within the HTML page. If its found then Angular bootstrap itself and starts to manage the section of the page that has a ng-app directive.

Everything within the HTML tag section will be managed by AngularJS.

<html ng-app=''> </html>

You can also define ng-app directive on any other HTML tags like – <body>,<div>,<table>, etc.

Example

Create some input elements and added ng-model directive.

Display the change of element using {{ }} and ng-bind directive on the screen.

  • ng-model

ng-model is a directive which binds the values on HTML element in the application.

In the example, I defined three models – name, language, and about. I am using this model names in {{ }} and ng-bind to display values.

  • ng-bind and {{ }}

ng-bind and {{ }} both use to display the output. The double-curly syntax is more naturally readable and requires less typing but it is much slower.

They both produce the same output but if you choose to go with the double-curly there is a chance that the user will see for some Mili seconds the {{}} before your template rendered by Angular. So if you notice any {{}} then is better to use ng-bind.

The ng-bind is a directive and which place a watcher on the passed variable. So the ng-bind will only apply when the passed value does actually change.

 


3. Filters

AngularJS provides some filters to transform data:

  • lowercase – Convert a string to lowercase.
  • uppercase – Convert a string to uppercase.
  • currency – Convert a number to a currency format.
  • number – Format any number to the specific string. If an input is not a number then return an empty string.

Example


4. Conclusion

This is just a quick overview of AngularJS how you can use it on your web application.

Lot more you can do with it like – Include pages, fetch records from MySQL database, toggle classes, etc.

Related Post

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

Be First to Comment

Leave a Reply

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