AngularJS Tutorial

  • Last Updated : 27 Sep, 2023

AngularJS was developed in 2008-2009 by Misko Hevery and Adam Abrons and is now maintained by Google. AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). It is a continuously growing and expanding framework which provides better ways for developing web applications.

This AngularJS tutorial is designed for beginners as well as professionals, which covers a wide range of important topics, including AngularJS Expressions, AngularJS directives, AngularJS Data Binding, AngularJS controllers, AngularJS modules, AngularJS scopes, filters, and more.

Additionally, we also provide AngularJS interview questions to help you deepen your understanding of the framework and prepare for potential job opportunities.

Prerequisites: A basic understanding of HTML, CSS, and JavaScript is recommended as prerequisites for learning AngularJS.

AngularJS Tutorial

Key Points on AngularJS:

  • AngularJS is a JavaScript framework that is mainly used for Frontend Development.
  • It is used for making Single Page Applications(SPA).
  • It is open source and is completely free for everyone.
  • It uses the Model, View, Control(MVC) pattern for developing projects.

     

    Why use AngularJS?

  • Easy to work with: All you need to know to work with AngularJs is basics of HTML,CSS and Javascript,not necessary to be an expert in these technologies.
  • Time-saving: AngularJs allows us to work with components and hence we can use them again which saves time and unnecessary code.
  • Ready to use template: AngularJs is mainly plain HTML, and it mainly makes use of the plain HTML template and passes it to the DOM and then the AngularJS compiler. It traverses the templates and then they are ready to use.

Example:

<!DOCTYPE html>
<html>     
<head> 
  <title>AngularJS</title> 
  <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
  </script> 
</head> 
<body style="text-align:center"> 
    
  <h2 style = "color:green">Geeksforgeeks</h2> 
  <div ng-app="" ng-init="name='GeeksforGeeks'"> 
    <p>{{ name }} is the portal for geeks.</p> 
  </div> 
</body> 
</html> 

Output:

‘Recent Articles’ on AngularJS