在Angular函数中访问Get变量

时间:2013-02-21 18:28:14

标签: javascript node.js express angularjs

我正在使用node express和angular js构建应用程序。我将一个变量传递给我的视图,如下所示......

app.get('/profile', ensureAuthenticated, function(req, res){
  res.render('profile', { user: req.user });
});

我可以在我的视图中访问这个变量(jade)......

h1 #{user}

但是如何从控制器或指令中的角度函数访问此变量?

5 个答案:

答案 0 :(得分:7)

我写了一篇关于这个主题的博客文章 - How to pass JavaScript Variables from a server to Angular

总之,您有三种选择:

  1. 使用内联JavaScript代码(不推荐)
  2. 发出HTTTP请求(正如您在自己的解决方案中所示)
  3. 使用ngInit
  4. 您可以阅读我的帖子中的详细信息,我只会展示最后一个,也是我认为最聪明的解决方案。

    要将user对象从快速服务器传递到Angular控制器,请使用ngInit指令:

    div(ng-controller="UserCtrl", ng-init="user= #{JSON.stringify(user)}")
    

    将内容加载到Angular范围内,您应该可以通过调用$scope.user在控制器内访问它。

    function UserCtrl($scope) {
      console.log($scope.user);
    }
    

答案 1 :(得分:2)

ng-init 在Angular中加载/存储常量的方式。介绍,Angular方式:

<script>
  angular.module('$preloaded', []).constant('$preloaded', <%= preloaded %>)
</script>

然后,您可以在代码中的任何位置注入$preloaded依赖项并访问常量。

答案 2 :(得分:0)

听起来我可能会以不理想的方式混合东西。我认为最好的方法是使用Angular代码中的$resource来调用/ profile并以这种方式获取数据。

以这种方式思考,您只是使用node来创建Web服务,现在您使用AngularJS从您的Services层调用Web服务。调用它的代码非常简单,可以在我链接的文档中找到。

您可能还想查看FoodMe demo,它使用node.js作为Web服务层,angularJS作为客户端UI图层,完全按照您设置的方式。

答案 3 :(得分:0)

感谢James,FoodMe演示看起来像是一个很好的学习资源。看完你的回复后,它改变了我的想法,让我想出了自己的解决方案。我会将其添加为替代答案,因为评论中的代码很糟糕。为了提高我对节点和角度如何协同工作的理解,也许你或其他人可能会对我们的两个解决方案的比较以及为什么或何时可能更好的方式进行评论。

在我的快递app.js中......

app.get('/api/user', api.user);

和我的路线/ api.js ......

exports.user = function (req, res) {
  res.json(req.user);
};

然后在我的角度控制器......

function profileCtrl($scope, $http) {

  $http.get('/api/user/').success(function(data) {
    $scope.user = data;
  });
}

答案 4 :(得分:0)

这是一个旧帖子,但是相关的帖子。 Zemrico的答案很好但需要更新,因为jade / pug语法有一些变化。首先,他的答案中的链接已被破坏,应该是

http://www.mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular

如果您正在阅读博客文章,请注意以下内容不再适用,因为哈巴狗不再接受插值作为属性。

div(ng-controller="UserCtrl", ng-init="user= #{JSON.stringify(user)}")

相反,请使用此功能。

div(ng-controller="UserCtrl", ng-init="user=" + JSON.stringify(user) )