Learning AngularJS Basics | Part 1

Adding AngularJS to HTML / Attributes / Directives / Expressions

As the name suggests, AngularJS is a JavaScript framework that extends HTML using directives and binds to data using expressions. If you don’t know what directives or expressions are, you don’t have to be worried. We’ll cover them in our future articles.


Video also available at the bottom of the article.

Adding AngularJS to HTML

Just like JavaScript, AngularJs can be included in an HTML project by using script tag.

Let’s add AngularJS to our HTML page from Google CDN Server using the following code.

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

Some basic AngularJS attributes

Before we proceed, we must get familiar with some basic AngularJS attributes. These attributes extend HTML using ng-directives. If you don’t understand them now, don’t worry, all you need to understand here is what is called what and what it does.

  1. ng-app: It is used to define an AngularJS application.
  2. ng-bind: It is used to bind application data to the HTML view.
  3. ng-model: It is used to bind value of HTML elements to application.

Have a look at the following code and try to understand it.

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

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


</body>
</html>

Directives and Expressions

As you know now that directives and expressions are used to bind AngularJS with HTML, it’s time to differentiate between both of them.

> Directive

A directive is any attribute in AngularJS world that starts with the prefix ng- for example, check out the following code:

<p>The total cost is $<span ng-bind="cost"></span></p>

> Expression

On the other hand, the easiest identification for an expression is that it is enclosed between double curly brackets {{ }} for example, have a loot at the following code:

<p>The total cost is $<span>{{ 5 + 6 }}</span></p>

The thing about AngularJS expressions is that it is capable of processing and can make calculations, so when the above HTML is opened, it will show the “output” exactly where the expression is written.

Conclusion

In this article, we have discussed some of the basics of AngularJS. We tried to cover the following areas:

  1. Adding AngularJS to HTML
  2. Some basic AngularJS attributes
  3. Difference between Directives and Expressions

In the next Article

In the next article, we’ll try to understand the following topics:

  1. AngularJS Application
  2. AngularJS Module
  3. AngularJS Controller

Here’s the video tutorial of this lesson

Learning AngularJS Basics | Part 1


Thank you for reading this article. Hope it was helpful. If you liked it, please give it a ❤ and I’ll see you next time…

Get in touch

Email: sh.fahadashraf@gmail.com | Facebook | Instagram | About