当前位置: 首页 > 面试题库 >

Angular ui-router:ui-views vs指令?

伯博
2023-03-14
问题内容

的角度UI路由器允许 多个嵌套视图
。这些可互换视图的作用似乎与指令的作用重叠。

使用(多个,嵌套的) ui-view s vs angular 指令的 利弊是什么?

更新

状态和路由是两个不同的功能。状态允许您换出partial.html模板及其控制器,并且您可以(可选地?)指定相应的URL /路由。

在Tim Kindberg(ui-router开发人员)的电子邮件回复中:

ui-view是一个指令,因此,如果使用它,则使用的是特别针对与ui-
router模块其余部分配合使用的指令。我无法想象使用自己的指令来替换此功能很容易。

对此,您似乎可以有2个选择:

普通指令:

app.directive('myDir1', {/*  controller: ... */})
   .directive('myDir2', {/*  controller: ... */})

vs ui-view“指令”

$stateProvider.state('route1', {
     /*  url: "/route1", // optional?? */
      views: {
        "myDir1": { templateUrl: "myDir1.html" /* , controller: ... */ },
        "myDir2": { templateUrl: "myDir2.html" /* , controller: ... */ }
      }
    })

奖励问题:

是正常的角度指令功能提供给意见?如:

  • 包含
  • 更换
  • 隔离范围
  • 编译/链接功能

如果ui-views ARE指令,则显然它们的用法是不同的。协调这些模型是否有意义?


问题答案:

如果使用Angular UI路由器的内联视图指向指令又如何呢?

假设您有一个表指令,用于处理用户帐户上的CRUD操作。我们将指令命名为user-admin。我们的路线文件如下所示:

.state('users', {
  url: '/users',
  template: "<user-admin>"
});

这会给您带来很多好处:

  • 允许您直接指向指令的网址
  • 当状态仅是指令时,消除了需要两个模板(视图模板和指令模板)的重复
  • 允许您开始在Angular 2.0的准备中将更多的控制器逻辑转移到指令中。看到这里和这里。


 类似资料:
  • Angular UI 顾名思义,AngularJS 的UI增强指令集,提供了IE、jQuery 兼容,以及一些常用 UI 组件。 包含的模块有:      UI-Utils     UI-Modules     UI-Alias     UI-Bootstrap     NG-Grid     UI-Router     IDE Plugins     GSoC

  • 问题内容: 我在应用程序中使用和嵌套状态,并且我还有一个导航栏。导航栏是手写的,用于突出显示当前状态。它是一个两级导航栏。 现在,当我进入时,说我希望同时突出显示(在1级)和(在2级)。但是,使用时,如果我处于状态,则仅突出显示该状态,而不突出显示。 有什么办法可以使该状态突出显示? 问题答案: 代替这个- 你可以这样做- 目前不起作用。这里正在进行讨论(https://github.com/an

  • 本文向大家介绍浅析webapp框架AngularUI的demo,包括了浅析webapp框架AngularUI的demo的使用技巧和注意事项,需要的朋友参考一下 angularUI下载地址:https://github.com/Clouda-team/BlendUI 下载解压后,demo在根目录 现在测试官网demo的使用 用浏览器打开mobile-angular-ui-master/demo/in

  • 本文向大家介绍webapp框架AngularUI的demo改造之路,包括了webapp框架AngularUI的demo改造之路的使用技巧和注意事项,需要的朋友参考一下 目的:把AngularUI的模板应用到现有项目上 步骤如下: 按功能表修改demo界面 学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段 继续阅读demo.js的执行脚本   

  • 问题内容: 引用的SO是一个非常有用的问题,答案非常有用。但是,这之后我剩下的问题是:如何对模态实例控制器进行单元测试?在引用的SO中,测试了调用控制器,但模拟了模态实例控制器。可以说后者也应该进行测试,但是事实证明这非常棘手。原因如下: 我将在此处从引用的SO复制相同的示例: 因此,我首先想到的是,我将直接在测试中实例化该控制器,就像在测试中的其他任何控制器一样: 这不起作用,因为在这种情况下,

  • 我们是AngularJS的新手,但正在开发一个AngularJS/Web API应用程序,该应用程序从AngularJS引导弹出/指令更新数据模型。 我们已经成功地从指令/popover更新了数据库,但是我们很难弄清楚如何在不重新加载页面的情况下使用更新的数据刷新页面上的数据。 主页CSHTML: Popover HTML: 主页最初从角度控制器中的服务获取数据: 获取数据服务: 从Popover