Step 1 – AngularJs Expressions

Definition– AngularJS set data to html.

Syntax – There are 2 ways-

i- {{ }}

ii- ng-bind = “”

Now look on below exmaple, you can copy this html code, and save as anyName.html and double click to open it in browser,

AngularJS Expressions Example

<div ng-controller="MyController">
    <!-- Displaying a variable value using curly braces -->

    <!-- Displaying a variable value using ng-bind -->
    <p ng-bind="myVariable"></p>

    <!-- Defining the variable in the controller -->
        var app = angular.module('myApp', []);
        app.controller('MyController', function($scope) {
            $scope.myVariable = 'Hello World';
            $scope.myFunction = function() {
                return 'Hello World';
            $scope.showElement = true;
            $scope.itemList = ['Item 1', 'Item 2', 'Item 3'];

    <!-- Calling a function using curly braces -->

    <!-- Calling a function using ng-bind -->
    <p ng-bind="myFunction()"></p>

    <!-- Conditional rendering -->
    <div ng-if="showElement">
        <p>This element will be displayed if showElement is true.</p>

    <!-- Iterating over a list using curly braces -->
        <li ng-repeat="item in itemList">{{item}}</li>

    <!-- Iterating over a list using ng-bind -->
        <li ng-repeat="item in itemList" ng-bind="item"></li>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.