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 相关文章推荐
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 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
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
详解javascript函数的参数
2015/11/10 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
js时间控件只显示年月
2017/01/08 Javascript
js微信分享实现代码
2020/10/11 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
网吧收银员岗位职责
2013/12/14 职场文书
教师评优事迹材料
2014/01/10 职场文书
学生爱国演讲稿
2014/01/14 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
毕业生自荐信范文
2015/03/05 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL