AireadFan's

   Fragments of memories

Airead-manager-outline-step3

| 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
25
26
27
28
29
30
31
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',
      '$http'  # 注入 $http 服务
      ($scope, $http) ->  # 使用 $http
        $scope.pageTitle = 'World Title'  # 子页面 title
        $scope.content = 'hello world'
        $scope.serverData = ''  # 定义 serverData

        $http.get '/hello/'  # http get /hello/
        .success (data) ->  # 如果请求成功
            console.log 'receive data: ', data
            $scope.serverData = data  # 赋值
    ]

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

  return ret

修改模版

修改 static/templates/world.html

(world.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
            <p>内容 {{ content }}</p>
            <p>/hello/ 返回: {{ serverData }}</p>
        </div>
    </div>
</div>

刷新页面,应该会看到 hello example! 内容,这是服务器返回的

git checkout step3 查看源码

airead-manager

« airead-manager-outline-step2 airead-manager-outline-step4 »

Comments