AireadFan's

   Fragments of memories

Airead-manager-outline-step2

| Comments

添加一个前端接口

创建一个 controller

static/coffee/controllers/ 创建文件 world.coffee.

(world.coffee) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
define ['./base'], (indexCtlModule) ->
  # 模块名称应该与本文件名相同,用来保证controller不会相同
  # [controller 名称], [url 前端路由], [模版文件名称] 都与 moduleName 相关

  # 模块名称 world
  #   controller 名称: worldCtl
  #   注册的路由为: world
  #   模版为 static/templates/world.html
  moduleName = 'world'
  console.log "#{moduleName} init"
  indexCtlModule.controller "#{moduleName}Ctl",
    [
      '$scope',
      ($scope) ->
        $scope.pageTitle = 'World Title'  # 子页面 title
        $scope.content = 'hello world'
    ]

  ret =  # static/coffee/routes 跟据这个返回值注册前端路由
    group: '学习'  # 定义这个模块包含于哪个大组
    item: 'item Hello'  # item 名称
    url: moduleName  # 注册的 url

  return ret

刷新页面,会发现 学习 没有出现。这是因为 static/coffee/controllers/main.coffee

1. 该文件没有导入 `world.coffee`;
2. 菜单组(`navHeaderList`)中没有中定义 `学习` 组;

添加一个菜单组

1. 导入 world.coffee

./world 添加到 ./test_perm 的下面。

1
2
3
4
5
6
7
8
9
10
define [
  './base'
  './test'
  './home'
  './userManager'
  './groupManager'
  './test_perm'
  './world'  # 添加这一行,导入 world 菜单
], (indexCtlModule) ->
  moduleName = 'main'

2. 添加 学习 组

1
$scope.navHeaderList = ['系统管理', '权限管理', '学习', 'hide']  # 学习

这时刷新页面,应该能看到 item Hello 菜单了。但是点击 item Hello 却什么也没显示,这是因为

没有创建模块文件

添加模版文件

static/templates 中创建文件 world.html

(world.html) download
1
2
3
4
5
6
7
8
9
10
11
12
<div class="item-main">
    <div class="row item-bar">
        <div class="col-md-2">
            <h4>{{ pageTitle }}</h4>
        </div>
    </div>
    <div class="row">
        <div class="item-sub-main">
            <h1 style="color: red">这里显示模版</h1>
        </div>
    </div>
</div>

再刷新页面,点击 item Hello 菜单,应该能看到,world.html 里的内容了。

git checkout step2 查看源代码

airead-manager

« airead-manager-outline-step1 airead-manager-outline-step3 »

Comments