Javascript Angularjs维护用户状态和部分模板_Javascript_Angularjs_Angularjs Service_Angularjs Routing

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

javascript angularjs

Javascript Angularjs维护用户状态和部分模板,javascript,angularjs,angularjs-service,angularjs-routing,Javascript,Angularjs,Angularjs Service,Angularjs Routing,我是angularjs的新手，我建立了一个基本的web应用程序，用户可以登录该应用程序来搜索和更新从不同网站发布的新闻文章我有两个问题： 1。用户的登录状态：我不确定如何维护用户的登录状态，该状态可由所有控制器共享，并且在页面完全刷新时也应恢复该状态 2。部分模板和共享内容：我已经设置了部分模板，如Login.html、Search.html、Update.html等，在我的app.js中，我定义了如下路径： 'use strict'; var namApp = angular.modu

我是angularjs的新手，我建立了一个基本的web应用程序，用户可以登录该应用程序来搜索和更新从不同网站发布的新闻文章

我有两个问题：

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' });
    });

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

我们将非常感谢您的帮助

谢谢回答1

对于这些类型的情况，应该使用角度服务。您可以在那里定义您的逻辑并插入您想要的模块。。。问题是你想在刷新后保持状态，通常当angularjs应用程序启动时，它会再次像其他应用程序一样运行服务，以保持你应该使用的状态

答案2

如果您正在使用$routeprovider，那么您应该在html中的某个地方拥有

ng视图

，绑定到ng视图部分的控制器只负责该部分，这意味着您可以通过添加

ng控制器

…

1，自由地为html的其他部分使用另一个控制器。用户状态：创建服务

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

对于exmaple：

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，它将检查用户是否已填充，如果未填充，它将向服务器发出请求以获取当前会话（显然，您必须在服务器上实现一个路由才能做到这一点）

使用服务器端呈现将一些代码注入

标记，然后在

窗口或类似窗口中填充用户。然后，当您实例化该数据时，您的服务可以查找该数据


2。部分和共享用户界面
您的页面可以分为多个部分，routeProvider
配置仅定义哪个控制器拥有具有ng view
属性的页面部分。我建议您的导航不应该在该元素内，因为它独立于路线（它始终存在）。您可以在html中使用内联ng controller
属性来定义哪个控制器负责导航
对于您多次重用的东西，那么您应该研究指令，这些指令基本上是可重用的代码位（模板和逻辑），可以定义它们自己的控制器
您应该定义一个服务来处理您的登录状态。您还可以使用在重新加载页面时保持状态
应根据url路径，仅为要更改的元素定义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属性的元素才会被模板替换。
请将此问题分成两个单独的问题。您好，Ed，感谢您的快速回复。您建议的用于维持状态的选项1似乎与我的想法类似。你能给我举个详细的例子吗。我正在考虑在初始化服务时从服务器获取状态，我相信在加载ngApp时，即在整页刷新后，该服务只初始化一次。应该使用sessionStorage
，因为sessionStorage
固定在特定选项卡上，并且浏览器中的所有选项卡都可以使用本地存储。