Question

我是angularjs的新手并设置了一个基本的网络应用程序，用户可以登录以搜索和更新从其他网站发布的新闻文章。

我有两个问题：

1。用户登录状态： 我不确定如何维护可由所有控制器共享的用户的登录状态，并且在页面完全刷新时也应该恢复此状态。

2。部分模板和共享内容： 我已经设置了部分模板，如Login.html，Search.html，Update.html等，在我的app.js中，我已经定义了如下路线：

'use strict';

var namApp = angular.module('namApp', ['ngResource', 'ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider.when('/login',
            {
                templateUrl: '/App/templates/Login.html',
                controller: 'loginController'
            });
        $routeProvider.when('/search',
            {
                templateUrl: '/App/templates/Search.html',
                controller: 'searchController'
            });
        $routeProvider.when('/update',
            {
                templateUrl: '/App/templates/Update.html',
                controller: 'updateController'
            });
        $routeProvider.otherwise({ redirectTo: '/login' });
    });

现在我不知道如何设置控制器来处理我的顶部导航，页眉，页脚以及所有部分模板之间的所有其他共享内容。

任何帮助都将受到高度赞赏。

由于

Answer 1

<强> 1。用户状态：创建服务

您可以创建一个工厂来保存用户状态，然后您可以将其注入其他控制器。

例如：

app.factory('user', function($http){

  user = {
    loggedIn: false
    username: ''
    email: ''

    login: function (username, password){

      $http.post('/login', {username: username, password: password})

      .then( function(response) {
        user.loggedIn = true;
        user.username = response.data.username;
        user.email = response.data.email;
      });
      // TODO: ERROR HANDLING ETC.

    logout: function() { ... }

  }

  return user;

}

这个问题（正如您在问题中所提到的）是，如果您刷新页面，尽管用户已登录会话，但不会填充用户名，电子邮件等。你有两种选择来解决这个问题：

而不是直接访问user对象，定义一个getter，它将检查用户是否已填充，如果没有，将向服务器发出请求以获取当前会话（您显然会有在您的服务器上实现一个路由来执行此操作）
使用服务器端呈现将一些代码注入<script>标记，然后在window或类似内容上填充用户。然后，您的服务可以在实例化时查找此数据。

<强> 2。部分和共享用户界面

您的页面可以分成多个部分，routeProvider配置仅定义哪个控制器拥有具有ng-view属性的页面部分。我建议你的导航应该不在这个元素内部，因为这与路径无关（它始终存在）。您可以在html中使用内联ng-controller属性来定义导航后的哪个控制器。

对于你多次重复使用的东西，你应该研究指令，这些指令基本上是可重用的代码（模板和逻辑），可以定义自己的控制器。

Answer 2

您应该定义一个服务来处理您的登录状态。您还可以使用ngCookies在重新加载页面时保持状态。

您应该仅为要更改的元素定义ngView，具体取决于网址路径：

<html ng-app="namApp">
 <body ng-controller="myController">
  <div class="header">...</div>
  <div class="left-navigation">...</div>
  <div ng-view></div>
  <div class="footer">...</div>
 </body>
</html>

这样，只有具有ng-view属性的元素才会被模板替换。

Answer 3

回答1

您应该为这些类型的情况使用角度服务。你可以在那里定义你的逻辑并注入你想要的模块......你想要在刷新之后保持状态，通常当一个angularjs应用程序被引导时，它会再次像其他服务一样运行服务来保持你应该使用的状态{{ 3}}或$cookies

回答2

如果您使用的是$ routeprovider，那么您的html中应该有ng-view，并且绑定到ng-view部分的控制器只负责该部分，这意味着您可以自由地使用另一个控制器添加ng-controller ...

的部分HTML

Angularjs维护用户状态和部分模板

3 个答案: