前端angualr 面试题目

最新推荐文章于 2024-06-26 10:30:00 发布

白天心

最新推荐文章于 2024-06-26 10:30:00 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/qq_33167665/article/details/81316240

版权

前端angular 题目

1、 Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？

restrict

E(元素)：<directiveName></directiveName>

A(属性)：<div directiveName='expression'></div>

C(类)： <div class='directiveName'></div>

M(注释)：<--directive:directiveName expression-->

一般情况下E/A/C用得比较多。

单项绑定的前缀标识符。传递的值必须是字符串且在指令里引用时必须_x0008_加上{{}}

双向数据绑定前缀标识符。

绑定函数方法的前缀标识符

2、 <div ng-if=”true”><input type='text' ng-model='name'></div>中ng-model失效的原因

在ng-if方式中，每个包含的元素都拥有自己的作用域，因此，复选框元素也拥有自己的$scope作用域。相对于控制器作用域来说，这个作用域属于一个子级作用域，所以，如果它想绑定控制器中的变量值，必须添加$parent标识，只有这样才能访问到控制器中的变量。

因此，解决ng-if中ng-model值无效的问题，主要方法就是在绑定值时添加$parent标识，或者用ng-show指令代替ng-if指令，这两种方法都可以达到同样的页面效果。

3、列出AngularJs至少三种实现不同模块之间通信方式？

1、Service 插入模块的即服务的名字

2、events,指定绑定的事件

3、使用 $rootScope

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

5、directive 指定属性进行数据绑定

4、描述svn代码commit时可能遇到的情况，遇到冲突如何解决，恢复svn上面的某个版本怎么搞（可纸面简要作答）

提交代码时候有冲突；正常提交没有冲突；

有冲突时候的解决办法：

A、放弃自己的更新，使用svn revert（回滚），然后提交。在这种方式下不需要使用svn resolved（解决）

B、放弃自己的更新，使用别人的更新。使用最新获取的版本覆盖目标文件，执行resolved filename并提交(选择文件—右键—解决)。

C、手动解决：冲突发生时，通过和其他用户沟通之后，手动更新目标文件。然后执行resolved filename来解除冲突，最后提交。

自己当前服务器的；修改的结果；当前服务器上的代码即最新的；

通过手动修改来整合代码再提交

5、 ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

会抛出异常

解决办法：

Ng-repeat =” item in data track by $index” 指定跟踪值唯一可以了

6、自定义一个过滤器获取数组[2,3,1,5,9,0]中的最大值

过滤器的格式与写法地址

http://blog.csdn.net/sinat_31057219/article/details/60869966

