使用Angular实现填充文本生成器

Angular Waffle Generator 在原型构造阶段，用来生成一些填充文本，而无需依赖真实数据。

angular，填充文本

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2237
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400);
body {
    font: 100% "Lato", sans-serif;
    color: #333;
    padding: 20px;
    background: #fcfff4;
    /* Old browsers */
    
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    /* FF3.6+ */
    
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfff4), color-stop(40%, #dfe5d7), color-stop(100%, #b3bead));
    /* Chrome,Safari4+ */
    
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    /* Chrome10+,Safari5.1+ */
    
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    /* Opera 11.10+ */
    
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    /* IE10+ */
    
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    /* W3C */
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
    /* IE6-9 */
}
body .page {
    margin: 60px;
    padding: 30px;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 20px;
}
body .page ul {
    margin-bottom: 30px;
}
body .page em {
    background: #ccc;
    margin: 20px;
    padding: 20px;
    display: block;
}
body .page button {
    margin: 20px 0;
    padding: 10px;
}

HTML

<body>
    <h1>angular-waffle</h1>
    <div id="container" class="col">
        <p>This is an example of the Angular port of Andrew Clarke's Waffle Generator. For more information visit the <a href="https://github.com/Beclamide/angular-waffle" target="_blank">GitHub page.</a>
        </p>
        <p>angular-waffle could be used as a data generator in your web application before you have real data to use. You could even use it to pad out your dissertation and your tutor will be too afraid to ask what the hell you're on about.</p>
        <p>The title is unique to the current instance of $waffle, so you have to refresh the page for it to change. Hitting the button at the bottom of the page will generate more paragraphs, quotes, and lists.</p>
        <div ng-controller="ExampleCtrl" class="page">
            <h2 ng-model="title">{{title}}</h2>
            <h4 ng-model="name">
          By
          {{name}}
        </h4>
            <p ng-model="waffle1">{{waffle1}}</p>
            <p ng-model="waffle2">{{waffle2}}</p>
            <ul>
                <li ng-repeat="item in items">
                    <p>{{item}}</p>
                </li>
            </ul>
            <p ng-model="waffle3">{{waffle3}}</p><em ng-model="quote">{{quote}}</em>
            <p ng-model="waffle4">{{waffle4}}</p>
            <button ng-click="more()">Generate more nonsense!</button>
        </div>
    </div>
    <script src="/libs/angular/angular.min.js"></script>
    <script src='/uploads/160301/angular-waffle.js'></script>
</body>

</html>

Angular Waffle Generator 在原型构造阶段，用来生成一些填充文本，而无需依赖真实数据。

angular，填充文本

编辑器支持Emmet

快捷键

Angular Waffle Generator 在原型构造阶段，用来生成一些填充文本，而无需依赖真实数据。

angular，填充文本

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：