A_start - meetbill/butterfly-fe GitHub Wiki

start

入门的话，当然是要讲如何从无到有的一个过程了。比如我们现在要新制作一个 工单管理 的界面。

第一步，就是在导航栏上添加菜单项，找到 static/tpl/blocks/nav.html 这个文件，这个文件就是设置菜单的，添加以下代码：

<li ui-sref-active="active">
        <a ui-sref="app.order.list">
            <i class="glyphicon glyphicon-list-alt icon text-info"></i>
            <span class="font-bold">工单管理</span>
        </a>
</li>

注意，这里的 ui-sref="app.order.list" 是一个模块，目前，我们还没有编写这个模块的，所以点击这个菜单不会有反应。

我们可以看到，多出一个工单管理。然而，现在点击这个工单管理不起作用的，因为还没有 app.order.list 模块。现在我们来创建这个模块。

找到 static/js/config.router.js ，并在文件中添加以下代码（添加到什么位置，自己凭经验看着办）：

// order
.state('app.order', {
     abstract: true,
     url: '/order',
     templateUrl: 'tpl/app_order.html'
})
.state('app.order.list', {
     url: '/order/list',
     templateUrl: 'tpl/app_order_list.html'
})

然后还要添加两个页面，创建页面 src/tpl/app_order.html ，注意应使用 UTF-8 编码，内容如下 ：

<div class="bg-light lter b-b wrapper-md">
     <h1 class="m-n font-thin h3">工单管理 <kbd class="pull-right">Order Manager</kbd></h1>
</div>
<div ui-view>
     <!-- 子模块的内容将会显示在 ui-view 里面 -->
</div>

再创建页面 static/tpl/app_order_list.html，注意应使用 UTF-8 编码，内容如下：

<div>这是工单列表</div>
⚠️ **GitHub.com Fallback** ⚠️