AngularJS 主页的多个 ng-views

2024-01-21

好吧,我是 Angluar 的新手,刚刚开始使用 ngRoute 和 ngView 指令,我遇到了一些对我来说是问题的问题,但我怀疑这只是一个问题,因为我缺乏 Angluar 的经验。

我的 index.html 页面上有以下标记(简化):

<html>
  <head>
    <title>Sample APP</title>
  </head>
  <body>
    <div class="header">
      <nav class="pull-right">...</nav>
    </div>

    <div class="main" ng-view>
    </div>

    <div class="footer">
    </div>
  </body>
</html>

以上是我的页面使用的默认布局结构。现在我的问题仅针对主页,一个滑块显示在带有“header”类的 div 中。像这样:

<div class="header">
  <nav class="pull-right">...</nav>
  <div class="slider">...</div>
<div>

现在这仅适用于主页,所以我对如何实现它完全感到困惑。我需要two我的索引页上有 ng-view 指令吗?例如:

<html>
  <head>
    <title>Sample APP</title>
  </head>
  <body>
    <div class="header">
      <nav class="pull-right">...</nav>
      <div class="slider" ng-view>...</div>
    </div>

    <div class="main" ng-view>
    </div>

    <div class="footer">
    </div>
  </body>
</html>

另外,如果你需要知道我为什么这样做,那只是因为我在线购买了一个 html 模板,现在我正在尝试将 angularjs 集成到模板中。


只会有一个ng-view在单个页面上。不可能有多个ng-view。如果你想加载其他部分,那么你需要使用ng-include指示。

Ui路由器 https://github.com/angular-ui/ui-router最好的选择是支持可以嵌套到另一个视图中的多个视图,您可以利用嵌套视图的优势。

您可以在 Angular UI Router 中使用查询参数,就像格式一样url: '/test?oneParam&twoParam'而此功能不支持ng-route

