Question

所以基本上我使用的是角度路由，只使用express来渲染索引页面。

我想将会话变量从express传递给angular但我不知道如何在每个角度路径中获取该变量。

app.js（表达）：

app.get('*', function (req, res) {
    res.sendFile(__dirname+'/client/views/index.html',{
        isAuthenticated:req.isAuthenticated(),
        user:req.user
    });
});

的index.html

<body>
<div class="main" ng-view>
    </div>
  </body>

Angular应用程序文件：

var myapp=angular.module('myApp', ['ngRoute','ngStorage']);
myapp.controller('contrl1', ['$scope' ,'$localStorage','$http', 
  function ($scope,  $localStorage,$http) {

  }]);
myapp.controller('contrl2', ['$scope' ,'$localStorage','$http', 
      function ($scope,  $localStorage,$http) {

      }]);
myapp.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/try', {
    templateUrl: '../views/view1.html',
    controller: 'contrl1',
  })
  .when('/hello', {
    templateUrl: '../views/view2.html',
    controller: 'contrl2',

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

所以基本上我想发送Isauthenticated变量和用户变量，这些变量和用户变量将具有会话值，从快速到角度。我应该如何继续这样，以便角度中的所有路径都可以访问这些值，以及如何获取这些值相应角度控制器中的值。

Answer 1

    app.get('*', function (req, res) {
        res.sendFile(__dirname+'/client/views/index.html',{
            isAuthenticated:req.isAuthenticated(),
            user:req.user
        });
    });

真是个坏主意。有更好的方法来做到这一点。这就是您面临问题共享的原因。以下方法将起作用，请注意我的解决方案只是为了让您开始如何做这样的事情，使其安全，您可能必须重新构建您的angularjs应用程序，并做我正在做的事情但在里面ng-service或ng-factory并在控制器中注入它们。这样您就可以访问它了。

考虑一下。

app.js

    var express = require('express');
    var path = require('path');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');

    var routes = require('./routes/index');

    var app = express();

    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'hbs');

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    //This is very important, serve all your static files through public folder
    //Just inject your session variables to index.html, DO NOT PUT index.html
    //In you public folder, instead use index.hbs view as shown 

    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', routes);


    // catch 404 and forward to error handler
    app.use(function(req, res, next) {
      var err = new Error('Not Found');
      err.status = 404;
      next(err);
    });

    // error handlers

    // development error handler
    // will print stacktrace
    if (app.get('env') === 'development') {
      app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
          message: err.message,
          error: err
        });
      });
    }

    // production error handler
    // no stacktraces leaked to user
    app.use(function(err, req, res, next) {
      res.status(err.status || 500);
      res.render('error', {
        message: err.message,
        error: {}
      });
    });


    module.exports = app;

./路由/ index.js

    var express = require('express');
    var router = express.Router();

    /* GET home page. */
    router.get('/', function(req, res, next) {
      res.render('index', {
        title: 'Pass session vairabled to my hbs',
        isAuthenticated: true,
        user: JSON.stringify({id: 2, name: 'dummy'})
      });
    });

    module.exports = router;

./视图/ layout.hbs

    <!DOCTYPE html>
    <html>
      <head>
        <title>{{title}}</title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        {{{body}}}

        <!-- References of Angular.js and all your other angular files and services go here -->
        <script>
           var isAuthenticated= {{isAuthenticated}};
           var user = {{{user}}};
        </script>
      </body>
    </html>

./视图/ index.hbs

    <h1>{{title}}</h1>

    <div class="main" ng-view>
    </div>

以下是快照 - 概念验证。

现在我已经在普通的公共js变量中注入了变量，你需要编写ng-service / ng-factory来封装。

以下是我建议的结构

    .
    ├── LICENSE
    ├── README.md
    ├── app.js
    ├── bin
    │   └── www
    ├── package.json
    ├── public
    │   ├── images
    │   ├── javascripts
    │   ├── views
    │   │   └── <angular view templates>
    │   └── stylesheets
    │       └── style.css
    ├── routes
    │   └── index.js
    │   
    └── views
        ├── error.hbs
        ├── index.hbs //Your actual index file, this will contain ng-view
        └── layout.hbs

希望这有帮助!!如果我能得到任何进一步的帮助，请告诉我。

Answer 2

我不相信这是可能的。

即使使用sendFile，只要您设置了view engine，就可以在文件中使用任何想要的模板内容。

你可以将它存储在一个可能隐藏的元素中，然后只使用js从中获取信息，或者我认为angular在控制器加载后使用类似服务的东西来加载这类数据

<input type="hidden" id="auth" value="#{authenticated}"/>

然后只需使用JavaScript在控制器加载后获取值

但这是hacky而不是真正有意义的做事方式。我很确定你应该为此使用服务。

如何将会话变量从express / node传递给angular？

2 个答案: