AngularJS支持库browserTrigger用法示例,Touch库用法示例web前端

By admin in web前端 on 2019年6月25日

本文实例讲述了Angular-Touch库用法。分享给大家供大家参考,具体如下:

本文实例讲述了AngularJS辅助库browserTrigger用法。分享给大家供大家参考,具体如下:

web前端 1

Angular-touch库用的不多,网上的例子也不多。写个触屏滑动的事件。

今天推荐一款来自angularjs源码的单元测试辅助库browserTrigger,这是来自于ngScenario的一段代码。主要用户触发浏览器型行为更新ng中scope
view model的值。

简介

先在页面上弄个div

这是angularjs源码中单元测试的使用browserTrigger的实例:

在这个例子中,我引用了包括AngularJS在内的一些JavaScript库,实现了一个很简单的名片生成器。
尽管在这个小应用中,AngularJS库相较于其他JavaScript库来说做的事不多,然而,这个小而强大的AngularJS却是该应用的全部灵感之源。
背景

<div id="content" align="center" ng-app="imageApp" image-controller="">
    <p style="position: absolute; width: 100%; margin-top: 30px;z-index: -1;">
      <img id="show"src="assets/image/logo.jpg" />
    </p>
</div>
it('should set the model to empty string when empty option is selected', function() {
  scope.robot = 'x';
  compile('<select ng-model="robot">' +
       '<option value="">--select--</option>' +
       '<option value="x">robot x</option>' +
       '<option value="y">robot y</option>' +
      '</select>');
  expect(element).toEqualSelect('', ['x'], 'y');
  browserTrigger(element.find('option').eq(0));
  expect(element).toEqualSelect([''], 'x', 'y');
  expect(scope.robot).toBe('');
});

在该应用中,我们需要做些简单工作。首先,我们需要用CSS设计名片。然后,我们需要让用户实时的输入和编辑数据,这个地方AngularJS就不可或缺了。再然后,我们需要将名片的HTML
div容器转化为canvas画布,并以PNG图片形式下载即可。就这么简单!

引入两个库

在这段代码中给browserTrigger传入你希望选择的select
option,则它会帮助你tigger change,选中当前option,更触发更新ng
select的viewmodel。

代码的使用

<script type="text/javascript" src="js/angular/1.4.6/angular.min.js" ></script>
<script type="text/javascript" src="js/angular/1.4.6/angular-touch.min.js" ></script>

在browserTrigger中还为我们做了很多其他输入框或者html控件的触发接口,同时也加入了浏览器的兼容性。使得我们的测试更加方便不用考虑浏览器兼容性或者不同的html控件trigger不同的事件去更新scope的值。

这里,我来解释下下面的代码块。

注册事件

具体更多信息可参考ng的官方测试和browserTrigger源码。

<!DOCTYPE html>
<html>
<head>
  <title>vCard Creator demo</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div id="wrapper" ng-app>
  <h1>Real time vCard Creator</h1>
<div id="editor">
  <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 id="saveBut">Download vCard as PNG</button>

</div>

<div id="card">

  <header>
    <h4>{{cname}}</h4>
    <p>{{tagline}}</p>
  </header>
  <div id="theBody">
    <div id="theLeft">
      <h2>{{name}}</h2>
      <h5>{{desig}}</h5>
    </div>
    <div id="theRight">
      <p>{{phone}}</p>
      <p>{{email}}</p>
      <p>{{url}}</p>
    </div>
  </div>  

</div>

</div>

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript" src="base64.com"></script>

</body>
</html>
try{
  angular.module('imageApp',['ngTouch'])
    .directive('imageController',['$swipe',function($swipe){
      return {
        restrict:'EA',
        link:function(scope,ele,attrs,ctrl){
          var startX,startY,locked=false;
          $swipe.bind(ele,{
            'start':function(coords){
              startX = coords.x;
              startY = coords.y;
            },
            'move':function(coords){
              var delta = coords.x - startX;
              if(delta<-300 && !locked){
                console.log('trun right');
              }else if(delta>300 && !locked){
                console.log('trun left');
              }
            },
            'end':function(coords){
            },
            'cancel':function(coords){
            }
          });
        }
      }
    }
  ]);
}catch(e){
  console.error(e);
}

希望本文所述对大家AngularJS程序设计有所帮助。

