在 AngularJs 中使用 UI-Router 更改导航菜单 [英] Changing Navigation Menu using UI-Router in AngularJs

问题描述

我正在尝试构建一个像任何社交网站一样的导航菜单，即如果我注销，我可以看到输入字段要求用户名 和密码 但如果我logged-In 然后我可以看到我的个人资料、设置等.

I'm trying to build a navigational menu like any social networking site i.e. If i'm logged-Out i Can see the input fields asking for Username and Password but if I'm logged-In then i get to see my profile ,settings ,etc.

我正在尝试做同样的事情，但无法解决这个问题，我只需要知道我可以这样做的方式.我知道使用 angular 指令的用例，例如 ng-if 等，但我正在考虑以某种方式使用部分.

I'm trying to do the same thing but Cannot thing of an approach to this i Just need to know the way i can do this. I know the use case in which angular directive are used like ng-if ,etc but i'm thinking of using partials in some way.

我将 AngularJs 与 UI-Router 一起使用.

I'm Using AngularJs with UI-Router.

推荐答案

ui-router 解决方案可能类似于 plunker，我创造了展示ui-router方式.没有必要使用一些视图渲染指令ala ng-if, ng-show... 这实际上将逻辑从业务转移到视图中.

The ui-router solution could be like in this plunker, I've created to show the ui-router way. There is no need to use some view rendering directives ala ng-if, ng-show... which in fact moves the logic from business into the view.

示例 展示了一个全面的设计，也为未经授权的用户提供重定向向任何人授予公共访问权限，支持在一个视图中登录/注销等.

The example shows a comprehensive design, with redirections for unauthorized users, as well to grant the public accesss to anybody, supporting log on/off in one view, etc.

更好的解决方案是利用 ui-router 的内置功能，例如:

Better solution is to profit from built-in features of the ui-router, e.g.:

TemplateUrl
... templateUrl 也可以是一个返回 url 的函数.它需要一个预设参数，stateParams，它没有被注入.

TemplateUrl
... templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT injected.

模板提供者
或者您可以使用模板提供程序函数，该函数可以被注入，可以访问本地人，并且必须返回模板 HTML...

TemplateProvider
Or you can use a template provider function which can be injected, has access to locals, and must return template HTML...

那么，我们可以在示例中看到什么.首先有一个有两个视图的根状态，其中一个是标准锚点，用于所有主要的子未命名视图 ui-view=""

So, what we can see in our example. Firstly there is a root state with two views, one of them is standard anchor, for all main child unnamed views ui-view=""

$stateProvider
.state('root', {
  abstract: true,
  views: {
    '': {templateUrl: 'tpl.root.html', },
    'loginfo@root': {
      templateProvider: templateSelector,
      controller: 'LoginCtrl',
    }
  }
})

templateSelector 应该是这样的:

var templateSelector = function($http, UserService) 
{
  var templateName = UserService.isLogged
    ? "tpl.loggedin.html"
    : "tpl.loggedoff.html"
    ;

  return $http
    .get(templateName)
    .then(function(tpl){
      return tpl.data;
    });
};

本例依赖简单设置:

.factory('UserService', function() {
  return {
    isLogged: false,
  };
})

就是这样，我们有两个模板:

And that's it, we do have two templates:

• tpl.loggedin.html"
• tpl.loggedoff.html"

剩下的东西是相当可预期的，状态定义，未经授权访问的一些重定向......请注意示例.

The remaining stuff is pretty expectable, state definitions, some redirection on unauthorized access... please observe the example.

根据用户是否登录而互换

which are interchanged based on the fact if user is logged on or off

检查这个有效的plunker

这篇关于在 AngularJs 中使用 UI-Router 更改导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！