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实现上传图片并预览的效果实现代码
Apr 11 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
javascript基础知识讲解
Jan 11 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php 禁止页面缓存输出
2009/01/07 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python学习基础之循环import及import过程
2018/04/22 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python中xlutils库用法浅析
2020/12/29 Python
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
国外软件测试工程师面试题
2016/12/09 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
网络编辑岗位职责
2014/03/18 职场文书
新闻报道稿范文
2015/07/23 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技