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.
Contents
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.
