Getting Started with Angular JS

getting-started-with-angular-js


Angular JS is open source web application framework. Its commonly known as Angular or Angular.js. Some important highlights of this framework 

  • The first version AngularJS is 1.0 released in 2012
  • Angular JS is JavaScript framework like jQuery, Ext JS etc.
  • Angular JS mainly developed and maintained by Google
  • Angular JS is based on the MVC pattern (Model View Controller)
  • Single Page Application (SPA) is one of the main aim of Angular JS
  • We can easily develop Single Page Application (SPA) using Angular JS
  • The official site of Angular JS https://angularjs.org/

To learn Angular JS we should have basic knowledge of below

  • HTML
  • JavaScript

Downloading Angular JS:

We can download Angular JS from https://angularjs.org/. Its just a script file. We can also use CDN of Angular JS in our HTML file without downloading the script file.

download-angular-js

Adding Angular JS in our HTML file:

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
</body>
</html> 

In above we have used Angular JS from CDN. We can also download angular JS in our local machine and include it instead of CDN.

How to check whether Angular JS is loaded or not:

In the above code we have shown how to include Angular JS. Sometimes we need to ensure whether the Angular JS is loaded or not. When Angular JS is fully loaded an object angular will be initialized. The angular object must  not be undefined. That means we can just check by alert(angular) which should return object but not undefined. Below is the sample code snippet to know the current version of the angular js which is loaded

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
alert(angular.version.full);
</script>
<body>
</body>
</html> 

We can also inspect angular object in Firefox

angular-object-in-firefox

Some new terms in Angular JS:

  • Directive
  • Expression
  • Filters
  • Data Binding

We will explain those in other articles.

 

About The Author

Leave a Reply

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

Scroll to Top
%d