当前位置:千赢国际官网 > 千赢网页手机版登入 > 最常用的功能汇总,专注于向Angular

最常用的功能汇总,专注于向Angular

文章作者:千赢网页手机版登入 上传时间:2019-07-12

Angular团队最近发布了Angular 1.5的正式版,该版本实现了一次重大的升级,它让仍在使用1.X版本的开发者将能够更容易地过渡到Angular 2的开发。

本文实例讲述了javascript瀑布流布局实现方法。分享给大家供大家参考,具体如下:

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。

Pete Bacon Darwin在此次发布 声明 的博客文章中写道,这次发布的目的是“改进Angular 2的升级路径。我们在这次发布中引入了一些新的特性,让开发者编写的Angular 1应用更接近于在Angular 2中应用的结构。”

html结构:

如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

此次发布中,新的module.component()辅助方法是向Angular 2进行过渡的最大变更。通过使用该方法,开发者就不必再遵循传统的directive定义对象风格编写directive了。如果读者已经熟悉Angular 2的写法,就应当注意到这种相似性。在文章中,作者通过一个示例表现了定义一个新component的方法:

<div id="waterfall">
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
</div>

第一 迭代输出之ng-repeat标签

myModule.component('myComponent', {
template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>',
bindings: { firstName: '<', lastName: '<' },
controller: function() {
this.getFullName = function() {
return this.firstName   ' '   this.lastName;
};
}
});

css样式表:

ng-repeat让table ul ol等标签和js里的数组完美结合

在component出现之前,开发者通常只能使用directive,或是通过对controller的非常规使用才能够实现某些场景。但这并不是说component就将完全取代directive的作用了,比方说component就无法用于操作DOM,并且所有的component都必须通过自定义的HTML元素激活,而不支持通过元素的属性触发。按照以上方式定义的component可通过以下代码使用:

*{margin:0;padding: 0}
#waterfall{position: relative;}
.mod-box{
  padding: 15px 0 0 15px;
  float: left;
}
.mod-img{
  padding: 9px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  position: relative;
}
.mod-img img{
  width: 310px;
  height: auto;
}
<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>
<my-component first-name="'Alan'" last-name="'Rickman'"></my-component>

javascript代码:

你甚至可以指定输出的顺序:

新的 component指南 对于传统的directive与component之间的区别提供了更完整的说明。

window.onload = function(){
   waterFall("waterfall","mod-box");
}
window.onscroll = scroll;
window.onresize = function() {
  if(re)clearTimeout(re);
  var re = setTimeout(function() {
  waterFall("waterfall","mod-box");
   }, 200);
}
var dataInit = {
  "data": [
    {
      "src": "5.jpg"
    },
    {
      "src": "6.jpg"
    }
   ]
  };
/**
 * 滚动添加数据函数
 */
function scroll(){
 var flag = checkScroll("waterfall","mod-box");
 if(flag ){
   var oparent = document.getElementById("waterfall");
   var htmlStr = "";
   var len = dataInit.data.length;
   for(var i=0;i<len;i  ){
     htmlStr =""; //需要插入的结构
   }
   oparent.innerHTML =htmlStr;
   waterFall("waterfall","mod-box"); //重新调用一次
 }
}
/**
 * 瀑布流函数
 * @param parentID 容器id
 * @param clsName 数据块className
 */
