会话用户名不在angularjs ngView模板中显示，但在ngView之外

Question

因此，我可以通过成功重定向中的mongoose passport-local显示用户名：

app.get('/profile', isLoggedIn, function (req, res) {
    res.render('profile.html', {
        user: req.user
    });
    console.log(req.user.local.username) //correct username for the session
});

...然后使用它在profile.html中显示：

<p><%= user.local.username %></p>

...当我尝试在ng-view中显示相同内容时：

<div ng-view ng-class="slide" class="slider"></div>

...通过我的路线example.html模板：

<p>welcome <%= user.local.username %></p>

..显示如下：不是正确的用户名...

是否无法在ngView中包含此信息？是否有解决方案在我的模板中包含此信息？我试图用$ http：

设置一个工厂

angular.module('userService', [])

.factory('Users', function($http) {
    return {
        get : function() {
            return $http.get('/profile');
        }
    }
});

...但是它返回了整个html，所以不是正确的解决方案。

任何指导都会受到欢迎和赞赏，所以提前感谢！

编辑回复： 获得价值并路由它不是真正的问题。问题只是让它在ngView中正确显示。

继承我的更新代码：

Rules.get()
        .success(function (data) {
            $scope.rules = data;
            console.log('Rules.get()');
            console.log(data);

            Users.get()
                .success(function (username) {
                    Users.username = username;
                    console.log('Users.get()')
                    console.log(username)
                });
        });

...和...

angular.module('userService', [])

.factory('Users', function ($http) {
    return {
        get: function () {
            console.log('userService')
            return $http.get('/profile/user');
        }
    }
});

...从：

返回

app.get('/profile/user', function (req, res) {
    console.log('profile/user')
    console.log(req.user.local.username)
    res.json(req.user.local.username);

});

这给了我相同且正确的用户名，但是我可以将它称为什么来让它在ngView中显示？如果放在实际的ngView div之外，它显示正常。

从上面{{username}} {{rules.username}} =没有。 ngView模板中的服务参数的名称应该是什么（我假设它是一个全新的$ scope）？

Answer 1

  

问题可能是Angular and Express routing的重复吗？

您可以在ng-views中包含ejs模板（如<%= value %>）（请参阅上面的链接），但这里还有其他三个选项。

许多人将服务器数据传递给Angular并让Angular模板化他们的视图（例如在MEAN堆栈中）。这意味着您不需要在角度偏差中使用ejs模板。以下是将数据从服务器传递到Angular的三种方法（感谢此博文：http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/）：

1。 MEAN方法

第一个是MEAN堆栈中使用的内容。您可以在ng-view周围的包装器中发送Angular应用程序所需的所有数据：

<!-- head -->
<!-- body -->
<!-- ng-view element -->

<script type="text/javascript">window.user = <%- user %>;</script>

<!-- rest of js -->
<!-- /body -->

这样，您的Angular应用程序可以通过提供程序访问数据，如下所示：

angular.module('myApp')
.factory('UserData', [
    function() {
        return {
            user: window.user
        };
    }
]);

2。使用$http和api

第二个是通过restful api提供此数据，并使用$http或$resource通过提供商请求数据：

angular.module('myApp')
.factory('UserData', [
    function($http) {
        $http.get('/userAPI').success(function(data){
            return data;
        });
    }
]);

3。使用ng-init

最后，您可以在ng-init中使用服务器端模板。

<div ng-init="user = <%- data %>"></div>

这会将$scope.user上的数据用于您的Angular应用。

Answer 2

所以这是我可能正在搜索的其他人的解决方案：

users.js：

angular.module('userService', [])

.factory('Users', function ($http) {
    return {
        get: function () {
            console.log('userService')
            return $http.get('/profile/user');
        }
    }
});

route.js

$scope.username = {};    
.controller('cntrl', function ($scope, Users) {
        getCurrentUser(Users, $scope);
    })

        function getCurrentUser(Users, $scope) {
        Users.get()
            .success(function (username) {
                $scope.username = username.user;
            });
    }

service.js：

app.get('/profile/user', function (req, res) {
    console.log('profile/user')
    console.log(req.user.local.username)
    res.jsonp({ user:req.user.local.username});

});

然后在html中（在任何ngView模板中）：

<span class="username">{{username}}</span>

关键是：

$scope.username = {};