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

时间:2013-11-22 10:08:22

标签: html angularjs yeoman controllers partials

我很抱歉如果我不能很好地解释自己,那么就这样了。基本上我在努力解决这个问题时遇到了麻烦。我正在使用Yeoman来生成我的角度项目。我有页眉和页脚,页脚将是静态的,页眉将需要自己的控制器。我遇到的问题是,我并不特别希望标题位于其他控制器之外。也许我错了,这实际上并不是问题,最好的做法显然是将标题放在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之外包含页眉和页脚的正确方法吗?这对我来说只是因为,如果我要创建一个新的控制器/页面,我仍然可以访问它外面的控制器吗?问题是我想避免使用rootScope,不幸的是,这似乎是将标题放在MainCtrl之外的唯一方法吗?

我很抱歉这个可怕的解释,但我希望你们明白。如果有更好的方法,请告诉我。任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:3)

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

  1. ng-include
  2. 您希望使用它的原因是简单性而不是代码。来自docs:

      

    获取,编译并包含外部HTML片段

    所以,它只包含一个外部的html块。

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

        

      UI-Router是由AngularUI team构建的AngularJS的路由框架。它提供了一种与ngRoute不同的方法,因为它根据应用程序的状态而不仅仅是路由URL来更改应用程序视图。

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

      1. custom directive
      2. 如果主内容范围和页眉/页脚中存在逻辑重叠,则应使用此选项。您还可以获得额外的额外津贴,如可重用性等。

        所以,你选择选择一个,但不要懒于搜索和阅读(herehereherehere)写。