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原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
vue强制刷新组件的方法示例
Feb 28 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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 购物车的例子
2009/05/04 PHP
PHP 学习路线与时间表
2010/02/21 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
npm qs模块使用详解
2020/02/07 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python中upper是做什么用的
2020/07/20 Python
在家更换处方镜片:Lensabl
2019/05/01 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
给儿子的表扬信
2014/01/15 职场文书
工作失职检讨书范文
2014/01/16 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
给实习单位的感谢信
2014/02/01 职场文书
小学母亲节活动方案
2014/03/14 职场文书
公司新年寄语
2014/04/04 职场文书
孩子教育的心得体会
2014/09/01 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
八月迷情观后感
2015/06/11 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers