AngularJS同样一个路由，不同的页面。
发布于 1个月前 作者 kilik52 487 次浏览 来自 问答

我想问一下，如果我同样一个路由，用户登录和没登陆是完全两个页面。比如/这个路由。 用户登录了是homepage.html，没登陆是landingpage.html。 这两个page的css，js都很不一样。 但是我想让用户看到的都在这个地址：/ 那这样的话，angularJS怎么去弄啊。$routeProvider好像没有办法做到conditional的templateUrl

7 回复

一种方法是：在一个模版中写好两个页面。然后用 ng-show=logined 的状态来显示

@Airead 那css的处理呢？

@kilik52 css 跟据不同的 class 或 tag 写就行了

在 routeProvider 前就做好处理不可以？ 比如

var templateUrl = "";
if (req.user){
    templateUrl = "homepage.html";
} else {
    templateUrl = "landingpage.html";
}

@russj 哪来的req.user?

app.config(['$routeProvider', '$locationProvider', '$httpProvider',
    function($routeProvider, $locationProvider, $httpProvider) {
        $routeProvider.
            when('/', {
                templateUrl: '/app/views/landing-page.html,
                css: ['stylesheets/landing-main.css','stylesheets/animate.css']
            }).otherwise({redirectTo: '/'});
}]);
2

sorry，req.user 是一般存在 服务器端的 request 里的, 你要得是在前端 可以看这个 http://stackoverflow.com/questions/20969835/angularjs-login-and-authentication-in-each-route-and-controller

你得从服务端来得到用户登录的状态 所以你的问题就变成了两个问题：

  1. 如何通过 angular 检查用户登录情况
  2. 如何做 conditional 的 templateUrl 在 angular 的router里 如果是用后端的router，你的问题就要简单些。

我用的 AngularJS 的 ui.router，可以在templateUrl 的 function 里做 condition 比较

  $stateProvider
  .state('articles', {
      url: '/:author',
      templateUrl: function ($stateParams){
        return $stateParams.author + 'List.html';
      },
      controller: 'ArticleCtrl'
    })

@russj 非常感谢！我去研究一下

回到顶部