Introduction To AngularJS - Day 1

Actually we are going to learn AngularJS step by step, I am going to write series of articles on AngularJS. In the first day of learning we are going to see 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 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 MVC (Model-View-Controller) design pattern.
• It provide full featured SPA (Single Page Application) framework.
• It supports Dependency Injection.
• It supports two-way data binding.
• It provide 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.

Getting started with AngularJS, the following are the steps to create an AngularJS demo example:

1. Create 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 reference like the following ways,
   
   
   1. You can directly use CDN version like the following,
      
      
      
      
   2. You can download the latest version from angularjs.org like the following,
      
      
   
   After downloading, use the folder location path like the following,
   
   
   
   
3. Add ng-app directive into the HTML page.
   
   
   
   
4. Use AngularJS directive to add data binding functionality into a page like the following,
   
   
   
   
5. Now, our demo example is ready to run save the changes and open it in browser. Here's the output,
   
   
   
   
6. Enter some value in textbox, it will bind directly with AngularJS expression, when you value you can see the following output,
   
   
   
   Great, your first AngularJS example created successfully!

Summary

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