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 相关文章推荐
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
初步了解javascript面向对象
Nov 09 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
axios基本入门用法教程
Mar 25 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
accesskey 提交
2006/06/26 Javascript
关于图片验证码设计的思考
2007/01/29 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python config文件的读写操作示例
2019/09/27 Python
Python底层封装实现方法详解
2020/01/22 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python发送邮件实现基础解析
2020/08/14 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
制药工程专业个人求职自荐信
2014/01/25 职场文书
2013年军训通讯稿
2014/02/05 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
董存瑞观后感
2015/06/11 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
《学会看病》教学反思
2016/02/17 职场文书
品德与社会教学反思
2016/02/24 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript