angular十大常见问题


Posted in Javascript onMarch 07, 2017

AngularJS可以视为是一种数据优先的框架,在它的三个层面中,数据模型是骨架,视图模型和业务事件是血肉,视图模板和指令是皮毛,这三层合在一起,就形成了一个活生生的Web应用。

1.ng-if的情况下 ,始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量(x)上。因为ng-if 会(隐式地)产生新作用域。

2.ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决?  加 track by $index 可解决。也可以 trace by 任何一个普通的值

3.ng-click 中写的表达式,能使用 JS 原生对象上的方法吗?不能用,只要是在页面中,都不能直接调用原生的 JS 方法。因为这些并不存在于与页面对应的 Controller 的 $scope 中。

<p>{{13.14 | parseIntFilter}}</p>
app.filter('parseIntFilter', function(){
  return function(item){
    return parseInt(item);
  }
})

4.{{now | 'yyyy-MM-dd'}} 这种表达式里面,竖线和后面的参数通过什么方式可以自定义?

ng 内置的 filter 有九种:

date(日期)

currency(货币)

limitTo(限制数组或字符串长度)

orderBy(排序)

lowercase(小写)

uppercase(大写)

number(格式化数字,加上千位分隔符,并接收参数限定小数点位数)

filter(处理一个数组,过滤出含有某个子串的元素)

json(格式化 json 对象)

5.filter 有两种使用方法,一种是直接在页面里:

<p>{{now | date : 'yyyy-MM-dd'}}</p>

另一种是在 js 里面用:

// $filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

自定义 filter

// 形式
app.filter('过滤器名称',function(){
  return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
    //...做一些事情 
    return 处理后的对象;
  }
}); 

// 栗子
app.filter('timesFilter', function(){
  return function(item, times){
    var result = '';
    for(var i = 0; i < times; i++){
      result += item;
    }
    return result;
  }
})

6.factory、service 和 provider 是什么关系?

factory返回的是一个对象,而service返回的是一个实例化对象,绑定到 this 的都可以被访问。provider 是加强版 factory,返回一个可配置的 factory

7.性能问题

作为 MVVM 框架,因为实现了数据的双向绑定,对于大数组、复杂对象会存在性能问题。

可以用来 优化 Angular 应用的性能 的办法:

减少监控项(比如对不会变化的数据采用单向绑定)

主动设置索引(指定 track by,简单类型默认用自身当索引,对象默认使用 $$hashKey,比如改为 track by item.id)

降低渲染数据量(比如分页,或者每次取一小部分数据,根据需要再取)

数据扁平化(比如对于树状结构,使用扁平化结构,构建一个 map 和树状数据,对树操作时,由于跟扁平数据同一引用,树状数据变更会同步到原始的扁平数据)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
Bootstrap表单控件学习使用
Mar 07 #Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 #Javascript
Bootstrap进度条实现代码解析
Mar 07 #Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 #Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 #Javascript
js仿网易表单及时验证功能
Mar 07 #Javascript
JS完成画圆圈的小球
Mar 07 #Javascript
You might like
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
学习退步检讨书
2014/09/28 职场文书
先进党支部申报材料
2014/12/24 职场文书
先进个人推荐材料
2014/12/29 职场文书
银行催款通知书
2015/04/17 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
Python可视化学习之seaborn调色盘
2022/02/24 Python