angular常见问题

  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迭代数组的下,如果数组中来相同值,会生出啊问题,如何解决?
    会提示 `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 模型上安了一个监听队列,用来监听数据变化并创新 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 次(超过 10次于后遗弃来一个好,防止无限循环)。

## 7.
两独平级界面块a和b,如果a中触发一个风波,有怎么样方法会叫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 下最好更来一个 common 目录来存放公共的事物。

b. 逻辑代码的撤并
当一个 MVVM 框架,Angular 应用本身就该以
模型,视图模型(控制器),视图来分。

此间逻辑代码的拆分,主要是据尽量让 controller
这无异于重叠很薄。提取并用的逻辑到 service 中
(比如后台数据的呼吁,数据的共享以及缓存,基于事件之模块间通信等),提取并用之界面操作及
directive
中(比如将日期选择、分页等封装成组件等),提取并用之格式化操作及 filter
中等等。

以千头万绪的用被,也得以为实体建立相应之构造函数,比如硬盘(Disk)模块,可能来列表、新建、详情这样几独视图,并分别对应之发出
controller,那么可打一个 Disk
构造函数,里面完成多少的增删改查和验证操作,有同 Disk 相关的
controller,就流 Disk
构造器并生成一个实例,这个实例就有所了增删改查和证明措施。这样既层次分明,又实现了复用(让
controller 层更逼近了)。
## 9. 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
指令以子路由模版插入到父路由模板的 <div ui-view></div>
中失去,从而实现视图嵌套。而当 ngRoute
中莫能够这样定义,如果同时以父子视图中 使用了 <div
ng-view></div> 会陷入死循环。
## 10.
比方由此angular的directive规划一模拟均组件化体系,可能碰到哪些挑战?

无团结因此 directive
做了千篇一律统效组件,讲不产生。能想到的某些是,组件如何和外场进行多少的交互,以及哪些通过简单的布局就能应用吧。

## 11.
所属不同团体进行付出的angular应用,如果只要做结合,可能会见遇到什么问题,如何缓解?
恐怕会见赶上不同模块之间的扑。比如一个社有的开销以 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)
跌渲染数据量(比如分页,或者每次得到一多少片段数据,根据需要再取)
数码扁平化(比如对于树状结构,使用扁平化结构,构建一个 map
和树状数据,对培训操作时,由于和扁平数码一致引用,树状数据变更会同步到旧之扁平数据)

d. 移动端

## 13. 安看待angular 1.2面临引入的controller as 语法?
当 angular 1.2 以前,在 view 上的别样绑定都是一直绑定在 $scope
上的。使用 controllerAs,不待更流入 $scope,controller
变成了一个大简单的 javascript 对象(POJO),一个重纯粹的 ViewModel。

起源码实现达标来拘禁,controllerAs 语法只是将 controller 这个目标的实例用 as
别名以 $scope 上创造了一个性质。

if (directive.controllerAs) {
locals.$scope[directive.controllerAs] = controllerInstance;
}
然这么做,除了上面提到的使 controller 更加 POJO 外,还可避遇到
AngularJS 作用域相关的一个坑(就是上文中 ng-if
产生一级作用域的坑,其实呢是 javascript
原型链继承中值类型继承的坑。因为运用 controllerAs 的语句 view
上具有字段都绑定在一个援的习性上,比如 vm.xx,所以坑不再存在)。

但未引入 $scope 会出现的一个题材是,导致 $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();} 这种写法有没发生题目?
来题目,时间是实时变化之,然后会一直更新数据,效率不如,脏数据检查及10破之后不再接续检查;
化解方案:可以采取一个变量来收纳函数调用

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

## 18.
起定义指令中的compiled和link函数分别发出啊作用,它们的使用场景是什么的?

 

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

knockoutjs:体积小,兼容性好,业务代码繁琐,性能一般
backbone:轻量级应用
handlerbars:是一个模板库,一般是一些静态模板
angularjs:是框架,包含了模版就同一抢的事物,但是界面及不仅是只有模板,还包有安排的东西,可以吃一定的方法

相关文章