AngularJS is an open-source javascript front-end framework. In this post, we will see some of the fundamental concepts of Angular JS. It can be added to an HTML page with a <script> tag.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

Directives

AngularJS extends HTML attributes with directives (ng-directives), and binds data to HTML with expressions.\ AngularJS directives are HTML attributes with an ng prefix.\ There basic directives in angularJS are as below:

  • ng-app – It defines an AngularJS application. The element in which this directive is embedded tells that this element is the owner of the AngularJS application.
  • ng-controller – It controls the AngularJS application.
  • ng-model – It binds the value of HTML controls (input, select, textarea) to application data.
  • ng-bind – It binds application data to the HTML view.

The example of use of the above defined directives are:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Other directives are:

  • ng-disabled – It binds AngularJS application data to the disabled attribute of HTML elements.

Modules

AngularJS module is a container for the different parts of an application.

Expressions

The expressions in angularJS binds data to HTML.

Useful Resources

What is AngularJS?