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获取GridView选择的行内容
Apr 14 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
微信小程序 获取二维码实例详解
Jun 23 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
Angular6封装http请求的步骤详解
Aug 13 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 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
javascript实现拖放效果
2015/12/16 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
专升本个人自我评价
2013/12/22 职场文书
保护环境的建议书
2014/03/12 职场文书
2014年营业员工作总结
2014/11/18 职场文书
前台接待岗位职责
2015/02/03 职场文书
教师师德承诺书2016
2016/03/25 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android