php-angular/think-angular/php模版引擎

最近学习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="{&dollar;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

php-angular/think-angular/php模版引擎的相关文章

如何在前端模版引擎开发中避免使用eval函数

前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用.于是根据自己对模版引擎的理解,定义自己的模版格式,然后,根据自己定义的格式,编写处理函数,将模版标签中的字符串,解析成可执行的字符串,然后再用eval函数执行该可执行的字符串. 然后问题就出现了!eval等价于evil! 为什么呢?各大js权威书籍上都不提倡使用eval.下面我详细的解释一下为什么不提倡. 首先,大家需要知道,js并不是一门解释型语言.它和其他大家熟知的编程语言(c,java,c++)一样,是编译型语言.但是

angular.isArray,angular.isDate,angular.isDefined,angular.isElement,angular.isFunction,angular.isNumber,angular.isObject,angular.isString,angular.isUndefined

//angular.isArray是否是数组console.log(angular.isArray([])); //trueconsole.log(angular.isArray([1,2,1,3])); //true//angular.isDate是否是日期console.log(angular.isDate('2012-12-02')); //falseconsole.log(angular.isDate(new Date)); //true//angular.isDefined引用对象是否

前端数据模版引擎的总结

模板的工作原理可以简单地分成两个步骤:模板解析(翻译)和数据渲染.这两个步骤可分别部署在前端或后端来执行.如果放在后端执行,则是像Smarty,FreeMarker这样的后端模板引擎,而如果放在前端来执行,则是我们要探讨的前端模板. FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写,模板用servlet提供的数据动态地生成 HTML,模板语言是强大的直观的,编译器速度快,输出接近静态HTML页面的速度.这里不再对后端模版进行描述. 前端模版提高了前端开发

Express模版引擎hbs备忘

最近几天折腾了下express,想找个合适的模版引擎,下面是一些折腾过程的备忘 选择标准 选择一门模版语言时,可能会考虑的几点 语法友好(micro tmpl那种语法真是够了) 支持模版嵌套(子模版的概念) 支持模版继承(extend) 前后端共用 有容错处理(最好定位到具体出错位置) 支持预编译(性能好) 注意到hbs,似乎满足大部分的需求:https://github.com/donpark/hbs getting started demo地址:https://github.com/chyi

Spring整合Velocity模版引擎

1. 首先通过pom.xml自动加载velocity扩展包到工程: 1 <dependency> 2 <groupId>velocity</groupId> 3 <artifactId>velocity</artifactId> 4 <version>1.5</version> 5 </dependency> 2. 然后在自动装载bean的xml里边添加如下配置: 1 <bean id="vel

Symfony2模版引擎使用说明手册

一.基本使用 {{ demo }}输出一个demo变量; {{% func %}}通常是包含一个twig函数例如 for; 举个for循环的例子: {{% for i in 0..10 %}} <em>{{ i }}</em> {{% endfor %}} 当然也可以打印对象,例: {{% for user in users %}} <span>user.username</span> {{% endfor %}} 注:users是从控制器中传来的对象参数

【转】T4模版引擎之基础入门

额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看,可怜的娃啊... T4(Text Template Transformation Toolkit)是微软官方在VisualStudio 2008中开始使用的代码生成引擎.在 Visual Studio 中,“T4 文本模板”是由一些文本块和控制逻辑组成的混合模板,它可以生成文本文件. 在 Visual C# 或 Visual

laravel 模版引擎使用

laravel 模版引擎以 @标签 开头,以 @end标签 结尾,常用有 foreach foreachelse if for while等 1)foreach 和 foreachelse 差不到,区别就是 foreachelse 还有一个@empty 分支,当循环的变量为空时执行 @foreach ($obj as $key=>$value) {{--循环体--}} @endforeach @foreachelse ($obj as $key=>$value) {{--循环体--}} @em

Java模版引擎velocity的使用

前言 关于velocity与SpringMVC的配置请参考前一篇文章,此处不再介绍.velocity作为Java模版引擎的主要目的是为了允许任何人使用简单而强大的模板语言来引用定义在Java代码中的对象.在velocity文件中可以给该页面指定模版布局,从而节省了大量的时间去写通用的模版布局.可以定义变量,与Java方法进行交互. 定义一个layout模版 在上一篇文章中提到了配置默认模版,当然也可以不使用默认模版即在要用到的页面的最上端写上 #set($layout='layout/yourl