Angular.js问题总结

1.angular 的数据绑定采用什么机制?详述原理

脏检查机制。

双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。

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

举个栗子

<button ng-click='val=val+1'>increase</button>

click 时会产生一次更新的操作(至少触发两次$digest循环)

按下按钮

      * 浏览器接收到一个事件,进入到 angular context

      * $digest循环开始执行,查询每个$watch是否变化

       * 由于监视$scope.val 的$watch报告了变化,因此强制再执行一次$digest循环

       * 新的$digest循环未检测到变化

        * 浏览器拿回控制器,更新$scope.val 新值对应的 dom

$digest循环的上限是 10 次(超过 10次后抛出一个异常,防止无限循环)。


2.两个平级界面块 a 和 b,如果 a 中触发一个事件,有哪些方式能让 b 知道?详述原理

这个问题换一种说法就是,如何在平级界面模块间进行通信。有两种方法,一种是共用服务,一种是基于事件。

共用服务

在 Angular 中,通过 factory 可以生成一个单例对象,在需要通信的模块 a 和 b 中注入这个对象即可。

基于事件

这个又分两种方式

第一种是借助父 controller。在子 controller 中向父 controller 触发($emit)一个事件,然后在父 controller 中监听($on)事件,再广播($broadcast)给子 controller ,这样通过事件携带的参数,实现了数据经过父 controller,在同级 controller 之间传播,(Angularjs为在scope中为我们提供了冒泡和隧道机制,$broadcast会把事件广播给所有子controller,而$emit则会将事件冒泡传递给父controller,$on则是angularjs的事件注册函数).

第二种是借助$rootScope。每个 Angular 应用默认有一个根作用域$rootScope, 根作用域位于最顶层,从它往下挂着各级作用域。所以,如果子控制器直接使用$rootScope广播和接收事件,那么就可实现同级之间的通信。

3.angular 应用常用哪些路由库,各自的区别是什么?

Angular1.x 中常用 ngRoute 和 ui.router,还有一种为 Angular2 设计的new router(面向组件)。后面那个没在实际项目中用过,就不讲了。

无论是 ngRoute 还是 ui.router,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入。

区别

ngRoute 模块是 Angular 自带的路由模块,而 ui.router 模块是基于 ngRoute模块开发的第三方模块。

ui.router 是基于 state (状态)的, ngRoute 是基于 url 的,ui.router模块具有更强大的功能,主要体现在视图的嵌套方面。

使用 ui.router 能够定义有明确父子关系的路由,并通过 ui-view 指令将子路由模版插入到父路由模板的

中去,从而实现视图嵌套。而在 ngRoute 中不能这样定义,如果同时在父子视图中 使用了

会陷入死循环。

示例

ngRoute

var app = angular.module('ngRouteApp', ['ngRoute']);

app.config(function($routeProvider){

          $routeProvider

                   .when('/main', {

                         templateUrl: "main.html",

                          controller: 'MainCtrl'

})

.otherwise({ redirectTo: '/tabs' });

ui.router

var app = angular.module("uiRouteApp", ["ui.router"]);

app.config(function($urlRouterProvider, $stateProvider){

            $urlRouterProvider.otherwise("/index");

            $stateProvider

                      .state("Main", {

                                url: "/main",

                                templateUrl: "main.html",

                                controller: 'MainCtrl'

                         })

4.angular 的缺点有哪些?

强约束

导致学习成本较高,对前端不友好。

但遵守 AngularJS 的约定时,生产力会很高,对 Java 程序员友好。

不利于 SEO

因为所有内容都是动态获取并渲染生成的,搜索引擎没法爬取。

一种解决办法是,对于正常用户的访问,服务器响应 AngularJS 应用的内容;对于搜索引擎的访问,则响应专门针对 SEO 的HTML页面。

性能问题

作为 MVVM 框架,因为实现了数据的双向绑定,对于大数组、复杂对象会存在性能问题。

可以用来优化 Angular 应用的性能的办法:

减少监控项(比如对不会变化的数据采用单向绑定)

主动设置索引(指定track by,简单类型默认用自身当索引,对象默认使用$$hashKey,比如改为track by item.id)

降低渲染数据量(比如分页,或者每次取一小部分数据,根据需要再取)

数据扁平化(比如对于树状结构,使用扁平化结构,构建一个 map 和树状数据,对树操作时,由于跟扁平数据同一引用,树状数据变更会同步到原始的扁平数据)

另外,对于Angular1.x ,存在 脏检查 和 模块机制 的问题。

移动端

可尝试 Ionic,但并不完善。

5.解释下什么是$rootScrope以及和$scope的区别?

通俗的说$rootScrope页面所有$scope的父亲。

我们来看下如何产生$rootScope和$scope吧。

     *  Angular解析ng-app然后在内存中创建$rootScope。

     * Angular会继续解析,找到{{}}表达式,并解析成变量。

     * 接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

6. Angular中的digest周期是什么?

每个digest周期中,angular总会对比scope上model的值,一般digest周期都是自动触发的,我们也可以使用$apply进行手动触发。

7.不同模块之间通信方式?

     * Service

     * events,指定绑定的事件   

     * 使用 $rootScope

     * controller之间直接使用$parent,$$childHead等

     * directive 指定属性进行数据绑定


8.有哪些措施可以改善Angular 性能

     官方提倡的,关闭debug,$compileProvider

myApp.config(function ($compileProvider) {

         $compileProvider.debugInfoEnabled(false);

   });

  * 使用一次绑定表达式即{{::yourModel}}

  * 减少watcher数量

  * 在无限滚动加载中避免使用ng-repeat,关于解决方法可以参考这篇文章

  * 使用性能测试的小工具去挖掘你的angular性能问题,我们可以使用简单的console.time()也可以借助开发者工具以及Batarang

console.time("TimerName");

codeconsole.timeEnd("TimerName");

9.如何进行angular的单元测试

   我们可以使用karam+jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。一段简单的测试代码:

describe('calculator', function () {

       beforeEach(module('calculatorApp'));

       var $controller;

       beforeEach(inject(function(_$controller_){

             $controller = _$controller_;

         }));

        describe('sum', function () {

                    it('1 + 1 should equal 2', function () {

                                var $scope = {};

                                var controller = $controller('CalculatorController', { $scope: $scope });

                                $scope.x = 1;

                                 $scope.y = 2;

                                $scope.sum();

                                expect($scope.z).toBe(3);

                            });

                });

});

10.如何看待angular2

相比 Angular1.x,Angular2的改动很大,几乎算是一个全新的框架。

基于 TypeScript(可以使用 TypeScript 进行开发),在大型项目团队协作时,强语言类型更有利。

组件化,提升开发和维护的效率。

还有 module 支持动态加载,new router,promise的原生支持等等。

迎合未来标准,吸纳其他框架的优点,值得期待,不过同时要学习的东西也更多了(ES next、TS、Rx等)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容

  • Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...
    w_zhuan阅读 5,521评论 0 26
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    2e9a10d418ab阅读 1,265评论 0 10
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    秀才JaneBook阅读 1,539评论 0 22
  • 1.类库( 提供类方法 ) 和框架 类库提供一系列的函数和方法的合集,能够加快你写代码的速度。但是主导逻辑的还是自...
    w_zhuan阅读 1,787评论 0 8
  • 每周一都会想起那句话:周五距离周一那么近,周一距离周五却那么远…真的是心塞塞啊。每周一到单位,都不愿意下车,就默默...
    彼时锦缎阅读 219评论 0 0