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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
vue element中axios下载文件(后端Python)
May 10 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代码
2007/03/03 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
用javascript自动显示最后更新时间
2007/03/15 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python访问hdfs的操作
2020/06/06 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
给排水工程师岗位职责
2013/11/21 职场文书
期末自我鉴定
2014/02/02 职场文书
企业金融服务方案
2014/06/03 职场文书
市场调查策划方案
2014/06/10 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
贷款担保书
2015/01/20 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
mysql数据库实现设置字段长度
2022/06/10 MySQL