Introduction To AngularJS - Day 1

Actually, we are going to learn AngularJS step by step, I am going to write a series of articles on AngularJS. On the first day of learning, we are going to see the basics of AngularJS.

What is AngularJS?

AngularJS is an open-source JavaScript framework developed by Google. It is a structural framework for dynamic web apps. It makes it easier to update and get information from your HTML document. It helps in writing a proper architecture, maintainable and testable client side code.

• This framework is developed based on the MVC (Model-View-Controller) design pattern.
• It provides a full-featured SPA (Single Page Application) framework.
• It supports Dependency Injection.
• It supports two-way data binding.
• It provides a routing feature.
• Testing was designed right from the beginning so you can build robust tests.
• For DOM manipulation jqLite is built-in which is kind of like Mini-Me of jQuery.
• Separation of the client side of an application from the server side.
• The AngularJS framework uses Plain Old JavaScript Objects(POJO), it doesn’t need the getter or setter functions.

To get started with AngularJS, the following are the steps to create an AngularJS demo example,

1. Create a simple html page using Notepad or Notepad++ editor or any editor.
2. Add a reference to a local or hosted version in your created HTML page, you can add references in the following ways.

After downloading, use the folder location path like the following.

You can directly use the CDN version like the following.

You can download the latest version from angularjs.org like the following.

Add ng-app directive into the HTML page.

Use AngularJS directive to add data binding functionality into a page like the following.

Now, our demo example is ready to run save the changes, and open it in the browser. Here's the output.

Enter some value in the textbox, it will bind directly with the AngularJS expression, when you value you can see the following output.

Great, your first AngularJS example was created successfully.

Summary

I hope that beginners as well as students understand the concept of AngularJS with examples. If you have any suggestions regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!