1. 程式人生 > >php-angular/think-angular/php模版引擎

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

樹狀 and select use start 整潔 測試 get dump

最近學習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>
模版

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