Koa2入坑(五)

koa2+jade+angular

目录结构：

| public
| routers
  - index.js | views
  - layout.jade   - page1.jade app.js

app.js

const Koa = require('koa');
const path = require('path');
const views = require('koa-views');
// 引入 koa-static
const staticFiles = require('koa-static')
const app = new Koa();

const router = require('./routers/index');

app.use(views(__dirname + '/views',{
  extension: 'jade'
}));

// 指定 public目录为静态资源目录，用来存放 js css images 等
app.use(staticFiles(path.resolve(__dirname,"./public")))


app.use(router.routes(),router.allowedMethods());

app.listen(3000,()=>{
  console.log('server is starting at:127.0.0.1:3000')
});

routers/index.js

const router = require('koa-router')();

router.get('/:page',async (ctx,next)=>{ let page = ctx.params.page; await ctx.render(page,()=>{ }); }); module.exports = router;

views/layout.jade

doctype html
html(lang="zh-cn")
  head
    title= title
    Meta(charset="utf-8")
    //IE 支持通过特定的 <Meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
    Meta(http-equiv="X-UA-Compatible",content="IE=Edge")
    //- link(rel='stylesheet',href='/stylesheets/style.css')
    script(src="/js/angular.min.js")
  body
    //利用block划分区域，便于被继承
    block header
    block content
    block footer

  block script

views/page1.jade

// 使用jade模板
extends layout

block header
  h1 这是header

block content
  div(ng-app='myApp' ng-controller='myCtrl')
    p 名字:
      input(type='text' ng-model='name')
    h1 {{name}}

block footer
  p footer

block script
  script(src="/js/page/page1.js")

public/js/page/page1.js

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
    $scope.name= "zw";
});

jade语法

1、Doctype

doctype html

2、列表

block content
   //- 列表
   ul 
     li Item 1
     li Item 2
     li Item 3

3、 checkBox 写法

span name
    input(type="checkBox",name='name',checked)   
br     
span age
    input(type="checkBox" name='age' checked)

4、条件属性

- var authenticated = true
     div(class=authenticated?'authed':'anon')
- var currentUrl = '/about'
     a(class={active: currentUrl==='/'} href='/') Home  
     a(class={active: currentUrl==='/about'} href='/about') About

5、设置class,id

a.link link1
 a#link link2

6、设置样式

a(style={color: 'red',background: 'green'} href='http://www.baidu.com') 百度

7、设置自定义属性

-var attributes = {'data-foo': 'bar'}
     div#foo(data-bar='foo',style={width: '100px',height: '100px',background:'red'})&attributes(attributes)

8、for循环

//- for循环
  -for(var i=0;i<5;i++)
    li <a>baidu</a>

9、if else

- var user = {description: 'foo bar baz'}
     div#user
       if user.description
         h2 Description
         p.description= user.description
       else
         h1 Description
         p.description User has no description

10、case when

- var friends = 10
     case friends
       when 0
         p you have no friends
       when 1
         p you have one friends  
       default
         p you have #{friends} friends

11、遍历数组

//- 遍历数组
   ul 
     each val,index in ['zero','one','two']
       li= index + ': '+val    

   -var n = 0
     ul
       while n < 10
         li= n++

12、混合宏

//- 混合宏
   mixin list
     ul 
       li foo
       li bar
       li baz
   +list

mixin pet(name)
     li.pet= name
   ul 
     +pet('cat')
     +pet('dog')

mixin list(id,...items)
     ul(id=id)
       each item in items
         li= item  
   +list('my-list',1,2,3,4)

angular语法

1、angular数据ng-model

views/pagex.jade

block content
    div(ng-app='')
      p 名字:
        input(type='text' ng-model='name')
      h1 {{name}}

block content
  div(ng-app='myApp' ng-controller='myCtrl')
      | 名：
        input(type='text' ng-model='firstName')
      | 姓：
        input(type='text' ng-model='lastName')
      | 姓名： {{firstName+lastName}}

block script
  script(src="/js/page/page1.js")

js/page/page1.js：

var app = angular.module('myApp',function($scope) {
    // $scope.name= "zw";
    $scope.firstName= "mister";
    $scope.lastName= "zw";
});

2、angular数据ng-bind