Ways to use server date in an AngularJS application

问题

Is there a "nice" way to set the server's date to an angularJS app?

Let's say that I have an API route to get this, sort of /api/date and I can call it with an angular service called dateService:

angular.module('myApp').service('DateService', ['$resource', function ($resource) {
    return $resource('/api/date', { }, {
    });

}]);

I need to get the date as soon as the app starts because my html file uses a function based on that date to display something. Otherwise I'll get an "undefined" error everytime I call it.

Thanks in advance

回答1:

You can do that in app.run

var app = angular.module('myApp',[]);
app.run(function ($rootScope, $state, DateService) {

            // call date service and save it in $rootScope

        });

回答2:

Have the back-end server return a timestamp in UTC.
Parse the timestamp value with var date = new Date(serverTimestampValue);
You now have a JS Date object that can be used with Angular Date filters.

回答3:

If you are using ui-router for routing and if you need to learn the timestamp before showing anything to user you can use the resolve property of ui-router. Basically it resolves what you need before activating a state, and if you retrieve your server time in your parent state you can be sure that you will have the timestamp before anything starts in your application. Here is an example how to do it:

angular.module("yourApp").config(["$stateProvider", function ($stateProvider) {
        $stateProvider
            .state("topState", {
                abstract: true,
                template: "<ui-view></ui-view>",
                controller: ["$rootScope", "serverTimestamp", function ($rootScope, serverTimestamp) {
                    $rootScope.serverTime = new Date(serverTimestamp);
                    //Do what you need to do with the server time, from now on you will have access to server time from each controller in your app.
                }],
                resolve: {
                    serverTimestamp: ["", function (bakkalBrandService) {
                        return yourService.retrieveTimestampFromServer();
                    }]
                }
            })
    }])

回答4:

You can delay the execution of angular app by manually bootstrapping it rather than auto initialization. https://docs.angularjs.org/guide/bootstrap This way you can do the following to get the server settings and have it available when your angular app starts.

//Define a global settings object. add proper namespace as per your app.
var myServerConfig = (function () {
    var settings = {
        someDefaultSetting: 'someDefaultValue'
    };
    return {
        init: function (serverSettings) {
            settings = $.extend(settings, serverSettings);
        },
        settings: settings
    }
})();

//Define angular wrapper for your global object
var serverSettings = angular.module('server.settings', []);

serverSettings.factory('serverSettings', ['$window', function () {
    return $window.myServerConfig.settings;
}]);

//On dom ready get all settings and bootstrap angular app
$(document).ready(function () {
    //You will have to show some animation if you are making ajax call
    //also if errors out handle that scenario
    //Other option is to render settings from server on page load as mentioned in other answers
   $.ajax({
            type: 'GET',
            url: '/api/settings',
            error: function (error) {
               //show user message that app cannot be loaded
            },
            success: function (setting) {
                  myServerConfig.init(setting);
                  bootStrapMyApp();
            }
        });

function bootStrapMyApp() {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
}

回答5:

angular.module('myApp').service('DateService', ['$resource', function ($resource) {

  this.date = null;
  var self = this;

  $resource('/api/date', { }, {
  }).then(function(data){
      self.date = data.date;
  });
}]);

回答6:

You can assign it to a service variable after you get it.

angular.module('myApp').service('DateService', ['$resource', function ($resource) {
    this.date = null;
    var self = this;

    $resource('/api/date', { }, {
    }).then(function(data){
        self.date = data.date;
    });
}]);

Then call the service to get it when you need it.

$scope.date = function() {
    return DateService.date;
}

来源：https://stackoverflow.com/questions/31033745/ways-to-use-server-date-in-an-angularjs-application

标签

javascript

angularjs

server