Why the Angular.js: Is .value() the proper way to set app wide constant?

Why the Angular.js: Is .value() the proper way to set app wide constant?

Asked on October 23, 2018 in AngularJs.
Add Comment


  • 6 Answer(s)

        one can set the Angular-UI library’s config like so: (coffeescript)

    angular.module('app',[])
    .value "ui.config",
      tinymce:
        theme: 'simple'
        width: '500'
        height: '300'
    

        And my app is currently looking like this:

    window.app = angular.module("app", [ 'ui'])
    .config(["$routeProvider", ($routeProvider) ->
      $routeProvider
      .when "/users",
        templateUrl: "assets/templates/users/index.html"
        controller: IndexUsersCtrl
      .otherwise redirectTo: "/users"
    ])
    .value 'csrf', $('meta[name="csrf-token"]').attr('content') #<---- attention here
    IndexUsersCtrl = ($scope) ->
      $scope.users = gon.rabl
      console.log "I want to log the csrf value here" #<---- then attention
    IndexUsersCtrl.$inject = ['$scope']
    

       use the above code in Angular.js: Is .value() the proper way to set app wide constant.

    Answered on October 23, 2018.
    Add Comment

       Module.value(key, value) is used to inject an editable value, Module.constant(key, value) is used to inject a constant value

       The difference between the two isn’t so much that you “can’t edit a constant”, it’s more that you can’t intercept a constant with $provide and inject something else.

    // define a value
    app.value('myThing', 'weee');
    // define a constant
    app.constant('myConst', 'blah');
    // use it in a service
    app.factory('myService', ['myThing', 'myConst', function(myThing, myConst)
    {
      return
    {
        whatsMyThing: function()
    {
          return myThing; //weee
        },
        getMyConst: function ()
    {
          return myConst; //blah
        }
      };
    }]);
    // use it in a controller
    app.controller('someController', ['$scope', 'myThing', 'myConst',
      function($scope, myThing, myConst)
    {
        $scope.foo = myThing; //weee
        $scope.bar = myConst; //blah
      });
    
    Answered on October 23, 2018.
    Add Comment

    myvalues.js a file containing value – make sure it is including in our conf file

    var myConstantsModule = angular.module('test.models', []);
    myConstantModule.value('dataitem', 'thedata');
    // or something like this if needed
    myConstantModule.value('theitems',
    [
      {name: 'Item 1'},
      {name: 'Item 2'},
      {name: 'Item 3'}
    ]);
    ]);
    

    test/spec/mytest.js –

    describe('my model', function()
    {
      var theValue;
      var theArray;
      beforeEach(module('test.models'));
      beforeEach(inject(function(dataitem,theitems)
    {
        // note that dataitem is just available
        // after calling module('test.models')
        theValue = dataitem;
        theArray = theitems;
      });
     it('should do something',function()
    {
        // now you can use the value in your tests as needed
        console.log("The value is " + theValue);
        console.log("The array is " + theArray);
      });
    });
    
    Answered on October 23, 2018.
    Add Comment

    An alternative  proper way to set app wide constant in Angular.js is:

    // Storing a single constant value
    var app = angular.module(‘myApp’, []);
    app.constant(‘appName’, ‘My App’);
    // Now we inject our constant value into a test controller
    app.controller(‘TestCtrl’, [‘appName’, function TestCtrl(appName) {
    console.log(appName);
    }]);
    
    Answered on December 17, 2018.
    Add Comment

     

    The sample code for creating to set app wide constant is:

    
    angular.module('app', []);
    app.constant('MOVIE_TITLE', 'The Matrix');
    .controller('MyController', function (MOVIE_TITLE) {
    
    expect(MOVIE_TITLE).toEqual('The Matrix');
    
    });
    
    
    Answered on December 17, 2018.
    Add Comment
    angular.module('app',[])
    .value "ui.config", 
      tinymce:
        theme: 'simple'
        width: '500'
        height: '300'

    And my app is currently looking like this:

    window.app = angular.module("app", [ 'ui'])
    
    .config(["$routeProvider", ($routeProvider) ->
      $routeProvider
      .when "/users",
        templateUrl: "assets/templates/users/index.html"
        controller: IndexUsersCtrl
    
      .otherwise redirectTo: "/users"
    
    ])
    
    .value 'csrf', $('meta[name="csrf-token"]').attr('content') #<---- attention here
    
    IndexUsersCtrl = ($scope) ->
      $scope.users = gon.rabl
      console.log "I want to log the csrf value here" #<---- then attention
    IndexUsersCtrl.$inject = ['$scope']
    Answered on February 22, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.