AngularJS – Basic Fundamentals

What is AngularJS? Why is that it is very popular among web developers nowadays? Let’s tackle some of the basic fundamentals of AngularJS.

Well, AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

To start with, you can add AngularJS to an HTML page using <script> tag. AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.

Once included, AngularJS starts automatically when the web page has loaded. Here is an example:

The ng-app directive tells AngularJS that the <div> element is the “owner” of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

So once you start typing in the input field, the data will also reflect on the <p> element at the same time.

You can also initialize variables using ng-init.

We can also use AngularJS expressions to output data exactly where the expression is written. Expressions are written inside double braces {{ expression }}.
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.

AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines the controller.

This is an example of how to define AngularJS application using the module and initialize values using the controller.

Now those are just some of the basics of AngularJS. Hope you now have a clearer view of AngularJS and what it can do to your applications. And there are still a lot of other functions that I’m pretty sure you’ll love.