angularJs的理解

angularJs的理解

发布时间:2016年06月21日 评论数：抢沙发 阅读数：2

第三方 插件angular-ui 还有谷歌扁平化库 material.angular

angularJS 优缺点：

模板功能强大 ，自带丰富的angular指令 一个完善的MV*框架 ，包含模板 双向绑定 ，路由，模块化，服务，过滤器，依赖注入等功能 ，自定义指令

缺点:ngView只能有一个，不能嵌套多个视图

内容网站，须要SEO的解决方案

交互频繁的，如游戏之类交互体验网站。

angular汇总

① 构建SPA （单一页面应用程序） single page APP

PJax原理 SPA 实现原理

1 ，点击a标签连接 使用锚点修改地址栏 或者用HTML5 的 histroy API pushState方法将当前的url添加到历史记录中

2 ，ajax请求加载相应视图 替换原来的视图

3 ，点击后退或前进 地址栏发生变化 监听hashchange事件 或监听popstate事件 加载相应视图

url地址 能够经过window.location拿到全部url的信息

优势：spa（单页面应用）

一、用户体验好、快，内容的改变不须要从新加载整个页面，避免了没必要要的跳转和重复渲染。

二、基于上面一点，SPA相对对服务器压力小。

缺点：

1： seo 不利于搜索引擎优化

3：前进、后退、地址栏等，须要程序进行管理；

② AngularJS的工做原理 交互过程主要由几个循环组成

1. 运行原理 AngularJS等待DOMContentLoaded事件的触发；angularJS寻找ng-app指令中指定的模块配置$injector (注射器)，它是一个IOC容器/控制反转。$injector建立$compile服务和$rootScope。 使用$compile服务编译DOM并把它连接到$rootScope上

2 。事件循环 首先 浏览器一直处于监听状态，一旦有事发生，就会被加到一个 event queue 中，event queue 中的事件会一个一个执行

AngularJS）的上下文中进行调用。AngularJS会在包含做用域apply()方法内调用指令。Angular在rootScope上启动$digest循环时开始整个过程的

而后AngularJS会进入到由两个小循环组成的digest循环中 一个是用来处理evalAsync队列 一个是处理watch列表 digest循环会一直迭代知道evalAsync队列为空而且$watch列表也为空的时候，即model再也不有任何变化。

一旦AngularJS的$digest循环结束，整个执行就会离开AngularJS和Javascript的context，紧接着浏览器就会把数据改变后的视图从新渲染出来。

$digest循环中

$watch列表 是一些表达式的集合，一旦有改变发生，那么$watch函数就会被调用

$evalAsync 用来schedule一些须要在渲染视图以前处理的操做 经过setTimeout(0)实现，速度会比较慢，可能会出现视图抖动的问题

angular 的数据绑定采用什么机制？详述原理 脏检查机制。

Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到能够被 angular context 处理的事件时，$digest 循环就会触发，遍历全部的 $watch，最后更新 dom。

$digest 循环的上限是 10 次（超过 10次后抛出一个异常，防止无限循环）。

1. ng-if跟ng-show/hide的区别有哪些？

ng-if 在后面表达式为 true 的时候才建立这个 dom 节点，ng-show 是初始时就建立了，用 display:block 和 display:none 来控制显示和不显示。

ng-if 会（隐式地）产生新做用域，ng-switch 、 ng-include 等会动态建立一块界面的也是如此。

2.ng-repeat迭代数组的时候，若是数组中有相同值，会有什么问题，如何解决？

会提示 不容许复制. 加 track by $index 可解决 增长惟一性标识数组中的每一项便可

3. ng-click中写的表达式，能使用JS原生对象上的方法，好比Math.max之类的吗？为何？

不能够。只要是在页面中，就不能直接调用原生的 JS 方法，由于这些并不存在于与页面对应的 Controller 的 $scope 中。

4. {{now | 'yyyy-MM-dd'}}这种表达式里面，竖线和后面的参数经过什么方式能够自定义？

ng 内置的 filter 有九种：

date（日期）currency（货币）limitTo（限制数组或字符串长度）orderBy（排序）lowercase（小写）uppercase（大写）number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）filter（处理一个数组，过滤出含有某个子串的元素）json（格式化 json 对象）

filter 有两种使用方法，一种是直接在页面里：另外一种是在 js 里面用：自定义 filter

5. factory和service，provider是什么关系？

1 factory 把 service 的方法和数据放在一个对象里，并返回这个对象

简单讲factory 是普通function 能够返回任何东西

2 service 经过构造函数方式建立 service，返回一个实例化对象

service 是构造器，能够不返回 绑定到 this 的均可以被访问

3 provider 建立一个可经过 config 配置的 service。

6. 两个平级界面块a和b，若是a中触发一个事件，有哪些方式能让b知道，详述原理；

在 Angular 中，经过 factory 能够生成一个单例对象，在须要通讯的模块 a 和 b 中注入这个对象便可。

第二种是借助 $rootScope， 每一个 Angular 应用默认有一个根做用域 $rootScope

7. angular应用经常使用哪些路由库，各自的区别是什么？

ui.router 是基于 state （状态）的， ngRoute 是基于 url 的，ui.router模块具备更强大的功能，主要体如今视图的嵌套方面。

8. angular的缺点有哪些？

a. 强约束 致使学习成本较高

b. 不利于 SEO 内容都是动态获取并渲染生成的，搜索引擎无法爬取。

c. 性能问题 双向绑定，对于大数组、复杂对象会存在性能问题。

9. angular的优化？

减 少监控项

主动设置索引（

下降渲染数据量（好比分页，或者每次取一小部分数据，根据须要再取）

数据扁平化

d. 移动端

10. 详述angular的“依赖注入”

AngularJS 是经过构造函数的参数名字来推断依赖服务名称的，经过 toString() 来找到这个定义的 function 对应的字符串，而后用正则解析出其中的参数（依赖项），再去依赖映射中取到对应的依赖，实例化以后传入。

由于 AngularJS 的 injector 是假设函数的参数名就是依赖的名字，而后去查找依赖项，那若是像下面这样简单注入依赖，代码压缩后（参数被重命名了），就没法查找到依赖项了。

function myCtrl = ($scope, $http){ ... }

数组注释法：

myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http){ ... }])

异步请求之$http对象

一、GET请求，请求的数据会附加在URL以后，以?分割URL和传输数据，多个参数用&链接。URL的编码格式采用的是ASCII编码，而不是uniclde，便是说全部的非ASCII字符都要编码以后再传输。

POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。

所以，GET请求的数据会暴露在地址栏中，而POST请求则不会。

若是你是POST请求，params里的数据会帮你拼到url后面，data里的数据会放到请求体中。

$interval注册的匿名函数不会在元素被移除时自动释放，存在必定的内存泄露风险

element.on('$destroy', function() {$interval.cancel(timeoutId);});

angular $http 跨域请求的时 默认提供异步请求对象不支持自定义回调函数名，

angular随机分配的回调函数名称不被接口支持

angular中把全部jsonp的callback都挂在angular.callbacks这个对象上

解决方法 自定义一个服务 把$document

1挂载回调函数到全局下 2，将要传的参数转换成URl字符串的形式 3，处理url中的回调函数 4，建立一个script标签 5，将script标签放到页面中 最后起须要调用$apply方法

加载动画在状态中加入 ng-show=‘login’ 在scope中添加个flase状态 加载完成后改为true 使用第三方须要 调用$scope.$apply()方法