这个是该应用的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的值。
基本上,我们在输入框中输入内容后,双括弧里的值立马就随之改变了。所以对名片的编辑到此结束。我们的目标是,当一个用户点击了下载按钮,当前的名片将被转化为一张图片,并被下载到用户电脑里。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS
MVC架构总结》

您可能感兴趣的文章:

  • Angular2中Bootstrap界面库ng-bootstrap详解
  • AngularJS实现分页显示数据库信息
  • 在JavaScript的AngularJS库中进行单元测试的方法
  • 使用JavaScript的AngularJS库编写hello
    world的方法
  • 利用JavaScript的AngularJS库制作电子名片的方法
  • 使用AngularJS 应用访问 Android
    手机的图片库
  • web前端,Angular-Touch库用法示例
#editor{
  width:350px;
  background: silver;
  margin:0 auto;
  margin-top:20px;
  padding-top:10px;
  padding-bottom:10px;
}
input{
  width:90%;
  margin-left:5px;
}
button{
  margin-left:5px;
}
#card{
  width:350px;
  height:200px;
  background:whitesmoke;
  box-shadow: 0 0 2px #323232;
  margin:0 auto;
  margin-top:20px;
}
header{
  background:#323232;
  padding:5px;
}
header h4{
  color:white;
  line-height:0;
  font-family:helvetica;
  margin:7px;
  margin-top:20px;
  text-shadow: 1px 1px black;
  text-transform:uppercase;
}
header p{
  line-height:0;
  color:silver;
  font-size:10px;
  margin:11px;
  margin-bottom:20px;
}
#theBody{
  background:blue;
  width:100%;
  height:auto;
}
#theLeft{
  width:50%;
  float:left;
  text-align:right;
}
#theLeft h2{
  margin-right:10px;
  margin-top:40px;
  font-family:helvetica;
  margin-bottom:0;
  color:#323232;
}
#theLeft h5{
  margin-right:10px;
  font-family:helvetica;
  margin-top:5px;
  line-height:0;
  font-weight: bold;
  color:#323232;
}

#theRight{
  width:50%;
  float:right;
  padding-top:42px;
}
#theRight p{
  line-height:0;
  font-size:12px;
  color:#323232;
  font-family:Calibri;
  margin-left:15px;
}

希望本文所述对大家AngularJS程序设计有所帮助。

这是该应用的CSS样式。在这地方我们模拟了一个名片的设计,并创建了让用户输入信息的编辑面板。

您可能感兴趣的文章:

  • AngularJS辅助库browserTrigger用法示例
  • Angular2中Bootstrap界面库ng-bootstrap详解
  • AngularJS实现分页显示数据库信息
  • 在JavaScript的AngularJS库中进行单元测试的方法
  • 使用JavaScript的AngularJS库编写hello
    world的方法
  • 利用JavaScript的AngularJS库制作电子名片的方法
  • 使用AngularJS 应用访问 Android
    手机的图片库

 

<script>
  $(function() { 

  $("#saveBut").click(function() { 

    html2canvas($("#card"), {

      onrendered: function(canvas) {

        theCanvas = canvas;

        Canvas2Image.saveAsPNG(canvas); 

      }
    });
  });
}); 
</script>

最后,在HTML页面的body结束标签之前插入这段script脚本。这段脚本的包含了下载按钮对应的事件响应,也就是说
html2canvas
函数的作用是将id为card的div转化为HTML的canvas画布,并在对canvas画布完成渲染之后,以PNG文件的形式保存该canvas画布。添加完了这个script脚本之后,该做的就做完了。
注意事项

这个canvas2image.js脚本代码里默认没有在生成的文件名称结尾使用扩展名.png。所以如果你无法打开图片的时候,请重命名该文件名,在文件名结尾加上.png这个扩展名即可。
在线调试 jsFiddle

    点击这里

您可能感兴趣的文章:

  • AngularJS辅助库browserTrigger用法示例
  • Angular2中Bootstrap界面库ng-bootstrap详解
  • AngularJS实现分页显示数据库信息
  • 在JavaScript的AngularJS库中进行单元测试的方法
  • 使用JavaScript的AngularJS库编写hello
    world的方法
  • 使用AngularJS 应用访问 Android
    手机的图片库
  • Angular-Touch库用法示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有