html - 如何使用 AngularJs 处理页眉和页脚

标签 html angularjs yeoman controllers partials

我很抱歉如果我没有很好地解释自己,那么就这样吧。基本上我在尝试解决这个问题时遇到了麻烦。我正在使用 Yeoman 生成我的 Angular 项目。我有页眉和页脚,页脚将是静态的,页眉需要自己的 Controller 。我遇到的问题是,我并不特别希望 header 位于其他 Controller 之外。也许我错了,这实际上不是问题,最佳做法显然是将 header 放在 ng-view 之外?这是我目前所拥有的:

   <head>
     <!-- head stuff here -->
   </head>
   <body ng-app="dscover.me">

        <div ng-include src="'partials/header.html'"></div>  

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

        <div ng-include src="'partials/footer.html'"></div>
   </body>

这是在 MainCtrl 之外包含页眉和页脚的正确方法吗?这对我来说有意义只是因为,如果我要创建一个新的 Controller /页面,我仍然可以访问它之外的 Controller ?问题又是我想克制自己不使用 rootScope 不幸的是,这似乎是将 header 置于 MainCtrl 之外的唯一方法?

对于糟糕的解释,我深表歉意,但我希望你们能理解。如果有更好的方法,请告诉我。任何帮助将不胜感激!

最佳答案

首先,我会尝试尽可能依赖 AngularJS 的给定功能。在应用中实现页眉和页脚的方式有以下三种:

  1. ng-include

您想使用它的原因是简单且代码较少。来自文档:

Fetches, compiles and includes an external HTML fragment

因此,它只包含一个外部 html block 。

  1. ng-view

这是 Angular 中的默认路由器(2.0 之前),还有一个更好的选项 ui-router .

The UI-Router is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.

它支持嵌套 View 等功能。使用它的主要原因是分离 Controller 和这些 View 的范围。在页眉和页脚方面,如果你想在里面有一个完全独立的逻辑,那就去做吧。

  1. custom directive

如果您在主要内容范围和页眉/页脚中有逻辑重叠,则应使用此选项。您还可以获得额外的好处,例如可重用性等。

因此,您可以选择一个,但在写作之前不要懒惰地搜索和阅读( herehereherehere )。

关于html - 如何使用 AngularJs 处理页眉和页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20142155/

相关文章:

Yeoman 源文件夹(在版本控制中导入什么)

ember.js - 在 application.hbs 中包含另一个模板

node.js - npm 安装不起作用

javascript - 如果程序的当前版本高于我的版本,如何显示 DIV?

javascript - jQuery 验证移动 Bootstrap 按钮附加组件

jquery - 在链接函数中将 css 设置为 $templateCache.get() html

javascript - Angular 将输入值传递给 $rootScope 变量

javascript - 如何将列表存储到cookie中并在另一个页面中查看?

javascript - 如何使用 React 将 React-Particles-Js 设置为后台?

javascript - 在自定义命名空间上使用 AngularJs 并删除 window.angular