在使用AngularJS登录时，创建一个服务以更改屏幕上的用户名

Question

我在node.js web应用程序上使用angularjs用于客户端。

基本上，当用户登录时，我需要存储其用户名并将其绑定到屏幕上的元素。

而不是在会话中存储的另一种存储信息的方法。

我有一个模板页面，其中显示了其中显示的元素：

<div class="header">
<h3 class="text-muted">This is a template</h3>
<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Username here<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
        </ul>
    </li>
</ul>

我需要为模板页面创建一个控制器方法，该方法将在我的app.js文件中调用一个将获取用户名的服务？

Answer 1

方法

我建议将工厂用作AngularJS服务。您可以从API请求用户信息，并将其作为JSON对象存储在工厂中。在您的控制器中，您可以加载工厂并获取所需的信息，例如用户名。

由于每个AngularJS服务都是单身人士，您可以确定只有一个带有用户信息的实例。

---

代码

服务（工厂）：

app.factory('UserService',
  function($http) {
    // Here you can call a RESTful API resource,
    // store a JSON object in the application scope
    // and return it by this service to any controller.
    return {
      getUsername: function() {
        return "tjhack"
      }
    };
  });

控制器：

app.controller('MainCtrl', function($scope, UserService) {
  $scope.username = UserService.getUsername();
});

---

示例

http://plnkr.co/edit/wma66tx6fefzrjzprwun?p=preview

Answer 2

查看此视频https://www.youtube.com/watch?v=62rvrqumvyg google from Google double double double tlow team team如何处理各种构建Angular App的各种挑战。一开始，他们解释了如何从服务器发送用户信息并存储Angular。

简短摘要：将用户详细信息作为JSON有效载荷到HTML文档本身，然后使用服务存储和访问此数据。