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 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
解读vue生成的文件目录结构及说明
Nov 27 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
vue 实现锚点功能操作
Aug 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php牛逼的面试题分享
2013/01/18 PHP
php实现httpRequest的方法
2015/03/13 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
jquery 常用操作方法
2010/01/28 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
如何用Python 加密文件
2020/09/10 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
毕业实习评语
2014/02/10 职场文书
工程安全员岗位职责
2014/03/09 职场文书
企业办公室岗位职责
2014/03/12 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers