Koa2入坑(五)
发布时间:2020-12-17 08:30:41 所属栏目:安全 来源:网络整理
导读: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 stat
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
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-modelviews/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-bindviews/pagex.jade div(ng-app='' ng-init="firstName='zw'")
p 名字:
span {{firstName}}
p 名字2:
span(ng-bind='firstName')
参考资料网址: https://www.w3cplus.com/html/how-to-use-jade.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |