angular常见难题

  1. ng-if跟ng-show/hide的界别有如何?
    先是点分别是,ng-if 在末端表达式为 true 的时候才成立这几个 dom
    节点,ng-show 是初阶时就成立了,用 display:block 和 display:none
    来控制呈现和不出示。
    第2点分别是,ng-if 会(隐式地)发生新成效域,ng-switch 、 ng-include
    等会动态创立一块界面包车型大巴也是那样。
    ## 2.
    ng-repeat迭代数组的时候,要是数组中有相同值,会有哪些难题,如何消除?
    会提示 `Duplicates in a repeater are not allowed.` 加 `track by
    $index `可解决。当然,也可以 `trace by`
    任何二个常备的值,只要能唯一性标识数组中的每一项即可(建立 dom
    和多少里面包车型地铁涉嫌)。
    ## 3.
    ng-click中写的表明式,能选择JS原生对象上的不二法门,比如Math.max之类的呢?为啥?
    不得以。只若是在页面中,就不能够直接调用原生的 JS
    方法,因为那一个并不存在于与页面对应的 Controller 的 $scope 中。除非在
    $scope 中添加了那一个函数:
    “` javascript
    $scope.parseInt = function(x){
    return parseInt(x);
    } “`
    ## 4. {{now |
    ‘yyyy-MM-dd’}}这种表达式里面,竖线和前边的参数通过什么样措施得以自定义?

概念情势:
app.filter(‘过滤器名称’,function(){
return function(须求过滤的靶子, 过滤器参数1, 过滤器参数2, …){
//…做一些事务
return 处理后的靶子;
}
});

选取办法有三种,一种是直接在页面里:
javascript<p>{{now | date : ‘yyyy-MM-dd’}}</p>

一种是在 js 里面用:

// $filter(‘过滤器名称’)(须求过滤的靶子, 参数1, 参数2,…)
$filter(‘date’)(now, ‘yyyy-MM-dd hh:mm:ss’);

## 5. factory和service,provider是什么关联?

factory 把 service 的格局和数据放在多个对象里,并赶回那一个指标;service
通过构造函数格局创造 service,重回二个实例化对象;provider
创制一个可经过 config 配置的 service。

从最底层完成上来看,service 调用了 factory,重回其实例;factory 调用了
provider,将其定义的剧情放在 $get 中回到。factory 和 service
作用看似,只但是 factory 是普通 function,能够重临任何事物(return
的都得以被访问,所以那么些个人变量怎么写你懂的);service
是构造器,能够不回去(绑定到 this 的都得以被访问);provider 是抓好版
factory,再次来到二个可配置的 factory。
## 6. angular的数目绑定选用什么样机制?详述原理脏检查体制。

Angular 在 scope 模型上安装了2个监听队列,用来监听数据变动并立异 view
。每一次绑定三个事物到 view 上时 AngularJS 就会往 $watch 队列里插入一条
$watch,用来检查和测试它监视的 model 里是不是有变动的事物。当浏览器接收到能够被
angular context 处理的风浪时,$digest 循环就会触发,遍历全体的
$watch,最终更新 dom。

举个栗子:
<button ng-click=”val=val+1″>increase 1</button>

click 时会产生二次创新的操作(至少触发四次 $digest 循环)

按下按钮
浏览器接收到八个事变,进入到 angular context
$digest 循环初步履行,查询每一个 $watch 是还是不是变动
是因为监视 $scope.val 的 $watch 报告了转移,因而强制再履行一回 $digest
循环
新的 $digest 循环未检测到变化
浏览器拿回控制器,更新 $scope.val 新值对应的 dom

$digest 循环的上限是 10 次(超过 拾1次后抛出一个尤其,幸免无限循环)。

## 7.
五个平级界面块a和b,要是a中触发3个轩然大波,有哪些措施能让b知道,详述原理(那么些题材换一种说法正是,如何在同级界面模块间开始展览通信。)

有二种艺术,一种是共用服务,一种是基于事件。
a. 共用劳动
在 Angular 中,通过 factory 能够生成一个单例对象,在须求通信的模块 a 和
b 中注入这么些目的即可。

b. 基于事件
其一又分二种办法第三种是借助父 controller。在子 controller 中向父
controller 触发($emit)三个轩然大波,然后在父 controller
中监听($on)事件,再广播($broadcast)给子 controller
,那样经过事件教导的参数,实现了多少经过父 controller,在同级 controller
之间传开。

其次种是凭借 $rootScope。每一种 Angular 应用默许有三个根成效域
$rootScope,
根功能域位于最顶层,从它往下挂着各级成效域。所以,借使子控制器直接行使
$rootScope 广播和吸收事件,那么就可达成同级之间的通讯。
## 8. 二个angular应用应当怎样能够地分层?

分多少个地点讲
a.目录结构的撤销合并

对此小型项目,能够遵从文件类型组织,比如css
js
controllers
models
services
filters
templates

不过对于规模较大的品种,最好按工作模块划分,比如css
modules
account
controllers
models
services
filters
templates
disk
controllers
models
services
filters
templates

modules 下最好再有2个 common 目录来存放在公共的东西。

b. 逻辑代码的分割
用作三个 MVVM 框架,Angular 应用自个儿就应当依据模型,视图模型(控制器),视图来划分。

此地逻辑代码的拆分,首就算指尽量让 controller
这一层很薄。提取共用的逻辑到 service 中
(比如后台数据的请求,数据的共享和缓存,基于事件的模块间通讯等),提取共用的界面操作到
directive
中(比如将日期接纳、分页等封装成组件等),提取共用的格式化操作到 filter
中等等。

在千头万绪的行使中,也能够为实体建立相应的构造函数,比如硬盘(Disk)模块,大概有列表、新建、详情那样多少个视图,并分别对应的有
controller,那么能够建八个 Disk
构造函数,里面达成多少的增加和删除改查和注脚操作,有跟 Disk 相关的
controller,就注入 Disk
构造器并生成1个实例,那个实例就有着了增加和删除改查和认证格局。那样既层次明显,又完结了复用(让
controller 层更薄了)。
## 9. angular应用常用哪些路由库,各自的分别是何等?

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

任由 ngRoute 依然 ui.router,作为框架额外的附加效用,都必须以 模块重视的样式被引入。

两岸分别是:
ngRoute 模块是 Angular 自带的路由模块,而 ui.router 模块是依据ngRoute模块开发的第3方模块。

ui.router 是基于 state (状态)的, ngRoute 是根据 url
的,ui.router模块具有更强硬的效能,首要反映在视图的嵌套方面。

运用 ui.router 能够定义有举世瞩目父子关系的路由,并经过 ui-view
指令将子路由模版插入到父路由模板的 <div ui-view></div>
中去,从而达成视图嵌套。而在 ngRoute
中不能如此定义,假使还要在父子视图中 使用了 <div
ng-view></div> 会陷入死循环。
## 10.
假如通过angular的directive规划一套全组件化种类,恐怕境遇什么挑衅?

从不协调用 directive
做过一全套组件,讲不出。能体会驾驭的某个是,组件如何与外场实行数据的互相,以及哪些通过不难的配置就能应用啊。

## 11.
分属区别团体拓展开发的angular应用,假如要做结合,也许会赶上什么样难题,怎么样化解?
或者会赶上分歧模块之间的抵触。比如3个团协会有着的成本在 moduleA
下开始展览,另一协会开发的代码在 moduleB 下:

angular.module(‘myApp.moduleA’, [])
.factory(‘serviceA’, function(){

})

angular.module(‘myApp.moduleB’, [])
.factory(‘serviceA’, function(){

})

angular.module(‘myApp’, [‘myApp.moduleA’, ‘myApp.moduleB’])

会造成多少个 module 下边包车型地铁 serviceA 产生了覆盖。

诚如在 Angular1.x
中并从未很好的消除办法,所以最辛亏早先时代开始展览统一规划,做好约定,严酷遵照预约开发,各个开发职员只写一定区块代码。
## 12. angular的瑕疵有何?
a. 强约束
以致学习花费较高,对前者不本人。但服从 AngularJS
的预约时,生产力会很高,对 Java 程序员友好。
b. 不利于 SEO
因为兼具剧情都以动态获取并渲染生成的,搜索引擎无法爬取。
一种化解办法是,对于健康用户的拜访,服务器响应 AngularJS
应用的始末;对于搜索引擎的拜访,则响应专门针对 SEO 的HTML页面。
c. 品质难题
作为MVVM框架,因为落成了多少的双向绑定,对于大数组、复杂对象会设有品质难点。

能够用来 优化 Angular 应用的品质 的法子:
收缩监察和控制项(比如对不会变动的数目选取单向绑定)
再接再砺设置索引(内定 track by,简单类型暗中认可用自笔者当索引,对象暗许使用
$$hashKey,比如改为track by item.id)
跌落渲染数据量(比如分页,恐怕每一回取一小部分多少,依据要求再取)
多少扁平化(比如对于树状结构,使用扁平化结构,创设2个 map
和树状数据,对树操作时,由于跟扁平数据一致引用,树状数据变更会同步到原来的扁平数据)

d. 移动端

## 13. 什么样对待angular 1.第22中学引入的controller as 语法?
在 angular 1.2 在此以前,在 view 上的别的绑定都以间接绑定在 $scope
上的。使用 controllerAs,不要求再流入 $scope,controller
变成了2个很简短的 javascript 对象(POJO),二个更纯粹的 ViewModel。

从源码完毕上来看,controllerAs 语法只是把 controller 这几个指标的实例用 as
别称在 $scope 上创办了1个属性。

if (directive.controllerAs) {
locals.$scope[directive.controllerAs] = controllerInstance;
}
然则这么做,除了上边提到的使 controller 尤其 POJO 外,还足以幸免碰到AngularJS 功用域相关的三个坑(便是上文中 ng-if
发生顶级效用域的坑,其实也是 javascript
原型链继承中值类型继承的坑。因为运用 controllerAs 的话 view
上全部字段都绑定在二个引用的属性上,比如 vm.xx,所以坑不再存在)。

可是不引入 $scope 会出现的1个标题是,导致 $emit、 $broadcast、
$on、$watch 等 $scope
下的主意不能选取。这么些跟事件相关的操作能够打包起来统一处理,也许在单个
controller 中引入 $scope,特殊对待。

## 14. 详述angular的“依赖注入”
AngularJS 是透过构造函数的参数名字来测算依赖服务名称的,通过 toString()
来找到那一个定义的 function
对应的字符串,然后用正则解析出里面包车型地铁参数(重视项),再去重视映射中取到对应的正视,实例化之后传出。

因为 AngularJS 的 injector
是如若函数的参数名就是信赖的名字,然后去寻找注重项,那倘使像上边这样归纳注入信赖,代码压缩后(参数被重命名了),就无法查找到注重项了。

function myCtrl = ($scope, $http){

}

由此,平日会利用上面三种艺术注入重视(对重视添加的逐条有供给)。

数组注释法:
myApp.controller(‘myCtrl’, [‘$scope’, ‘$http’, function($scope,
$http){

}])

显式 $inject :
myApp.controller(‘myCtrl’, myCtrl);
function myCtrl = ($scope, $http){

}
myCtrl.$inject = [‘$scope’, ‘$http’];

对于三个 DI
容器,必须具备四个因素:信赖项的登记,重视关系的宣示和对象的获得。在
AngularJS 中,module 和 $provide 都得以提供重视项的挂号;内置的 injector
可以博得对象(自动实现依赖注入);依赖关系的扬言,正是地点的那三种办法。

## 15.controller as 和controller 有如何分别,能消除什么难点?

在采纳controller的时候,为控制器注入$window与$scope,那个时候controller中的属性与办法是属于$scope的,而利用controllerAS的时候,能够将controller定义为Javascript的原型类,在html中央直属机关接绑定原型类的属性和方法

优点:
a.能够动用 Javascript 的原型类, 我们得以接纳更为高档的 ES6 恐怕TypeScript 来编排 Controller ;
b.避开了所谓的 child scope 原型继承带来的局地标题

Controller:
angular.module(‘app’, []).controller(‘TestController’,
TestController);
TestController.$inject = [‘$scope’, ‘$window’];
function TestController($scope, $window) {
$scope.name = ‘beginor’;
$scope.greet = greet;
function greet() {
$window.alert(‘Hello, ‘ + $scope.name);
}
}
HTML中的使用:
<div ng-Controller=”TestController”>
<label>Name:
<input type=”text” ng-model=”name” />
</label>
<button type=”button” ng-click=”greet()”>
</div>

controllerAS:
angular.module(‘app’, []).controller(‘TestController’,
TestController);
TestController.$inject = [‘$window’];
function TestController($window) {
this.name = ‘beginor’;
this.$window = $window;
}
TestController.prototype.greet = function () {
this.$window.alert(‘Hello, ‘ + this.name);
}
HTML中的使用:
<div ng-Controller=”TestController as vm”>
<label>Name:
<input type=”text” ng-model=”vm.name” />
</label>
<button type=”button” ng-click=”vm.greet()”>
</div>

## 16.html: {{currentDate()}} js: $scope.currentDate =
function(){return new Date();} 那种写法有没有标题?
不平时,时间是实时变化的,然后会直接更新数据,效用低,脏数据检查到1五回之后不再接续检查;
消除方案:能够运用五个变量来接受函数调用

## 17. directive
什么调用外部函数,如何向函数里传递参数,怎么着expose函数给外部调用?

## 18.
自定义指令里面包车型客车compiled和link函数分别有哪些意义,它们的行使场景是怎样的?

 

## 19. knockoutjs,angularjs,backbone,handlebars区别

knockoutjs:体量小,包容性好,业务代码繁琐,品质一般
backbone:轻量级应用
handlerbars:是三个模板库,一般是有的静态模板
angularjs:是框架,包涵了模版这一快的事物,然而界面上不仅是只有模板,还包涵部分陈设的事物,能够被一定的法门

相关文章