Question

在过去的一周里，我正在努力学习Angular JS。我主要在我的项目中使用jQuery，所以我很难尝试获得它的概念。我决定使用angularjs创建一个简单的管理面板，以便在我的项目中使用它。有了这个，我可以在尝试做事时学习角度。但我无法找到正确的方法，因为它是全新的概念，然后是jQuery。

这是我尝试做的事情：我的页面上有一个标题栏。在此标题页中，有一些链接（带有下拉菜单），如通知面板，用户配置文件链接，搜索面板。我打电话给他们每个小部件。

这是我的标题栏html代码：

<header class="bg-dark dk header navbar navbar-fixed-top-xs">
  <div class="navbar-header aside-md">
    <a href="/" class="navbar-brand"><img src="images/logo.png" class="m-r-sm">Notebook</a>
  </div>
  <ul class="nav navbar-nav hidden-xs">
    <li dropdown>
      <a href="" class="dropdown-toggle" dropdown-toggle>Activities</a>
      <section class="dropdown-menu">
        <p>Some activities</p>
      </section>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
    <li class="hidden-xs" dropdown>
      <a href="" class="dropdown-toggle" dropdown-toggle>
        <i class="fa fa-bell"></i>
        <span class="badge badge-sm up bg-danger m-l-n-sm count">2</span>
      </a>
      <section class="dropdown-menu aside-xl">
        <p>some notifications</p>
      </section>
    </li>
  </ul>
</header>

如你所见。有两个ul.navbar-nav一个是小部件区域，另一个是小部件区域。我想要实现的是使这些区域模块化。当我为header-bar创建一个新指令时，我希望它能自动更新header-nav。我的意思是每个<li/>都是一个指令，并且会有其目的。（例如，活动小部件，通知小部件，用户小部件，搜索小部件等）。

我对这个模式的看法：

在其范围内保存小部件列表的控制器
2左侧窗口小部件区域和右侧窗口小部件区域的指令，用于监视控制器范围的窗口小部件列表中的更改并添加到其区域。
小部件指令服务，帮助他们将自己添加到控制器范围的小部件列表中。
我认为应该有一个优先级选项，让小部件可以相应地进行排序。

我不知道这种设计模式是否正确。我也不知道如何做到这一点。如果这种模式是正确的，请你告诉我。你也可以写一个迷你角度代码，完成我想做的事情。我确信很多人在尝试学习AngularJS时会使用该代码。

angularjs中的小部件设计

0 个答案: