关于javascript:AngularJS-处理手动输入的URL的状态的最佳方法

AngularJS - Best Way to Handle State on Manually Entered URLs

我目前有一个基于meanjs堆栈样板的设置,在该站点中,当我浏览站点的URL时,可以让用户登录为处于"登录"状态的状态。这是由于将用户对象保存在一个服务中,而该服务在全球范围内变得可用。

但是,仅当我从基本根目录(即从'/'导航,并且仅在我的应用程序中导航)时,此方法才起作用。

如果我手动输入" / page1"之类的URL,它将丢失全局用户对象,但是,如果我转到根主页并通过该站点导航至" / page1"。那就很好了,它会在Service对象中看到全局用户对象。

所以我想这是由于整页刷新会丢失全局值而导致的,该值通过站点导航不会刷新,因此您保留所有变量。

一些注意事项:

  • 我已启用HTML5Mode,并使用前缀"!"。
  • 我使用UI-Router
  • 我使用带有'/'的标签
  • 我有一条关于express的重写规则,即加载完所有路由后,我有最后一条路由,它将所有" / *"都发送到并发回了根index.html文件,这是angularjs所在的位置。
  • 我只是想知道人们在这里做什么?他们会还原标准的cookie和本地存储解决方案吗?我对angular还是比较陌生,所以我猜想那里有图书馆。

    我只是想知道建议的处理方式或多数人的处理方式,所以我以正确的方式和想像的方式与我保持一致。

    更新:

    如果我通过地址栏手动导航到站点上的另一个URL,则会丢失用户状态,但是,如果我通过地址栏手动返回到根目录,则会再次看到我的用户状态,所以这并非简单关于窗口刷新时的丢失状态。因此,似乎与在根URL上运行的代码有关。

    我有一个明确的重写,即手动输入的URL(由于HTML5位置模式)应首先返回index.html,因为它包含AngularJs文件,然后UI-Route接管并正确地对其进行路由。

    因此,我希望根目录上的所有代码都能执行,因此它应该类似于通过站点导航或在地址栏中键入内容。我一定缺少有关Angular的具有此作用的信息。

    更新2

    对,所以更多的调查使我想到了这一点:

    1
    2
    <script type="text/javascript">
        var user = {{ user | json | safe }};

    这是index.html的服务器端代码,我猜想通过手动URL将页面刷新到新页面时不会运行此代码。

    使用哈希爆炸模式,它可以工作,这是因为使用哈希爆炸模式,即使我在浏览器中键入URL,也不会导致刷新,而在使用HTML5模式时,它确实会刷新。因此,现在我能想到的解决方案是使用sessionStorage。

    除非有更好的选择?

    更新3:

    使用HTML5Mode时似乎最好的处理方法是,您只需要在Express服务器上进行重写,并进行其他操作即可。


    最后,我确实遇到了很多麻烦,但是设法通过做一些可以分解为步骤的事情来使它工作,这些步骤适用于使用HTML5Mode的用户。

    1)在Angular中启用HTML5Mode后,请在服务器上进行重写,以使其发送回包含Angular src js文件的index.html。请注意,此重写应在静态文件和常规服务器路由之后(例如在REST API路由之后)结束。

    2)确保angular路由与服务器路由不同。因此,如果您具有前端状态/ user / account,则没有服务器路由/ user / account,否则它将不会被调用,请将服务器端路由更改为/ api / v1 / server / route之类的内容。

    3)对于要触发直接调用服务器而不需要通过Angular状态/路由的前端中的所有定位标记,请确保添加了" target = _self"。


    我认为您做对了,但您可能希望查看应用程序可能需要的所有路由,并只考虑一些基本结构(API,用户,会话,部分等)。看起来就像是要让它变得复杂的那些问题之一。

    就最佳实践而言,您可以遵循angular-fullstack-generator或meanio项目。

    您正在做的事情看起来最接近mean.io,这主要是因为它们也使用了ui-router,尽管它们似乎保留了hashbang,而且看起来更像是SEO友好的网站,带有一些独立的SPA页面能力。
    您可能可以安装它并在我在这里解释之前找到代码,所以-

    1
    2
    3
    npm install -g meanio
    mean init name
    cd [name] && npm install

    全角堆栈看起来像这样,这是更典型的路由的一个很好的例子:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // Server API Routes
    app.route('/api/awesomeThings')
      .get(api.awesomeThings);

    app.route('/api/users')
      .post(users.create)
      .put(users.changePassword);
    app.route('/api/users/me')
      .get(users.me);
    app.route('/api/users/:id')
      .get(users.show);

    app.route('/api/session')
      .post(session.login)
      .delete(session.logout);

    // All undefined api routes should return a 404
    app.route('/api/*')
      .get(function(req, res) {
        res.send(404);
    });

    // All other routes to use Angular routing in app/scripts/app.js
    app.route('/partials/*')
      .get(index.partials);
    app.route('/*')
      .get( middleware.setUserCookie, index.index);

    然后为了简单起见,使用一些正则表达式找到了部分内容,并且在不渲染的情况下进行了交付,例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var path = require('path');

    exports.partials = function(req, res) {
     var stripped = req.url.split('.')[0];
     var requestedView = path.join('./', stripped);
     res.render(requestedView, function(err, html) {
       if(err) {
         console.log("Error rendering partial '" + requestedView +"'\
    "
    , err);
         res.status(404);
         res.send(404);
       } else {
         res.send(html);
       }
     });
    };

    然后显示索引:

    1
    2
    3
    exports.index = function(req, res) {
      res.render('index');
    };