我建议你从ng-route to ui-route,它有很大的控制能力url, templates & states

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 主页的多个 ng-views 的相关文章

  • div 之间的额外空间从何而来?

    http www lethalmonk6 byethost24 com index html http www lethalmonk6 byethost24 com index html 如果您使用 firebug 检查 项目链接 div
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • 使用 div 或表格来包含链接列更好吗?

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag
  • 是否存在类似 number 的内容?

    当我们使用 a href number a or a href mailid a 对于电话号码和电子邮件 类似的事情 a href number a 传真存在吗 是的 电话 传真和调制解调器 URL 方案在https www ietf or
  • console.log 未显示正确的值[重复]

    这个问题在这里已经有答案了 我正在尝试控制台一个对象 尽管它没有抛出任何错误 但我想要的结果在一段时间后显示 但我无法检索它 它显示一个 i 图标 上面写着 刚刚评估了下面的值 但我无法获取该值 OUTPUT Promise state s
  • ::after 内联 HTML 电子邮件?

    banner width 34px height 52px position relative color white font size 11px letter spacing 0 2em text align center float
  • 无限水平滚动图像循环?

    所以我试图在我的网站上创建一个无限滚动动画 但我一直在努力 原始教程在这里 使用 6 张图像 最后重复 4 张图像以实现无缝过渡 https designshack net articles css infinitephotobanner
  • 底部带有三角形的 div 和背景图像

    我想做一个div 有一个底部的三角形 但我需要三角形上的背景图像为了出现 我尝试使用伪元素 after 但它不起作用 homebg after content position absolute top 100 left 0 right 0
  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p
  • 从 Internet Explorer 打印时的默认文件名

    使用 pdf 打印机打印网页 将页面另存为 pdf 时 Chrome 和 Firefox 都使用该页面
  • AngularJS - 将文本格式从 JSON 返回到标题大小写

    我有一个从 JSON 文件检索数据的服务 数据内有些数据全部为大写 例如 scope FootballClubs CompanyName MANCHESTER UNITED LIVERPOOL FOOTBALL CLUB CHELSEA W
  • 推文按钮不出现

    我正在尝试向 html 页面添加一个 tweet 按钮 我使用 Twitter 按钮生成器中的官方代码 http twitter com about resources buttons tweet http twitter com abou
  • a:悬停颜色不起作用

    一件很奇怪的事情 我想在悬停时更改链接的文本颜色和背景颜色 这是代码 css link menu a color white display block height 100 width 100 text decoration none t
  • 仅在 Chrome 上我收到此错误:Uncaught TypeError: Illegal constructor [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 当我在 Chrome 上加载 jQuery 时 我会收到此错误 Uncaught TypeError Illegal constr
  • 哪些 HTML 元素不能包含子节点?

    我一直在寻找一份详尽的清单 但在任何地方都找不到 为了避免必须仔细阅读规范 有谁知道它们是什么 我认为可以包含子元素的补充元素列表也很有用 XHTML 1 和 HTML5 之间的列表有何不同 您可以在以下位置找到 void 元素 不能有任何
  • 如何在具有相同值的下拉菜单上触发 jQuery 更改事件

    即使用户选择相同的值 如何每次都触发 jQuery 更改事件 我需要刷新效果 例如如果用户选择Lawyer它会发出警报hello然后用户再次选择Lawyer从下拉菜单中 它应该发出警报hello 我怎样才能实现它 以下是代码 jQuery
  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi
  • 中有样式表 吗?

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这
  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod
  • 使用 File API polyfill 读取数据 URL

    我正在尝试使用文件 API 库 https github com mailru FileAPI https github com mailru FileAPI 作为不支持文件 API 的浏览器的后备 以便将文件作为数据 URL 读取并将其传

随机推荐

  • 关闭 STRICT_TRANS_TABLES 安全吗?

    我的 PHP mySQL 后端托管在外部站点上 自 2014 年以来一直运行良好 最近 它开始抛出 字段没有默认值 错误 我检查了配置并发现STRICT TRANS TABLES 这会在某些情况下为没有默认值的字段提供这些错误 我的问题是删
  • 如何在 Jmeter BeanShell 中循环 HTTP 请求并每次更新变量

    我有 2 个 HTTP 请求 一个用于从 api 获取数据 另一个用于将数据 POST 到 api GET 请求以 JSON 形式带来多个用户 POST 请求需要每个用户 1 个请求 因此我需要 根据用户数量多次循环相同的 POST 请求
  • 相机原生代码底层逻辑

    我试图更好地理解相机本机代码的底层逻辑 但在寻找方法定义时我似乎陷入了死胡同Camera connect 和其他声明的函数Camera h 我遵循的步骤如下 In the master branch I located Camera jav
  • Stripe“简单”结帐 - 检测是否单击关闭按钮

    我已经集成了条纹结账 https stripe com docs checkout进入我的网站 除了一方面之外 一切都运行良好 我使用 简单 结帐模式 其中 Stripe 为我呈现结帐按钮 但我在文档中看不到如何检测用户是否单击关闭按钮 有
  • 如何将多个 SQL 查询合并为一个? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我有多个 sql 查询 我想将它们捆
  • 将列转置为行 oracle

    我有一个以这种形式返回的查询值 查询返回超过 50 列 1 99transval 100 200transval 200 300transval 1 99nontransval 100 50 90 80 67 58 对于行值 我希望将这些详
  • 从查询字符串中的令牌授权 AWS API Gateway 请求

    我已经使用 Cognito 授权者设置了 API 网关 该授权者可以使用标头中的 id 令牌正确授权任何请求 当请求基于 XHR 时这很好 因为我可以在准备请求时添加标头 但是我在使用时无法添加这个
  • 显示多个图像动画

    我想显示一个背景图像和多个向下移动的图像 就像 降雪 场景一样 我该怎么做 背景图像不应该移动 只有它上面的小图像应该掉落 我该怎么做 更新 gt 我已在屏幕上显示图像 但它们都是同时出现的 但我想显示在不同时间出现的图像 我该怎么做 嘿
  • 如何将数据库从 SQL Server 2005 迁移到 2008?

    我想完全或部分迁移数据库 现在我要做一个完整的数据库 部分将作为单独的问题发布 我正在考虑的策略 复制数据库向导 将 2005 数据库转换为脚本 在 2008 年运行脚本 简单的SQL查询 我的问题 我想使用方法 2 是否可以这样做 如果是
  • 使用 Rcpp 将循环从 R 转换为 C++

    我想使用 Rcpp 提高一些 R 代码的速度 然而我对C 的了解却很少 因此 我检查了 Rcpp 提供的文档 以及 Dirk Eddelbuttel 网站上提供的其他文档 阅读完所有内容后 我尝试执行一个用 R 编写的简单循环 不幸的是 我
  • 如何用Javascript轻松监听xhr请求?

    我正在开发一个 Firefox 扩展 我想知道页面何时发起 xhr 请求 我看到了一些代码 但它们非常大 有没有简单的示例可以实现此目的 我正在测试这段代码 function TracingListener this receivedDat
  • Angular 2如何分别加载2个App根组件

    是否可以加载 2 个不同的根组件 不是在页面中并排 找一个笨蛋的例子 http plnkr co edit XSJ8ac 唯一的区别是两个根组件都加载在单个页面中
  • 有没有一种快速、简单的方法来转储 MacOS X 钥匙串的内容?

    我正在寻找一种方法将 OS X 钥匙串的内容转储 导出 到我可以在其他地方轻松处理的文件中 例如制表符分隔的纯文本或类似的内容 钥匙串访问应用程序不提供任何此类功能 获取钥匙的数据需要依次打开每个钥匙串 并且每次都必须输入钥匙串的密码才能查
  • 占位符文本溢出:省略号在 IE10 中不起作用

    如果占位符中的文本长度较长 我使用下面的代码显示省略号 它在 Chrome 和 Firefox 中运行良好 在 IE 中它不起作用 input placeholder text overflow ellipsis 我遇到了同样的问题并遇到了
  • 如何在 MySQL innoDB 中重建索引并更新统计信息?

    我有使用 MS SQL 服务器的经验 它是可能且有用的 and 重建索引 https msdn microsoft com en us library ms189858 aspx 我在MySQL innoDB中找不到这样的选项 有这样的选项
  • CRAN 提交 - R CMD 检查警告 - 使用编译标志

    我正在尝试将我的第一个包裹提交至CRAN在我的机器上 我在运行时收到以下警告R CMD check via RStudio checking compilation flags used WARNING Compilation used t
  • C# NetCDF 库

    我目前正在从事 或至少正在计划 几个需要处理大量重复数据的项目 这种数据在电子表格或数据库中运行良好 但在 XML 中却很糟糕 NetCDF 似乎是一个不错的文件格式选择 但是 我的工作是使用 C 进行的 并且没有可用的 官方 NetCDF
  • 我可以从 Eclipse 视图中删除重复的运行配置吗?

    我有 Maven 父项目和孩子 当我去运行 gt 运行配置 in Java应用程序我两次看到很少的启动器 唯一的区别是路径Common选项卡 部分另存为 共享文件 我什至无法在不重命名第二个的情况下重命名其中一个 有没有办法至少隐藏两个同名
  • 具有可选参数的方法

    有没有一种方法可以使方法可以接受参数 但也可以在没有参数的情况下调用 在这种情况下 参数被视为nil像下面这样 some func variable some func def some func variable nil end
  • AngularJS 主页的多个 ng-views

    好吧 我是 Angluar 的新手 刚刚开始使用 ngRoute 和 ngView 指令 我遇到了一些对我来说是问题的问题 但我怀疑这只是一个问题 因为我缺乏 Angluar 的经验 我的 index html 页面上有以下标记 简化 di