Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AngularJS, Basic to Expert: Day Two

DZone's Guide to

AngularJS, Basic to Expert: Day Two

Welcome back! In this part of this series, we explore expressions and directives in Angular, and how they can help us deal with data in our app.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Introduction:

In the previous article of this series, we learned about AngularJS and looked at some basics of the framework and used AngularJS in our demo application.

In this article, we will learn:

  • AngularJS Expressions

  • Directives in AngularJS

So, I will explore them one by one and will also continue with our AngularJS demo application which we used in the previous article.

AngularJS Expressions:

An expression is our AngularJS code which is written in the HTML. AngularJS uses double brackets {{ angular expression Code }} to write an expression.

AngularJS expressions are evaluated or executed by AngularJS and return the result to the same place. An expression is a way to express AngularJS code and the give result inside the HTML.

AnguarJS binds our data to HTML by using expressions.

So we can write an AnguarJS expression inside the brackets, {{expressions}}, or with the help of directives like ng.bind="Angular expressions". 

We can write an expression on a number, string, object, etc.

Please check the below demo for an example of an expression:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<body ng-app="" ng-init="Firstapp='Hello fisrt angularjs application'">
Number expression example: 5+5 = {{ 5+5 }} </br>
  <span > {{ Firstapp }} </span>
	<p>First Name: <input type="text" ng-model="firstName"></p>
	<p>Last Name: <input type="text" ng-model="lastName"></p>
string expression example:
  <span >full Name: {{ firstName + " " +  lastName }} </span> 
</body>
</html>

Output:

demo angular expression

Directives in AngularJS

Directives extend your HTML tags by attaching t0 them. Directives attach a specific behavior to an HTML tag. AngularJS directives start with the ng-prefix.

AngularJS has a set of many built-in directives for many different functionalities. We can also create our own custom directive in AngularJS.

For a reference on directives from Angular's docs, check here.

In our demo application, we have already used some of the directives:

  • ng-app  directive: this is the first thing we add in our AngularJS application, it initializes our AngularJS application. The ng-app directive defines the root element for the AngularJS application.

  • ng-init directive: initializes your application data. ng-init sets the initial data or values for your application.

In our demo application, we have used ng-init to assign some values to our Firstapp variable.

<body ng-app="" ng-init="Firstapp='Hello fisrt angularjs application'">

ng-model  directive: it binds the value of HTML controls to application data. ng-model binds AngularJS application data to HTML tags. It uses ng-model with some variable names that hold data to bind to HTML.

In our demo application, we have the following:

<p>First Name: <input type="text" ng-model="firstName"></p>
<p>Last Name: <input type="text" ng-model="lastName"></p>
string expression example:
<span>full Name: {{ firstName + " " +  lastName }} </span> 

ng-model="firstName" is holding the value for firstName and letter, displaying that firstName value. ng-model provides two-way data binding. We will look at the model letter in detail later.

ng-bind directives bind the AngularJS data to the HTML element with the value of a given variable or expression. It behaves similarly to ng-model but provides one-way data binding.

ng-click  directives raise the click event on the HTML control.

ng-Repeat directives are used for looping logic. Every programming language has loops like for loops, forEach loops, and AngularJS has ng-repeat. It repeats HTML elements and clones HTML elements once for each item. If it is attached to a <tr> tag then it will create <tr> tags until loop ends.

Example:

<table border="1"  ng-init="fullNames=[
{firstName:'Arvind',lastName:'Singh'},
{firstName:'Risha',lastName:'Baghel'},
{firstName:'Janvi',lastName:'Baghel'}]">
<tr > <td>First Name</td> <td>Last Name</td>
</tr>
    <tr ng-repeat="name in fullNames">
        <td>{{name.firstName}}</td>
        <td>{{name.lastName}}</td>
    </tr>
</table>

There are many built-in directives in AngularJS, please find a list of all directives here.

Demo application:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<body ng-app="" ng-init="Firstapp='Hello fisrt angularjs application'">

<span ng-bind="Firstapp">  </span></br>
number expression example: 5+5 = {{ 5+5 }} </br>
<p>First Name: <input type="text" ng-model="firstName"></p>
<p>Last Name: <input type="text" ng-model="lastName"></p>
string expression example with directives:
<span >full Name: {{ firstName + " " +  lastName }} </span></br>

ng-repeat example:
<table border="1"  ng-init="fullNames=[
{firstName:'Arvind',lastName:'Singh'},
{firstName:'Risha',lastName:'Baghel'},
{firstName:'Janvi',lastName:'Baghel'}]">
<tr > <td>First Name</td> <td>Last Name</td>
</tr>
    <tr ng-repeat="name in fullNames">
        <td>{{name.firstName}}</td>
        <td>{{name.lastName}}</td>
    </tr>
</table>
</body>
</html>

In the above demo I have used expressions, the directives ng-bindng-model, and ng-repeat and displayed data in a table,

Output:

Image title

Summary:

In this article, we have covered the basics of AngularJS expressions and directives.

Now we are ready to create our AngularJS MVC application. So, in next article, 'Day 3,' I will cover: 

  • Databinding in AngularJS

  • Model in AngularJS

  • Module in AngularJS

  • Controller in AngularJS

  • Scopes in AngularJS

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,angularjs ,angularjs directives ,expression ,ng-repeat directives in angularjs

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}