javascript - Angular - 全局变量初始化一次 - 页面标题中的示例用户名

Question

在我的 Angular 应用程序中，我将登录的用户名存储在 cookie 中。 我想在网页标题中显示这个用户名。

我可以在我的 Controller 中检索它，如下所示并显示在页面中。

$rootScope.fullName = $cookies.get('user');

但是，是否可以在一个地方执行此操作并始终获取此数据，而不是在每个 Controller 中执行此操作？

更新#1:

我不使用 ui-view。我使用 Angular 路线，示例如下。 请问有什么简单的方法吗？

var mdmApp = angular.module('mdmApp');

// Routes
mdmApp.config(function($routeProvider, $httpProvider, $locationProvider) {

    $routeProvider
    .when('/listScopeAndFrequency/:reportTypeId', {
        templateUrl : '3_calendar/listScopeAndFrequencies.html',
        controller : "listScopeAndFrequenciesController"
    })
    .when('/listTemplateFrequencyExceptions/:reportTypeId/:consolidationScopeCode/:frequencyCode', {
        templateUrl : '3_calendar/listTemplateFrequencyExceptions.html',
        controller : "listTemplateFrequencyExceptionsController"
    })
    .when('/viewSubmissionDates', {
        templateUrl : '3_calendar/viewSubmissionDates.html',
        controller : "viewSubmissionDatesController"
    })

更新#2

我尝试如下，但无法从 REST API 获取任何动态值，我只能对值进行硬编码。无法从 cookie、localStorage 或 var 中读取，所有这些都未定义或给出错误。

mdmApp.factory('userService', function($http, $localStorage, $cookies) {

var fullName ;
    // Gets user details
    $http.get("/mdm/getUser")
        .success(function(data, status, headers, config) {
            console.log('userService > user : ' +data.fullName);
            fullName = data.fullName;
            $localStorage.user = data;
            $cookies.put('user', data.fullName);
        })
        .error(function(data, status, headers, config, statusText) {
            console.log("Error while retrieving user details.");
        });

    console.log('fullName : ' +fullName);
    console.log('$cookies.get(user) : ' +$cookies.get('user'));
    console.log('$localStorage.user : ' +$localStorage.user);

    return { name: "hard code only works here"};
});


mdmApp.directive('userTitle', ['userService', function(user) {
    console.log('userTitle > user : ' +user);
  return {
    template: user.name,
  };
}]);

Answer 1

为什么不使用服务？这些是专门为此任务设计的:

Angular services are:

• Lazily instantiated – Angular only instantiates a service when an application component depends on it.
• Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

---

我是如何做到的(不一定是最好的方法):

• 设置一个独立的 Angular 应用程序(非安全区域)用于用户注册，登录时在 Cookie 或 localStorage 中存储 token 或某些标识符
• 在实例化完整的 Angular 应用程序(安全区域)时，创建一个服务，该服务将返回之前的值并在需要用户时注入(inject)它

我的用户服务如下所示:

angular.module('app.core')
.service('User', User);

function User($rootScope, localStorageService) {
  let user = localStorageService.get('user');
  let token = localStorageService.get('userToken');

  if(!token) {
    //this loads another angular app which has nothing to do with this secured area (on /login)
    window.location = '/login' 
    return;
  }

  for(let i in user)
    this[i] = user[i]

  this.token = 'Bearer ' + token;

  //note you could reference this to the rootScope so that every scope can have the User object, this can be considered as bad practice!
  //$rootScope.user = this;

  return this;
}