Question

我需要创建下一个层次结构：我的应用程序中有几个用户角色。我的应用程序界面包含一个顶部导航栏，每个角色都有不同的标签。每个选项卡通常都有主 - 详细视图，其中显示了一些实体，默认情况下加载了第一个实体。

在努力进行身份验证之前（我发现了一些关于http拦截器等的文章）我想知道如何做最简单的事情：导航系统。

例如，假设我硬编码了我的用户角色，默认情况下会加载管理员角色。我有一个顶部导航所在的cp.html文件。如果用户登录后我转到'/'路由，我应该使用admin标签将他重定向到cp.html。如果用户未登录，我应该将他重定向到'/ login'页面。

这是cp.html：

的示例

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#/desktop">Desktop</a></li>
            <li><a href="#/companies">Companies</a></li>
            <li><a href="#/users">Users</a></li>
        </ul>
    </div>
</div>
<div ng-include src="include">
</div>

这是家庭（'/'）控制器：

function homeController($scope, $routeParams, $location) {
    if ($routeParams.tab) {
        $scope.include = '/templates/' + $routeParams.tab + '.html';
    } else {
        $scope.include = '/templates/companies.html';
    }
}

主app.js：

app.config(['$routeProvider', function($routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: 'templates/cp.html',
        controller: homeController
    })

    .when('/:tab', {
        templateUrl: 'templates/cp.html',
        controller: homeController
    })

所以这里取决于：tab参数我可以包含不同的.html模板。但是如何处理控制器呢？假设我想去公司标签。我想要我的导航栏+公司内容。如果我单击公司选项卡，文件包含但我留在homeController。如果我使用ng-controller指令，那我怎样才能得到公司的id？在典型示例中，我们有/ companies /：companyId route。但是，如果我在routeProvider中使用此路由，那么我应该将什么作为templateUrl？此外，当我点击公司标签时，我不会更改我的网址，只包括companies.html。

我对AngularJS中的嵌套视图和路径感到困惑。我不想使用第三方库，试图弄清楚如何处理这个......

提前致谢

Answer 1

看看angular ui-router，我认为这正是你要找的。也请尝试their example app。

嵌套视图和控制器

1 个答案: