首先下载源码 - 93.5 KB
------------------------------------------分割线------------------------------------------
具体下载目录在 /2014年资料/9月/7日/超级简单的 AngularJS 应用 —— 实时创建 vCard
------------------------------------------分割线------------------------------------------
在这个例子中，我引用了包括AngularJS在内的一些JavaScript库，实现了一个很简单的名片生成器。 尽管在这个小应用中，AngularJS库相较于其他JavaScript库来说做的事不多，然而，这个小而强大的AngularJS却是该应用的全部灵感之源。
背景在该应用中，我们需要做些简单工作。首先，我们需要用CSS设计名片。然后，我们需要让用户实时的输入和编辑数据，这个地方AngularJS就不可或缺了。再然后，我们需要将名片的HTML div容器转化为canvas画布，并以PNG图片形式下载即可。就这么简单！
代码的使用这里，我来解释下下面的代码块。
<!DOCTYPE html>
<html>
<head>
<title>vCard Creator demo</title>
<link type="text/css" href="https://www.linuxidc.com/main.css">
</head>
<body>
<div ng-app>
<h1>Real time vCard Creator</h1>
<div>
<input placeholder="Company name" ng-model="cname"/>
<input placeholder="Company tag line" ng-model="tagline"/>
<input placeholder="Your full name" ng-model="name"/>
<input placeholder="Your designation" ng-model="desig"/>
<input placeholder="Phone number" ng-model="phone"/>
<input placeholder="Email address" ng-model="email"/>
<input placeholder="Website url" ng-model="url"/>
<button>Download vCard as PNG</button>
</div>
<div>
<header>
<h4>{{cname}}</h4>
<p>{{tagline}}</p>
</header>
<div>
<div>
<h2>{{name}}</h2>
<h5>{{desig}}</h5>
</div>
<div>
<p>{{phone}}</p>
<p>{{email}}</p>
<p>{{url}}</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://www.linuxidc.com/angular.min.js"></script>
<script type="text/javascript" src="https://www.linuxidc.com/jquery.min.js"></script>
<script type="text/javascript" src="https://www.linuxidc.com/html2canvas.js"></script>
<script type="text/javascript" src="https://www.linuxidc.com/canvas2image.js"></script>
<script type="text/javascript" src="https://www.linuxidc.com/base64.com"></script>
</body>
</html>
这个是该应用的HTML结构。本结构包括了两部分。一个是id为editor的div，一个是id为card的div。前一个用于让用户输入信息，后一个的作用是用来在名片上显示信息。 这俩div又被一个id为wrapper的div给包裹起来。这个id为wrapper的div里面，我们会添加 ng-app属性，因为就是在这个div容器里，我们就要使用angular了。我们可以添加ng-app到HTML的标签里，这样一来，我们就能在该网页的任何地方使用angular了。 下一步，我们创建一些输入框来接收用户的输入信息。确保每个输入框都有ng-model 这么个属性，用于传递输入框里相应的值。我们把ng-model属性放在这里，主要是因为我们想要实时的更新id为card的div里的值。现在，在id为card的div内部，确保我们已经放置了一些卖相古怪的双括弧，并且在双括弧里我们放了来自ng-model的值。 基本上，我们在输入框中输入内容后，双括弧里的值立马就随之改变了。所以对名片的编辑到此结束。我们的目标是，当一个用户点击了下载按钮，当前的名片将被转化为一张图片，并被下载到用户电脑里。