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客户端脚本的设计和应用
Aug 21 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
简化vuex的状态管理方案的方法
Jun 02 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
JS实现放烟花效果
Mar 10 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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
Oracle 常见问题解答
2006/10/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php中autoload的用法总结
2013/11/08 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
splice slice区别
2006/10/09 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
angular动态表单制作
2018/02/23 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
github配置使用指南
2014/11/18 Python
python插入排序算法实例分析
2015/07/03 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python实现定时发送邮件
2020/12/23 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
给学校的建议书范文
2014/05/15 职场文书
销售顾问工作计划书
2014/08/15 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年班主任工作总结
2014/11/08 职场文书