app.filter('过滤器名', function () {

return function (待过滤数据, 参数....) {

......

return 已过滤数据;

}

数据

$scope.data = [2,3,1,5,9,0];

页面

<div>{{data | myFilter}}</div>

自定义控制器

app.filter('myFilter',function () {

return function (value) {

var max = "";

for(var i=0;i<value.length;i++){

max = value[i];

if( max < value[i]){

max = value[i];

}

i++;

}

return max;

}

})

7、理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。那么，require.js怎么加载非规范的模块呢？

Require.config({

//baseUrl:用来指定加载模块的目录，如果你在加载js文件中使用绝对路径的时

//候，或者其它相对路径时，可以不写

//paths，是指定模块的加载路径。

baseUrl:’./’,

Path:{

‘ionic’: ‘js/app’

//shim:是配置不兼容的模块。这里用来配置前面讲的不符合AMD规范的模块。

Shim:{

'echarts':{

exports:"echarts"

'app': {

deps: ['ionic']

deps: [

'bootstrap'

]

})

,//这里的exports就是模块的返回值，main.js中的exports的值，一定与routeTwo.js中暴露的全局变量的值一致，因为前面的routeTwo.js中的全局变量就是routeTwo，显然routeTwo.js模块的返回值，就是暴露的全局变量window.routeTwo，requirejs就是将这些全局变量的值返回，作为模块的返回结果，如果routeTwo.js中暴露了多个全局变量，那么require可能将任何一个返回。不过一般只有一个全局变量，这样冲突的可能性会减少，毕竟全局变量越少越好。

8、请解释一下relative、fixed、absolute和static元素的区别？请解释一下inline和inline-

relative:有自己的位置

absolute:没有自己的位置了

block的区别？Display的

Inline ：只能作为行内元素来使用

inline-block：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

出现问题块内有间隙是字符的原因解决方法：font-size:0的空隙

什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

只有三种情况会使得元素脱离文档流，分别是：浮动,绝对定位和相对定位。

Position的

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

Relative：相对定位，定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

Fixed：固定到页面就不变了

Absolute：绝对定位，定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，

Static：什么效果都没有

9、 CSS实现垂直水平居中

第一种：

html,body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

.content {

width: 300px;

height: 300px;

background: orange;

margin: 0 auto; /*水平居中*/

position: relative;

top: 50%; /*偏移*/

margin-top: -150px; //宽度的一半负数

}

第二种css3D的设置：

html,body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

.content {

width: 300px;

height: 300px;

background: orange;

margin: 0 auto; /*水平居中*/

position: relative;

top: 50%; /*偏移*/

transform: translateY(-50%);

}

第三种flex的设置

html,body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

body {

display: flex;

align-items: center; /*定义body的元素垂直居中*/

justify-content: center; /*定义body的里的元素水平居中*/

}

.content {

width: 300px;

height: 300px;

background: orange;

}

10、用css3实现一段动画：

当鼠标经过某个背景颜色为红色，宽高都为100px，id为test的div时，该div的背景颜色逐渐变为yellow，宽度逐渐变为150px

<style>

html,body{

margin: 0;

padding:0;

}

#test{

width: 100px;

height: 100px;

margin: 0 auto;

transition:width 3s;

background-color: red;

transition:background-color 3s;

}

#test:hover{

width: 150px;

background-color: yellow;

}

</style>

</head>

<body>

</body>

自己补充

面试题网址http://www.mamicode.com/info-detail-1690695.html

1 ng-show/ng-hide 与 ng-if的区别？

我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show.

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

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

3. 自定义一个指令的写法与形式，过滤器的写法，服务的写法

4. 自定义服务

http://blog.csdn.net/zcl_love_wx/article/details/51404390

Angular常用的路优库

2者路由有什么区别？

angular 中的 ui-router与ngRoute的区别

2者的使用都需要在ui中用ui-view指令置顶

常用的路由ngRoute ui.router

路由的设置：

$stateProvider,$urlRouterProver

$stateProver.state()

Define（【‘app’】,function(app){

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

$stateProvider

.state(“”,{

})

}）

延时的定时器如何取消，$tiemout.cancel( $timeout的名字)

Angular 中digest周期是什么？

面试其他的内容测试：

Complie 与link的d的区别于练习怎么样优化他的性能

Apply与digest的区别

Apply会进入到$rootscope

Digest会进入到$scope,和他的儿子$scope，二者主要是这些区别

Ng-if 与ng-show的区别详细的解释是作用域的问题

Angular的服务的serviced 解释的例子网络地址

一个服务职能实例化一个对象factory 与service 的代码一下是等价的书写形式，意义上是相一致的

服务的5中形式

将对象转化成数组的方式的解决办法：

Angular 中设置constanct的方式：

Var 的形式

Constact的形式

用angular 的value

11.7日的测试题目

1.阻止ng-click冒泡事件怎么阻止？ $event.stoppropagation()

2.White-space=norap 文字在一行

3.Angular会在加载前出现闪烁的问题，怎么解决

ng-bind=”” 或是

class=”ng-hide” 样式添加 .ng-hide:{display:none}

4.Ng-if ng-show的具体区别对子对象作用域也可以进行双向绑定

测试题目：

</div>

<br>

</div>

<br>

<p>{{parent.name}}</p>

</div>

5.手机端使用原生的滑块滚动条，怎样禁止使用滚动条

Overflow-scroll=”false” scroll=”false”

数据绑定采用的是什么机制？

脏检查机制。

双向数据绑定是 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 1</button>

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

按下按钮

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

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

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

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

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

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

关于指令的详细描述

在指令中的controller和link2个函数的