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

问题描述

我试图建立类似，即如果我是任何社交网站的导航菜单登出我可以看到输入字段要求用户名和密码，但如果我是登录 - 在然后我能看到我的个人资料，设置等。

我试图做同样的事情，但不能一点的方法来此我只需要知道的方式，我可以做到这一点。我知道在哪个角度指令的使用类似用例NG-如果等，但我正在考虑以某种方式使用谐音的。

我用 AngularJs 与 UI-路由器。

解决方案

的 UI路由器解决方案也能像这个的 plunker ，我创建了展现的的 UI路由器办法。有没有必要使用一些视图渲染指令ALA NG-如果， NG-节目 ...这实际上从移动业务逻辑到视图中。

借助例如显示了一个COM prehensive设计，具有重定向未经授权的用户，以及给予公众accesss任何人，在一个视图中，等开/关支持日志。

更好的方法是从的内置功能中获益UI路由器，例如：

模板的（让我举：）

  

TemplateUrl 结果
  ... templateUrl 也可以是返回URL的功能。 它需要一个preSET参数， stateParams ，这是不注入。

  
  

TemplateProvider 结果
  或者你也可以使用模板提供商函数可以注射，先后获得当地人，并且必须返回HTML模板...

所以，我们可以在我们的例子中看到。首先有两个观点根状态，其中一个是标准的定位，对所有主要子无名的意见用户界面视图=

  $ stateProvider
.STATE（'根'，{
  摘要：真实，
  观点：{
    ''：{templateUrl：tpl.root.html'，}，
    LOGINFO @根'：{
      templateProvider：templateSelector，
      控制器：'LoginCtrl'，
    }
  }
}）
 

其中 templateSelector 会是这样的：

  VAR templateSelector =功能（$ HTTP，UserService）
{
  VAR TEMPLATENAME = UserService.isLogged
    ？ tpl.loggedin.html
    ：tpl.loggedoff.html
    ;  返回$ HTTP
    获得（TEMPLATENAME）
    。然后（功能（TPL）{
      返回tpl.data;
    }）;
};
 

在这个例子中简单设置，依托：

  .factory（'UserService'，函数（）{
  返回{
    isLogged：假的，
  };
}）
 

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

• tpl.loggedin.html


• tpl.loggedoff.html

剩下的东西是pretty可预期的，国家的定义，对未经授权的访问重定向的一些...请遵守的例如的。

这是基于这样的事实互换如果用户登录或关闭

检查解决方案本工作 plunker

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.

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.

I'm Using AngularJs with UI-Router.

解决方案

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.

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

Templates (let me cite:)

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

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

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',
    }
  }
})

where the templateSelector would be like this:

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;
    });
};

Relying on simple setting in this example:

.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

Check the solution in this working plunker

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