最近学习thinphp5的时候发现一个好用的模版引擎——think-angular,
此模板引擎主要特点是 不需要额外的标签定义, 全部使用属性定义, 写好的模板文件在IDE格式化代码的时候很整洁, 因为套完的模板文件还是规范的html,
注: 一个标签上可以使用多个模板指令, 指令有前后顺序要求, 所以要注意指令的顺序,
项目地址:https://github.com/top-think/think-angular
文档地址:https://www.kancloud.cn/shuai/php-angular/127397
<?php use think\angular\Angular; require ‘../src/Angular.php‘; $data = [ ‘title‘ => ‘首页‘, ‘list‘ => [ [‘id‘ => 1, ‘name‘ => ‘user_1‘, ‘email‘ => ‘[email protected]‘, ‘status‘ => 1], [‘id‘ => 2, ‘name‘ => ‘user_2‘, ‘email‘ => ‘[email protected]‘, ‘status‘ => 0], [‘id‘ => 3, ‘name‘ => ‘user_3‘, ‘email‘ => ‘[email protected]‘, ‘status‘ => -1], [‘id‘ => 4, ‘name‘ => ‘user_4‘, ‘email‘ => ‘[email protected]‘, ‘status‘ => 1], [‘id‘ => 5, ‘name‘ => ‘user_5‘, ‘email‘ => ‘[email protected]‘, ‘status‘ => 1], ], ]; // 树状结构 $menus = [ [ ‘title‘ => ‘菜单1‘, ‘sub‘ => [ [‘title‘ => ‘菜单1.1‘], [‘title‘ => ‘菜单1.2‘], [‘title‘ => ‘菜单1.3‘], [‘title‘ => ‘菜单1.4‘], ], ], [ ‘title‘ => ‘菜单2‘, ‘sub‘ => [ [‘title‘ => ‘菜单2.1‘], [‘title‘ => ‘菜单2.2‘], [‘title‘ => ‘菜单2.3‘], [‘title‘ => ‘菜单2.4‘], ], ], [ ‘title‘ => ‘菜单3‘, ‘sub‘ => [ [ ‘title‘ => ‘菜单3.1‘, ‘sub‘ => [ [‘title‘ => ‘菜单3.1.1‘], [‘title‘ => ‘菜单3.1.2‘], [ ‘title‘ => ‘菜单3.1.3‘, ‘sub‘ => [ [‘title‘ => ‘菜单3.1.3.1‘], [‘title‘ => ‘菜单3.1.3.2‘], ], ], ], ], [‘title‘ => ‘菜单3.2‘], [‘title‘ => ‘菜单3.3‘], [‘title‘ => ‘菜单3.4‘], ], ], ]; $view->assign(‘pagecount‘, 100); $view->assign(‘p‘, isset($_GET[‘p‘]) ? $_GET[‘p‘] : 1); $view->assign(‘page‘, function ($p) { return ‘index.php?p=‘ . $p; }); // 向模板引擎设置数据 $view->assign($data); $view->assign(‘start_time‘, $start_time); $view->assign(‘menus‘, $menus); // 测试php-model标签转移双引号 $view->assign(‘name‘, ‘"php" and "think-angular"‘); // 输出解析结果 $view->display(‘index‘); // 返回输出结果 // $html = $view->fetch(‘index‘); // echo $html; // 获取混编代码 // $php_code = $view->compiler(‘index‘);
PHP
<div php-extends="base"></div> <div php-block="main" class="container"> <div class="jumbotron"> <h1>Hello Think Angular</h1> <p> 此模板引擎针对能够使用angularjs的 php开发者 或 前端开发者 编写, 主要特点是, 不需要额外的标签定义, 全部使用属性定义, 写好的模板文件后, 在开发工具中无需插件即可格式化为很整洁的代码, 因为套完的模板文件还是规范的html. </p> <p> 注: 一个标签上可以使用多个模板属性, 属性有前后顺序要求, 所以要注意属性的顺序, 在单标签上使用模板属性时一定要使用<code>/></code>结束, <br> 如: <br> <code><input php-literal="code" php-if="$is_download" type="button" value="下载" /></code> <br> <code><img php-literal="code" php-if="$article[‘pic‘]" src="{$article.pic}" /></code> <br> 具体可参考后面的解析结果. </p> <p> Github项目地址: <a target="_blank" href="https://github.com/top-think/think-angular">https://github.com/top-think/think-angular</a> </p> <p> <a class="btn btn-primary btn-lg" target="_blank" href="https://github.com/top-think/think-angular">Git版本库地址</a> <a class="btn btn-primary btn-lg" target="_blank" href="http://kancloud.cn/shuai/php-angular" />在线文档</a> </p> </div> <div class="row"> <div class="col-md-8"> <h4>表格和分页实例</h4> <table class="table table-bordered"> <tr> <th>编号</th> <th>用户名</th> <th>邮箱</th> <th>状态</th> <th>操作</th> </tr> <tr php-if="$list" php-repeat="$list as $user"> <td>{$user.id}</td> <td>{$user.name}</td> <td>{$user.email}</td> <td> <div php-switch="$user[‘status‘]"> <span php-case="1">正常</span> <span php-case="0">已禁用</span> <span php-case="-1">已删除</span> </div> </td> <td> <a php-show="$user[‘status‘] === 1" php-after="echo ‘ ‘" href="javascript:void(0);" class="btn btn-xs btn-warning">禁用</a> <a php-show="$user[‘status‘] === 0" php-after="echo ‘ ‘" href="javascript:void(0);" class="btn btn-xs btn-primary">启用</a> <a php-show="$user[‘status‘] >= 0" php-after="echo ‘ ‘" href="javascript:void(0);" class="btn btn-xs btn-danger">删除</a> <a php-show="$user[‘status‘] == -1" php-after="echo ‘ ‘" href="javascript:void(0);" class="btn btn-xs btn-primary">恢复</a> </td> </tr> <tr php-else="不存在list的时候, 输出没有数据"> <td colspan="3" class="text-center">没有数据</td> </tr> </table> <nav php-include="page"></nav> <h2>自动选中: php-selected</h2> <select class="form-control" php-init="$p = isset($_GET[‘p‘]) ? $_GET[‘p‘] : 1"> <option php-for="$i = 1; $i <= 50; $i++" php-selected="$p == $i" value="{$i}">第{$i}页</option> </select> <h2>自动勾选: php-checked </h2> <div class="form-control" php-init="$all_hobby = [‘html‘,‘css‘,‘js‘,‘php‘, ‘mysql‘, ‘linux‘]" php-init="$user_hobby = [‘linux‘,‘css‘,‘js‘,‘php‘]"> 技能: <label class="checkbox-inline" php-repeat="$all_hobby as $hobby"> <input type="checkbox" name="hobby" value="{$hobby}" php-checked="in_array($hobby, $user_hobby)" /> {$hobby} </label> </div> <br /> <div class="form-control" php-init="$user_sex = 1"> 性别: <label class="radio-inline"> <input type="radio" name="sex" value="0" php-checked="$user_sex === 0" /> 女 </label> <label class="radio-inline"> <input type="radio" name="sex" value="1" php-checked="$user_sex === 1" /> 男 </label> </div> <h2>自定义解析规则</h2> <div php-dump="$navs"></div> <div php-init="$i = 0" php-inc="$i" php-inc="$i">{$i}</div> <div php-dec="$i">{$i}</div> <h2>原样输出</h2> <div php-literal="">{$title}</div> <div php-literal="code">{$title}</div> <br /> <php php-literal="code">{title} {$content}</php> <h2>input数据绑定,自动转义特殊字符</h2> <div> <form action="?" method="post"> <input type="text" name="name" php-model="$name" /> <input type="submit" value="提交"> </form> </div> <p><br /></p> </div> <div class="col-md-4"> <h4>无限级菜单输出</h4> <ul php-init="echo_menu($menus)" php-function="echo_menu($menus)"> <li php-repeat="$menus as $menu"> {$menu.title} <ul php-if="isset($menu[‘sub‘])" php-call="echo_menu($menu[‘sub‘])"></ul> </li> </ul> </div> </div> </div>
模版
时间: 2024-10-22 01:01:49