Value and Constant in Angular JS

  • First, create a script.js and add the following line of code:

    //script.js

    (function () {
    ‘use strict’;

    var app = angular.module(‘myApp’, []);

    //storing a string in Value
    app.value(‘appName’, ‘Angular JS’);

    //storing a function in Value
    app.value(‘users’, {
    getAllUsers: function () {
    return [
    {
    id: 1001,
    name: ‘Mukesh Kumar’,
    company: ‘XYZ’,
    city: ‘Delhi’
    },
    {
    id: 1002,
    name: ‘Rahul Singh’,
    company: ‘ABC’,
    city: ‘Noida’
    },
    {
    id: 1003,
    name: ‘Yaduveer Saini’,
    company: ‘MNO’,
    city: ‘Faridabad’
    }
    ];
    }
    });

    DummyController);
    DummyController.

  • DOCTYPE html
    html
    head
    script link rel=”stylesheet”
    script ng-app=’myApp’
    div class=”container-fluid”

    h2Share Data using Value in AngularJS/h2
    br /
    div class=”row”
    div class=”col-md-6″
    div class=”panel-group”
    div class=”panel panel-primary”
    div class=”panel-heading”Constant Example [As a Service]/div
    div class=”panel-body”
    div ng-controller=’DummyController as vm’ class=’col-md-6′
    form class=”form-inline” role=”form”
    div
    I love b{{vm.getAppName()}}/b website.br /
    br /
    /div
    div
    table class=”table”
    tr style=”font-weight:bold;
    background-color:black; color:white;”
    td
    ID
    /td
    td
    Name
    /td
    td
    Company
    /td
    td
    City
    /td
    /tr
    tr ng-repeat=”user in vm.getUsers()”
    td
    {{user.id}}
    /td
    td
    {{user.name}}
    /td
    td
    {{user.company}}
    /td
    td
    {{user.city}}
    /td
    /tr
    /table
    /div
    /form
    /div

    /div
    /div
    /div
    /div
    /div
    /div
    /body
    /html

    When you run the application, the output will be as shown in the following screen:

    Constant

    As the name says, we should use Constant when the value is not going to change in future.

  • First, create a script.js and add the following line of code:

    (function () {
    ‘use strict’;

    var app = angular.module(‘myApp’, []);

    //First Way To Create Constant
    app.constant(‘WEBSITE_TITLE’, ‘www.asp.net’);

    //Second Way To Create Constant
    app.config(function ($provide) {
    $provide.constant(‘FRUIT’, ‘Mango’);
    });

    DummyController);
    DummyController.

  • DOCTYPE html
    html
    head
    script link rel=”stylesheet”

    script ng-app=’myApp’
    div class=”container-fluid”

    h2Share Data using Constant in AngularJS/h2
    br /
    div class=”row”
    div class=”col-md-6″
    div class=”panel-group”
    div class=”panel panel-primary”
    div class=”panel-heading”Constant Example [As a Service]/div
    div class=”panel-body”
    div ng-controller=’DummyController as vm’ class=’col-md-6′
    form class=”form-inline” role=”form”
    div
    I love b
    a href=”http://www.asp.net”
    {{vm.getWebsiteTitle()}}/a/b website.br /
    I love b{{vm.getFruitName()}}/b Fruit.

  • /div
    /form
    /div

    /div
    /div
    /div
    /div
    /div
    /div
    /body
    /html

    After running the application, the output will come as the following screen today, we have seen the difference between Value and Constant in Angular JS and how to use both in project.

This tip will demonstrate the different ways to share data in Angular JS using Value and Constant.; Author: MukeshKumarMVP; Updated: 9 Jul 2017; Section: Client side scripting; Chapter: Web Development; Updated: 9 Jul 2017

@ProgrammerDudez: Value and Constant in Angular JS #AngularJs via @CodeProject #Programming

This tip will demonstrate the different ways to share data in Angular JS using Value and Constant. As we all know, Angular JS is a client side framework to create SPA (Single Page Application) and is maintained by Google. So, this post is dedicated to the Angular JS developer who is going to learn Angular JS. It will explain how to use Value and Constant in project and what the differences are between the two.

It can store different types of values like string, number, object, date time and even function. It can directly inject with services or controllers. We can create a value services using two different ways:

Note: Value cannot be injected in Config section.

Example: Let’s create an example which shows how to use Value in Angular JS. First, create a script.js and add the following line of code:

Now, create a view to bind the Value data. So, create Index.html and add the following line of code:

When you run the application, the output will be as shown in the following screen:

As the name says, we should use Constant when the value is not going to change in future. It means, the value of Constant will be fixed lifelong. The main purpose behind the Constant to store values and reuse those which are not going to change. It also stores string, number, object, etc. It can also be injected with module configuration along with services and controllers.

When working with multiple modules in Angular JS, there should be individual Constant file for each module.

As like Value, Constant can also be created in two different ways:

Example: Let’s create an example which shows how to use Constant in Angular JS. First, create a script.js and add the following line of code:

Now, add Index.html where you need to add the following line of code that displays the constant data on UI.

After running the application, the output will come as the following screen shows:

Therefore, today, we have seen the difference between Value and Constant in Angular JS and how to use both in project.

I hope this post will help you. Please provide your feedback using comments, which helps me to improve for my next post. If you have any doubts, please post in the comments section and if you like this post, please share it with your friends. Thanks!

Value and Constant in Angular JS

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.