function waterFall(parentID,clsName){
  var oParent = document.getElementById(parentID); // 父级对象
  //将content下所有class为mod-box的元素取出来
  var oBoxs = getObjsByClassName(oParent,clsName);// 获取存储块框clsName的数组oBoxs
  var oBoxWidth = oBoxs[0].offsetWidth;  //obox的宽 ==>310 9*2 2 15 = 345(包含边框和内边距) 一个块框的宽
  var pageWidth = document.documentElement.clientWidth; //页面可视宽度
  //var pageWidth = document.documentElement.offsetWidth; //页面可视宽度
  var cols = Math.floor(pageWidth/oBoxWidth); //计算整个页面显示的列数(页面宽/obox的宽)每行中能容纳的mod-box个数
  var hAarr = []; //用于存储 每列中的所有块框相加的高度。
  var minH;   
  var minHIndex;    //最小高度对应的索引值
  for(var i = 0;i<oBoxs.length;i  ){//遍历数组aPin的每个块框元素
    oBoxs[i].style.position="absolute";
    if(i<cols){ //把第一行排放好,并将每一列的高度记入数据hAarr
      hAarr.push(oBoxs[i].offsetHeight);
      oBoxs[i].style.top=0 "px";
      oBoxs[i].style.left=oBoxWidth*i "px";
    }else{
      minH = Math.min.apply(null,hAarr); //数组hAarr中的最小值minH
      minHIndex = getMinhIndex(hAarr,minH);
      oBoxs[i].style.top=minH "px";
      // oBoxs[i].style.left=oBoxWidth*minHIndex "px";
      oBoxs[i].style.left= oBoxs[minHIndex].offsetLeft "px";
      //数组 最小高元素的高   添加上的aPin[i]块框高
      hAarr[minHIndex] =oBoxs[i].offsetHeight; //更新添加了块框后的列高
    }
  }
  var maxH = Math.max.apply(null,hAarr);
  oParent.style.cssText = "width:" oBoxWidth*cols "px;margin:0 auto;height:" maxH "px;"; //设置父级居中样式:定宽 自动水平外边距
}
/**
 * 检查是否符合加载数据(滚动到最后一个oBox)
 * @param parentID 容器id
 * @param clsName 数据块className
 * @returns {boolean}
 */
function checkScroll(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  var oBoxs = getObjsByClassName(parentObj,clsName);
  var lastBoxH = oBoxs[oBoxs.length-1].offsetTop Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
  //创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部 自身高的一半(实现未滚到底就开始加载)
  var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;
  //标准模式与混杂模式
  var height = document.documentElement.clientHeight; //页面高度
  return (lastBoxH<scrolltop height)?true:false;
}
/**
 * 根据class获得元素
 * @param id
 * @param clsName
 * @returns {Array}
 */
function getObjsByClassName(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  if(!parentObj){
    return;
  }
  var childObjs = parentObj.getElementsByTagName("*"); //获取 父级的所有子集
  var calssObjs = []; //创建一个数组 用于收集子元素
  for(var i in childObjs){//遍历子元素、判断类别、压入数组
    if(childObjs[i].className==clsName){ 
      calssObjs.push(childObjs[i]);
    }
  }
  return calssObjs;
}
/**
 * 获取最小值的索引minIndex
 * @param arr
 * @param minH
 * @returns {string}
 */
function getMinhIndex(arr,minH){
  for(var i in arr){
    if(arr[i]===minH){
      return i;
    }
  }
}
<li ng-repeat="person in persons | orderBy:'name'">

单向绑定

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript扩展技巧总结》及《JavaScript运动效果与技巧汇总》

第二 动态绑定之ng-model标签

生命周期钩子

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

任何有用户输入,只要是有值的html标签,都可以动态绑定js中的变量,而且是动态绑定。

绑定至必需的directive

您可能感兴趣的文章:

  • 原生js实现瀑布流布局
  • 深入学习js瀑布流布局
  • 纯js实现瀑布流布局及ajax动态新增数据
  • 基于JavaScript实现瀑布流布局(二)
  • 基于JavaScript实现瀑布流布局
  • 原生JavaScript实现瀑布流布局
  • 原生JS实现美图瀑布流布局赏析
  • 原生JS实现响应式瀑布流布局
  • 解析瀑布流布局:JS 绝对定位的实现
  • JavaScript瀑布流布局实现代码
<input type="text" ng-model='password'>

支持多个slot的transclusion

对于绑定的变量,你可以使用{{}} 直接引用

默认transclusion内容

you input password is {{password}}

目前在使用1.4版本的开发者可以阅读 迁移指南 以了解迁移时需要进行哪些必要的变更,因为1.5版本中引入了一些破坏性的变更。

如果你熟悉fiter,你可以很容易的按你的需要格式输出

在可预见的一段时间内,1.5版本应当是最大的一次变更了。当InfoQ向Bacon Darwin问及1.X版本将何去何从时,他是这样回答的:

{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}

我们还没有开始计划Angular 1的下一次发布周期。由于离Angular 2正式发布的日期已经越来越近了,因此如果我们继续开发Angular 1,那么也会尽量使它更接近于Angular 2。如果为了实现这一点而必须引入破坏性的变更,那么可以预计1.6版本的出现。同时,我们还将继续Angular 1.5.x版本的开发,提供bug的修复以及一些较小的特性。总之,这与我们让Angular 1.X更易于迁移至Angular 2的目标并不冲突。

第三 绑定点击事件之ng-click事件

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:最常用的功能汇总,专注于向Angular

关键词: 千赢国际官网