AngularJs Expressions

AngularJs Expressions

In this blog, I’m explaining about the expressions in angularjs and how to use it.

If you want to learn about angularjs first, then you can read my previous blogs:

AngularJs Introduction

ng-init and ng-repeat in AngularJs

Expressions are used to bind application data to HTML. Expressions are written inside double curly braces such as in {{ expression}}. Expressions behave similar to ng-bind directives. AngularJS expressions are pure JavaScript expressions and output the data where they are used.

Example 1

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Application</title>

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

</head>

<body>

<div ng-app="" >

        <h2>My First Expression</h2>

        <p> 10 + 10 = {{10 + 10}}</p>

    </div>

</body>

</html>

Output

Example 2

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Application</title>

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

</head>

<body>

<div ng-app="" ng-init="student={firstname:'Steve', lastname:'Benson', rollno:'1001'};subjects=['English','Science','Maths'];marksObtained=[70,80,60]">

        <h2> Student Details</h2>

        <p>Roll No. : {{student.rollno}}</p>

        <p>Name : {{student.firstname + " " + student.lastname}}</p>

        <p>Subject : Marks Obtained

            <ul>

                <li>{{subjects[0]}} : {{marksObtained[0]}}</li>

                <li>{{subjects[1]}} : {{marksObtained[1]}}</li>

                <li>{{subjects[2]}} : {{marksObtained[2]}}</li>

            </ul>

        </p>

        <p>Total Marks : {{marksObtained[0] + marksObtained[1] + marksObtained[2]}} </p>

        <p>Percentage % : {{(marksObtained[0] + marksObtained[1] + marksObtained[2])/300 * 100}}</p>

    </div>

</body>

</html>

Output

Using numbers

<p>Total Marks : {{marksObtained[0] + marksObtained[1] + marksObtained[2]}} </p>

        <p>Percentage % : {{(marksObtained[0] + marksObtained[1] + marksObtained[2])/300 * 100}}</p>

Using Strings

<p>Name : {{student.firstname + " " + student.lastname}}</p>

Using Objects

<p>Roll No. : {{student.rollno}}</p>

Using Array

<li>{{subjects[0]}} : {{marksObtained[0]}}</li>

The above example shows the use of all the above-mentioned expressions:

ng-init and ng-repeat in AngularJs

ng-init and ng-repeat in AngularJs

In this blog, I’m explaining about the ng-init and ng-repeat directive in angularjs and how to implement it.

If you want to learn about angularjs, then you can see my blog:

AngularJs Introduction

ng-init Directive

The ng-init directive initializes an AngularJS Application data. It is used to assign values to the variables. In the following example, we initialize an array of studentList. I have use JSON syntax to define the array of studentList.

<div ng-app="" ng-init="studentList=[{Name:'Mark David', City:'New York'},

                                        {Name:'Steve Benson', City:'London'},

                                        {Name:'Mary William', City:'Sydney'}]">

 

ng-repeat Directive

The ng-repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate over the array of studentList.

<p>List Of Students</p>

       <ol>

            <li ng-repeat="item in studentList">

                Name : {{item.Name}}  City : {{item.City}}

            </li>

        </ol>

Example

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Application</title>

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

</head>

<body>

<div ng-app="" ng-init="studentList=[{Name:'Mark David', City:'New York'},

                                        {Name:'Steve Benson', City:'London'},

                                        {Name:'Mary William', City:'Sydney'}]">

        <p>List Of Students</p>

        <ol>

            <li ng-repeat="item in studentList">

                Name : {{item.Name}}  City : {{item.City}}

            </li>

        </ol>

    </div>

</body>

</html>

Output

AngularJS Introduction

AngularJS Introduction

In this blog, I’m explaining about the angular js and how to use it our web application.

AngularJS is a very powerful JavaScript library. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS Directives

The AngularJS framework can be divided into three major parts:

ng-app : This directive defines and links an AngularJS application to HTML.

ng-model : This directive binds the values of AngularJS application data to HTML input controls.

ng-bind : This directive binds the AngularJS application data to HTML tags.

Example

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Application</title>

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

</head>

<body>

    <div ng-app="">

        <p>

            First Name:

            <input type="text" ng-model="firstname">

        </p>

        <p>

            Last Name:

            <input type="text" ng-model="lastname">

        </p>

        <br />

        <p ng-bind="firstname"></p>

        <p ng-bind="lastname"></p>

    </div>

</body>

</html>

AngularJS starts automatically when the web page has loaded.

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 variables firstname and lastname.

The ng-bind directive binds the innerHTML of the <p> element to the application variables firstname and lastname.

Output

ng-init

The ng-init directive initialize AngularJS application variables.

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Application</title>

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

</head>

<body>

    <div ng-app="" ng-init="firstname='Mark'; lastname='David'">

        <p>

            First Name:

            <input type="text" ng-model="firstname">

        </p>

        <p>

            Last Name:

            <input type="text" ng-model="lastname">

        </p>

        <br />

        <p ng-bind="firstname"></p>

        <p ng-bind="lastname"></p>

    </div>

</body>

</html>

Output

You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid.

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Application</title>

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

</head>

<body>

    <div data-ng-app="" data-ng-init="firstname='Mark'; lastname='David'">

        <p>

            First Name:

            <input type="text" data-ng-model="firstname">

        </p>

        <p>

            Last Name:

            <input type="text" data-ng-model="lastname">

        </p>

        <br />

        <p data-ng-bind="firstname"></p>

        <p data-ng-bind="lastname"></p>

    </div>

</body>

</html>