精华内容
下载资源
问答
  • angular面试题
    2020-12-02 22:32:49

    angular用管道转换数据

    Angular 为典型的数据转换提供了内置的管道,包括国际化的转换(i18n),它使用本地化信息来格式化数据。数据格式化常用的内置管道如下:

    • DatePipe:根据本地环境中的规则格式化日期值。

      DatePipe: Formats a date value according to locale rules.

    • UpperCasePipe:把文本全部转换成大写。

    • LowerCasePipe :把文本全部转换成小写。

      LowerCasePipe: Transforms text to all lower case.

    • CurrencyPipe :把数字转换成货币字符串,根据本地环境中的规则进行格式化。

    • DecimalPipe:把数字转换成带小数点的字符串,根据本地环境中的规则进行格式化。

    • PercentPipe :把数字转换成百分比字符串,根据本地环境中的规则进行格式化angualr

    angular路由配置:

    路由配置在 app.route.ts 中 

    路由跳转方式 

    [routerLink]="['/devicepay']" [queryParams]="{id:key}"  //路由跳转传参
    //获取值
    this.route.queryParams.subscribe((res)=>{
        console.log(res)
      })
    { path: 'devicepay/:id',component:DevicepayComponent},  动态传参
    
    路由跳转  this.router.navigate(['/news'],navigationExtras);  
    

    app.module.ts包含的内容解析

    NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块。

    @NgModule({
        imports:      [ BrowserModule ],导入表) —— 那些导出了本模块中的组件模板所需的类的其它模块
        providers:    [ Logger ], 本模块向全局服务中贡献的那些服务的创建器。
        declarations: [ AppComponent ], 主要应用导入组件 那些属于本 NgModule 的组件、指令、管道。
        exports:      [ AppComponent ], 导出表 那些能在其它模块的组件模板中使用的可声明对象的子集。
        bootstrap: [ AppComponent ], //应用的主视图,称为根组件。 
    })

    在 Angular 中有三种类型的指令:

    组件 — 拥有模板的指令
    
    结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
    
    属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。

    angular 生命周期的顺序

    ngOnChanges: Angular 设置或重新设置数据绑定的输入属性时响应。在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用
    ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
    ngDoCheck:检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应,在ngOnChnages之后
    ngAfterContentInit:当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用,在ngDoCheck之后
    ngAfterContentChecked:每当 Angular 检查完被投影到组件或指令中的内容之后调用,在ngAfter...之后调用
    ngAfterViewInit:当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。在ng..之后,只调用一次
    ngAfterViewChecked:每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用, 
                        gAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
    ngOnDestroy:当 Angular 每次销毁指令/组件之前调用并清扫.

    父子组件传值

    子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。
    输出给父组件  @Output  EventEmitter   somethingChanged.emit(value)也叫事件发射器 触发父组件值得改变
    子组件接收值用的@input
    
    

    组件样式 ViewEncapsulation.Native(仅限本组件) None (全局样式)Emulated (只进不出,全局样式能进来,组件样式出不去)

    angular 数据双向绑定原理

    原理:页面中每绑定一个数据或者事件时,就会向$watch队列中加入一条$watch,当浏览器接受到可以被angular context(当事件触发,调用$apply进入angular context)处理的事件时,就会触发digest循环,它会遍历每一个$watch检查其属性和值是否发生改变,如果改变则用新值覆盖旧值,直到所有$watch检查完。如果此次digest循环有更新,那么会再次触发digest循环,直到所有的$watch都没有更新为止。

    使用Angular 2,和使用Angular 1相比,有什么优势?

    1. Angular 2是一个平台,不仅是一种语言
    2. 更好的速度和性能
    3. 更简单的依赖注入
    4. 模块化,跨平台
    5. 具备ES6和Typescript的好处。
    6. 灵活的路由,具备延迟加载功能
    7. 更容易学习
    8. angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能

      在Angular 2应用中,我们应该注意哪些安全威胁?

      就像任何其他客户端或Web应用程序一样,Angular 2应用程序也应该遵循一些基本准则来减轻安全风险。其中一些是:

    • 避免为你的组件使用/注入动态HTML内容。
    • 如果使用外部HTML,也就是来自数据库或应用程序之外的地方,那么就需要清理它。
    • 不要将外部网址放在应用程序中,除非它是受信任的。避免网址重定向,除非它是可信的。
    • 考虑使用AOT编译或离线编译。
    • 通过限制api,选择使用已知或安全环境/浏览器的app来防止XSRF攻击、

    Angular变化监测 :

    event:绑定event事件,数据变化视图更新

    timeout,延迟触发

     

     

    更多相关内容
  • 因为最近在看Angular面试题,所以特意总结一下。下面内容都是基于Angular v8.0以上的。 顺便科普一下,Angular最早期的版本,也叫AnugularJS,使用javascript开发;新的版本,才叫Angular,也称为Angular2,使用...

    Angular 更新还是非常快的, 目前(2020)的速度是每年2个主版本。网上也有不少面试题,不过很多都是针对老的版本,尤其是AngularJS的。因为最近在看Angular的面试题,所以特意总结一下。下面内容都是基于Angular v8.0以上的

    顺便科普一下,Angular最早期的版本,也叫AnugularJS,使用javascript开发;新的版本,才叫Angular,也称为Angular2,使用typescript开发,Angular和AngularJS是不兼容的(当然也有2个版本的集成方案)。

    Angular v8+面试系列

    关于Angular CLI

    Angular CLI又称 Angular脚手架,用于快速生成项目或者组件的框架以提高效率。可以方便的生成angular app、component、service 等等, 并且可以通过参数,按照自己的需求去创建。可以说是angular开发必不可少的利器。
    参考:https://cli.angular.io/

    • ng generate: 新建component、service、pipe, class 等
    • ng new: 新建angular app
    • ng update: 升级angular自身,以及依赖
    • ng version: 显示anuglar cli全局版本、以及本地的angular cli、angular code等的版本
    • ng add: 新增第三方库。会做2件事,1)基于npm安装node_modules, 2)自动更改配置文件,保证新的依赖正常工作

    关于angular的依赖注入(dependency injection)

    依赖注入是Angular实现的一种应用程序设计模式, 是Angular的核心概念之一。

    依赖就是具有一系列功能的服务(service), 应用程序中的各种组件和指令(derictives)可能需要服务的功能。 Angular提供了一种平滑的机制,通过它我们可以将这些依赖项注入我们的组件和指令中。因此,我们只是在构建依赖关系,这些依赖关系可以在应用程序的所有组件之间注入。

    使用依赖注入还有以下好处,

    1. 不需要实例化,(new 实例)。不需要关心class的构造函数里需要什么参数
    2. 一次注入(app module通过Providers注入),所有组件都可以使用。而且是用同一个service实例(Singleton),也就是说一个service里的数据是共分享的,可以用于组件间数据传递。

    关于angular的编译,AOT和JIT的区别

    每个Angular应用程序都包含浏览器无法理解的组件和模板。 因此,在浏览器内部运行之前,需要先编译所有Angular应用程序。

    Angular提供两种编译类型:

    • JIT(Just-in-Time) compilation
    • AOT(Ahead-of-Time) compilation

    区别在于,在JIT编译中,应用程序在运行时在浏览器内部进行编译;而在AOT编译中,应用程序在构建期间进行编译。
    显而易见,AOT编译好处多多,因而是Angular的默认编译方式。主要优点

    • 由于应用程序是在浏览器内部运行之前进行编译的,因此浏览器会加载可执行代码并立即呈现应用程序,从而加快了呈现速度。
    • 在AOT编译中,编译器将与应用程序一起发送外部HTML和CSS文件,从而消除了对那些源文件的单独AJAX请求,从而减少了ajax请求。
    • 开发人员可以在构建阶段检测并处理错误,这有助于最大程度地减少错误。
    • AOT编译器将HTML和模板添加到JS文件中,然后再在浏览器中运行。 因此,没有多余的HTML文件可读取,从而为应用程序提供了更好的安全性。

    Angular双向绑定

    Angular双向绑定的原理

    Angular的双向绑定,通过脏数据检查(Dirty checking)来实现。

    1. 脏值检测的基本原理是存储旧数值,并在进行检测时,把当前时刻的新值和旧值比对。若相等则没有变化,反之则检测到变化,需要更新视图。
    2. angular2中有了Zone.js。对于setTimeout,addEventListener、promise等都在ngZone中执行(换句话说,就是被zone.js封装重写了),angular并在ngZone中setup了相应的钩子,通知angular2做相应的脏检查处理,然后更新DOM。

    Angular双向绑定效率问题

    对于页面中需要绑定DOM元素极其多的情况(成百上千),必然会遇到效率问题。(具体还取决于PC、浏览器性能)。另外,脏检查超过10次(经验值?),就认为程序有问题,不再进行检查。
    可以采用如下方式避免

    1. 对于只用于展示的数据,使用单向绑定,而不是双向绑定;
    2. Angular的数据流是自顶而下,从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测。因而组件化也是提高性能的一种手段。
    3. 表达式(以及表达式所调用的函数)中少写太过复杂的逻辑
    4. 不要连接太长的 pipe(往往 pipe里都会遍历并且生成新数组, pipe 在anglarJS(v1)中叫做filter)
    5. 变化检测策略onPush. Angular有两种变化检测策略。Default是Angular默认的变化检测策略,也就是上述提到的脏检查(只要有值发生变化,就全部检查)。开发者可以根据场景来设置更加高效的变化检测方式:onPush。onPush策略,就是只有当输入数据的引用发生变化或者有事件触发时,组件才进行变化检测。
    6. NgFor应该伴随trackBy方程使用。否则,每次脏值检测过程中,NgFor会把列表里每一项都执行更新DOM操作。

    Angular数据绑定的三种方式

    
    <div>
        <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
        <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
        <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
    </div>
    
    1. 直接绑定: 大多数情况下,这都是性能最好的方式。
    2. 绑定方法调用的结果:在每个脏值检测过程中,classes方程都要被调用一遍。如果没有特殊需求,应尽量避免这种使用方式。
    3. pipe方式: 它和绑定function类似,每次脏值检测classPipe都会被调用。不过Angular给pipe做了优化,加了缓存,如果item和上次相等,则直接返回结果。

    更多优化技巧,参考 angular绑定(脏检查)方面的性能优化技巧

    关于angular的Module

    什么是angular的Module

    模块(Module)是一个我们可以对组件(Component),服务(service)和管道(pipe)进行分组的地方。 模块通过导出或隐藏这些元素来决定其他模块是否可以使用组件,指令等。 每个模块都使用@NgModule装饰器定义。

    Root Module和Feature Module的区别。

    每个Angular应用程序只能有一个根模块(Root Module),而它可以有一个或多个功能模块(Feature Module)。根模块导入BrowserModule,而功能模块导入CommonModule。

    Module 延迟加载(Lazy-loading)

    当一个项目做得很大后,为了提高首屏加载速度,可以通过Lazy-loading,当访问到某些具体的url时,才加载那些不常用的feature module。

    实现:正常创建feature module,修改路由配置。 例如:

    const routes: Routes = [
      {
        path: 'customers',
        loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
      }
    ];
    

    这样,编译后,这个feature module就会是一个独立的js,只有当用户访问url(~/customers)时,才会向server端请求这个独立的js,然后加载、执行。

    参考https://angular.io/guide/lazy-loading-ngmodules

    什么是指令(Directive)

    指令(Directive)用于添加行为到已有元素(DOM)或者组件(Component)。
    同时,一个元素或组件,可以应用多个指令。

    Promise 和 Observable的区别

    首先新版本的anuglar是推荐使用Observable的(属于RxJS),其次,对于Observable对象,可以使用.toPromise()转化为Promise对象。

    1. Promise,无论是否调用then。promise都会立即执行;而observables只是被创建,当调用(subscribe)的时候才会被执行。
    2. Promise返回一个值;Observable返回0至N个值。所以Promise对应的操作符是.then(),Observable对应的是.subscribe
    3. Observable,还额外支持map,filter,reduce和相似的操作符
    4. Observable 可以取消,Promise不可以

    如果提高Angular的性能

    Angular也还是网页应用,所以一般的提高网页西能的技巧都是通用的。针对Angular,还有一些特殊的优化技巧:

    • AOT编译。之前提到过不要在客户端编译
    • 应用程序已经最小化(uglify和tree shaking)
    • 去掉不必要的import语句。如果有遗留,那么打包时也会打进来。
    • 确保应用中已经移除了不使用的第三方库。同上。
    • 项目较大时,考虑延迟载入(Lazy Loading), 保证首页的加载速度。

    Angular 版本如何升级

    Angular CLI提供了升级命令(ng update),同时,官网(https://update.angular.io/)也有升级指南。选择从哪个版本升级到哪个版本后,会给出一步一步的升级命令,直接执行就好。

    Angular v8+面试系列





    展开全文
  • Angular面试题

    2017-09-10 12:12:46
    1.angular的数据绑定采用什么机制?详述原理 脏检查机制。 双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这...

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

    脏检查机制。

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

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

    2 AngularJS的数据双向绑定是怎么实现的

    1、每个双向绑定的元素都有一个watcher

    2、在某些事件发生的时候,调用digest脏数据检测。

    这些事件有:表单元素内容变化、Ajax请求响应、点击按钮执行的函数等。

    3、脏数据检测会检测rootscope下所有被watcher的元素。

    $digest函数就是脏数据监测

     

    3.在使用angularjs项目开发中 你使用过那些第三方的插件

    AngularUi  ui-router oclazyload等等  附上一篇文章仔细去看看 https://segmentfault.com/a/1190000003858219

     

    4.ng-show/ng-hide 与 ng-if的区别?

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

     

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

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

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

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

    step2:angular回继续解析,找到{{}}表达式,并解析成变量。

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

     

    6 列出至少三种实现不同模块之间通信方式?

    Service

        events,指定绑定的事件

    使用 $rootScope

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

        directive 指定属性进行数据绑定

    7. 表达式 {{yourModel}} 是如何工作的?

     

    它依赖于 $interpolation服务,在初始化页面html后,它会找到这些表达式,并且进行标记,于是每遇见一个 {{}} ,则会设置一个 $watch 。而 $interpolation 会返回一个带有上下文参数的函数,最后该函数执行,则算是表达式 $parse 到那个作用域上。

     

    8.angular中的$http

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

    我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

     

    9.ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决?

    会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然,也可以 trace by 任何一个普通的值,只要能唯一性标识数组中的每一项即可(建立 dom 和数据之间的关联)

     

    10.angularjs 是mvc还是mvvm框架

     

    首先阐述下你对mvc和mvvm的理解

     

    首先为什么我们会需要MVC?因为随着代码规模越来越大,切分职责是大势所趋,还有为了后期维护方便,修改一块功能不影响其他功能。还有为了复用,因为很多逻辑是一样的。而MVC只是手段,终极目标是模块化和复用。

     

    mvvm的优点

     

    低耦合:View可以独立于Model变化和修改,同一个ViewModel可以被多个View复用;并且可以做到View和Model的变化互不影响;

     

    可重用性:可以把一些视图的逻辑放在ViewModel,让多个View复用;

     

    独立开发:开发人员可以专注与业务逻辑和数据的开发(ViewModemvvmdi计人员可以专注于UI(View)的设计;

     

    可测试性:清晰的View分层,使得针对表现层业务逻辑的测试更容易,更简单。

     

    angular中MVVM模式主要分为四部分:

     

    View:它专注于界面的显示和渲染,在angular中则是包含一堆声明式Directive的视图模板。

     

    ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在angular中$scope对象充当了这个ViewModel的角色;

     

    Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象;而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所,这类的业务服务是可以被多个Controller或者其他service复用的领域服务。

     

    Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的初始化,它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上,使得应用界面在启动加载的时候达到一种可用的状态。

     

     

    mvc的界面和逻辑关联紧密,数据直接从数据库读取。mvvm的界面与viewmode是松耦合,界面数据从viewmodel中获取。所以angularjs更倾向于mvvm

     

     

    11.angularjs中$scope,controller,directive,sevice在mvvm中充当什么角色

     

    如果你不知道,第一题的分析以及很明确,仔细再仔细的看一遍

     

    12.在使用angularjs项目开发中 你使用过那些第三方的插件

    AngularUi  ui-router oclazyload等等 

    https://segmentfault.com/a/1190000003858219

    13.在angular项目中你如何控制静态资源的合理加载

      

        懒加载

    第三题提到了oclazyload这个插件,很好的一个懒加载静态资源的第三方插件

     

    14.再写controlloer逻辑的时候 你需要注意什么?

    1.简化代码(这个是所有开发人员都要具备的)

    2.坚决不能操作dom节点 这个时候可能会问 为什么不能啊

    你的回答是DOM操作只能出现在指令(directive)中。最不应该出现的位置就是服务(service)中。Angular倡导以测试驱动开发,在service或者controller中出现了DOM操作,那么也就意味着的测试是无法通过的。当然,这只是一点,重要的是使用Angular的其中一个好处是啥,那就是双向数据绑定,这样就能专注于处理业务逻辑,无需关系一堆堆的DOM操作。如果在Angular的代码中还到处充斥着各种DOM操作,那为什么不直接使用jquery去开发呢。

     

    测试驱动开发是什么呢?普及一下:

    测试驱动开发,英文全称Test-Driven Development,简称TDD,是一种不同于传统软件开发流程的新型的开发方法。它要求在编写某个功能的代码之前先编写测试代码,然后只编写使测试通过的功能代码,通过测试来推动整个开发的进行。这有助于编写简洁可用和高质量的代码,并加速开发过程。

     

    15.AngularJS的数据双向绑定是怎么实现的?

    1、每个双向绑定的元素都有一个watcher

    2、在某些事件发生的时候,调用digest脏数据检测。

    这些事件有:表单元素内容变化、Ajax请求响应、点击按钮执行的函数等。

    3、脏数据检测会检测rootscope下所有被watcher的元素。

    $digest函数就是脏数据监测

    又附上一篇原理性的文章 https://github.com/xufei/Make-Your-Own-AngularJS/blob/master/01.md

     

    16.controller之间怎么通讯

    1、event

    这里可以有两种方式,一种是$scope.$emit,然后通过监听$rootScope的事件获取参数;另一种是$rootScope.$broadcast,通过监听$scope的事件获取参数。

    这两种方法在最新版本的Angular中已经没有性能区别了,主要就是事件发送的方向不同,可以按实际情况选择。

     

    2、service

    可以创建一个专用的事件Service,也可以按照业务逻辑切分,将数据存储在相应的Service中

    3、$rootScope

    这个方法可能会比较dirty一点,胜在方便,也就是把数据存在$rootScope中,这样各个子$scope都可以调用,不过需要注意一下生命周期

     

    4、直接使用$scope.$$nextSibling及类似的属性

    类似的还有$scope.$parent。这个方法的缺点就更多了,官方不推荐使用任何$$开头的属性,既增加了耦合,又需要处理异步的问题,而且scope的顺序也不是固定的。不推荐

     

    另外就是通过本地存储、全局变量或者现代浏览器的postMessage来传递参数了,除非特殊情况,请避免这类方式。

     

    17.自定义指令的几个参数

    说几个常用的如:

    restrict:指令在dom中的声明形式 E(元素)A(属性)C(类名)M(注释)

    template:两种形式,一种HTML文本;一个可以接受两个参数的函数,tElemetn和tAttrs,并返回一个代表模板的字符串。模板字符串必须存在一个根DOM元素

    templateUrl:两种形式,一种代表外部HTML文件路径的字符串;一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个外部HTML文件路径的字符串

    compile (对象或函数):compile 选项可以返回一个对象或函数。如果设置了 compile 函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。本质上,当我们设置了 link 选项,实际上是创建了一个 postLink() 链接函数,以便 compile() 函数可以定义链接函数。

    然后又是传送门:http://www.cnblogs.com/mliudong/p/4180680.html

     compile和link的区别:

    编译的时候,compile转换dom,碰到绑定监听器的地方就先存着,有几个存几个,到最后汇总成一个link函数,一并执行,提升了性能。

     

    18.angular中的$http

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

    我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

     

    1、链式调用

     

    $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的

    配置内容。这个函数返回一个promise对象,具有success和error两个方法。

    2、返回一个promise对象

     

    3、快捷的get请求

     

    4、响应对象

    传送门:http://www.2cto.com/kf/201506/405137.html

     

    19.angularjquery的区别

    angular是基于数据驱动,所以angular适合做数据操作比较繁琐的项目(这里可以再提一下单页面应用,如果你不会福利又来了 http://www.zhihu.com/question/20792064)

    jquery是基于dom驱动jquery适合做dom操作多的项目

     

    20.对angular中的form表单了解多少

    Angular对input元素的type进行了扩展,一共提供了以下10种类型:

    text

    number

    url

    email

    radio

    checkbox

    hidden

    button

    submit

    reset

    Angular为表单内置了4中CSS样式。

    ng-valid 校验合法状态

    ng-invalid 校验非法状态

    ng-pristine 如果要使用原生的form,需要设置这个值

    ng-dirty     表单处于脏数据状态

    Angular在对表单进行自动校验的时候会校验Model上的属性,如果不设置ng-model,则Angular无法知道myForm.$invalid这个值是否为真。

    校验的一下内容

    required 表示是否输入内容

    ng-maxlength 最大长度

    ng-minlength 最小长度

    例子:传送门https://github.com/18500047564/clutter

     

     

    21. ng-show/ng-hide 与 ng-if 的区别?

     

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

     

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

    $rootScrope是所有$scope的父对象


    23. 表达式 {{yourModel}} 是如何工作的?

    它依赖于 $interpolation服务,在初始化页面html后,它会找到这些表达式,并且进行标记,于是每遇见一个 {{}} ,则会设置一个 $watch 。而 $interpolation 会返回一个带有上下文参数的函数,最后该函数执行,则算是表达式 $parse 到那个作用域上。

     

    24.fliter是什么你了解的有多少?实现一个自定义fliter

    ng 内置的 filter 有九种:

     

    date(日期)

     

    currency(货币)

     

    limitTo(限制数组或字符串长度)

     

    orderBy(排序)

     

    lowercase(小写)

     

    uppercase(大写)

     

    number(格式化数字,加上千位分隔符,并接收参数限定小数点位数)

     

    filter(处理一个数组,过滤出含有某个子串的元素)

     

    json(格式化 json 对象)

     

    filter 有两种使用方法,

    一种是直接在页面里:

     

    <p>{{now | date : ‘yyyy-MM-dd’}}</p>

     

    另一种是在 js 里面用:

     

    $filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...)

     

    $filter('date')(now, 'yyyy-MM-dd hh:mm:ss’);

     

    自定义一个去重数组的

     

     

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

        return function(arr){

            var n = [];

            var obj = {};

     

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

               if(!obj[arr[i]]){

                n.push(arr[i])

                obj[arr[i]] = 1;

               }

            }

     

           return n;

        }

    })

    展开全文
  • angular常见面试题及答案

    千次阅读 2021-01-24 10:15:02
    1.angular 的数据绑定采用什么机制?详述原理 答案:脏检查机制。 解析: 双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,...

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

    答案:脏检查机制。

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

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

    参与互动

    2.AngularJS 的数据双向绑定是怎么实现的?

    答案:

    1、每个双向绑定的元素都有一个 watcher

    2、在某些事件发生的时候,调用 digest 脏数据检测。

    这些事件有:表单元素内容变化、Ajax 请求响应、点击按钮执行的函数等。

    3、脏数据检测会检测 rootscope 下所有被 watcher 的元素。

    $digest 函数就是脏数据监测

    参与互动

    3.在使用 angularjs 项目开发中 你使用过那些第三方的插件

    答案:AngularUi ui-router oclazyload 等等 附上一篇文章仔细去看看 https://segmentfault.com/a/1190000003858219

    参与互动

    4.ng-show/ng-hide 与 ng-if 的区别?

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

    参与互动

    5.解释下什么是 r o o t S c r o p e 以 及 和 rootScrope以及和 rootScropescope 的区别?

    答案:通俗的说 r o o t S c r o p e 页 面 所 有 rootScrope 页面所有 rootScropescope 的父亲。

    解析:

    我们来看下如何产生 r o o t S c o p e 和 rootScope和 rootScopescope 吧。

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

    step2:angular 回继续解析,找到{{}}表达式,并解析成变量。

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

    参与互动

    6.列出至少三种实现不同模块之间通信方式?

    答案:

    • Service
    • events,指定绑定的事件
    • 使用 $rootScope
    • controller 之间直接使用$parent, $$childHead 等
    • directive 指定属性进行数据绑定

    参与互动

    7. 表达式 {{yourModel}} 是如何工作的?

    答案:

    它依赖于 $interpolation服务,在初始化页面html后,它会找到这些表达式,并且进行标记,于是每遇见一个 {{}} ,则会设置一个 $watch 。而 $interpolation 会返回一个带有上下文参数的函数,最后该函数执行,则算是表达式 $parse 到那个作用域上。

    参与互动

    8.angular 中的$http

    答案:$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

    我们可以使用内置的 h t t p 服 务 直 接 同 外 部 进 行 通 信 。 http服务直接同外部进行通信。 httphttp 服务只是简单的封装了浏览器原生的 XMLHttpRequest 对象。

    参与互动

    9.ng-repeat 迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决?

    答案:会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然,也可以 trace by 任何一个普通的值,只要能唯一性标识数组中的每一项即可(建立 dom 和数据之间的关联)

    参与互动

    10.angularjs 是 mvc 还是 mvvm 框架

    答案:mvvm

    解析:

    首先阐述下你对 mvc 和 mvvm 的理解:

    首先为什么我们会需要 MVC?因为随着代码规模越来越大,切分职责是大势所趋,还有为了后期维护方便,修改一块功能不影响其他功能。还有为了复用,因为很多逻辑是一样的。而 MVC 只是手段,终极目标是模块化和复用。

    mvvm 的优点

    低耦合:View 可以独立于 Model 变化和修改,同一个 ViewModel 可以被多个 View 复用;并且可以做到 View 和 Model 的变化互不影响;

    可重用性:可以把一些视图的逻辑放在 ViewModel,让多个 View 复用;

    独立开发:开发人员可以专注与业务逻辑和数据的开发(ViewModemvvmdi 计人员可以专注于 UI(View)的设计;

    可测试性:清晰的 View 分层,使得针对表现层业务逻辑的测试更容易,更简单。

    在 angular 中 MVVM 模式主要分为四部分:

    View:它专注于界面的显示和渲染,在 angular 中则是包含一堆声明式 Directive 的视图模板。

    ViewModel:它是 View 和 Model 的粘合体,负责 View 和 Model 的交互和协作,它负责给 View 提供显示的数据,以及提供了 View 中 Command 事件操作 Model 的途径;在 angular 中$scope 对象充当了这个 ViewModel 的角色;

    Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model 并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在 web 页面中,大部分 Model 都是来自 Ajax 的服务端返回数据或者是全局的配置对象;而 angular 中的 service 则是封装和处理这些与 Model 相关的业务逻辑的场所,这类的业务服务是可以被多个 Controller 或者其他 service 复用的领域服务。

    Controller:这并不是 MVVM 模式的核心元素,但它负责 ViewModel 对象的初始化,它将组合一个或者多个 service 来获取业务领域 Model 放在 ViewModel 对象上,使得应用界面在启动加载的时候达到一种可用的状态。

    mvc 的界面和逻辑关联紧密,数据直接从数据库读取。mvvm 的界面与 viewmode 是松耦合,界面数据从 viewmodel 中获取。所以 angularjs 更倾向于 mvvm

    参与互动

    11.angularjs 中$scope,controller,directive,sevice 在 mvvm 中充当什么角色

    答案:如果你不知道,第一题的分析以及很明确,仔细再仔细的看一遍

    参与互动

    12.在 angular 项目中你如何控制静态资源的合理加载

    答案:

    参与互动

    13.在写 controlloer 逻辑的时候 你需要注意什么?

    答案:

    1.简化代码(这个是所有开发人员都要具备的)

    2.坚决不能操作 dom 节点 这个时候可能会问 为什么不能啊

    你的回答是:DOM 操作只能出现在指令(directive)中。最不应该出现的位置就是服务(service)中。Angular 倡导以测试驱动开发,在 service 或者 controller 中出现了 DOM 操作,那么也就意味着的测试是无法通过的。当然,这只是一点,重要的是使用 Angular 的其中一个好处是啥,那就是双向数据绑定,这样就能专注于处理业务逻辑,无需关系一堆堆的 DOM 操作。如果在 Angular 的代码中还到处充斥着各种 DOM 操作,那为什么不直接使用 jquery 去开发呢。

    测试驱动开发是什么呢?普及一下:

    测试驱动开发,英文全称 Test-Driven Development,简称 TDD,是一种不同于传统软件开发流程的新型的开发方法。它要求在编写某个功能的代码之前先编写测试代码,然后只编写使测试通过的功能代码,通过测试来推动整个开发的进行。这有助于编写简洁可用和高质量的代码,并加速开发过程。

    参与互动

    14.controller 之间怎么通讯

    答案:

    1、event

    这里可以有两种方式,一种是 s c o p e . scope. scope.emit,然后通过监听 r o o t S c o p e 的 事 件 获 取 参 数 ; 另 一 种 是 rootScope的事件获取参数;另一种是 rootScoperootScope. b r o a d c a s t , 通 过 监 听 broadcast,通过监听 broadcastscope 的事件获取参数。

    这两种方法在最新版本的 Angular 中已经没有性能区别了,主要就是事件发送的方向不同,可以按实际情况选择。

    2、service

    可以创建一个专用的事件 Service,也可以按照业务逻辑切分,将数据存储在相应的 Service 中

    3、$rootScope

    这个方法可能会比较 dirty 一点,胜在方便,也就是把数据存在 r o o t S c o p e 中 , 这 样 各 个 子 rootScope中,这样各个子 rootScopescope 都可以调用,不过需要注意一下生命周期

    4、直接使用 s c o p e . scope. scope.$nextSibling 及类似的属性

    类似的还有 s c o p e . scope. scope.parent。这个方法的缺点就更多了,官方不推荐使用任何$$开头的属性,既增加了耦合,又需要处理异步的问题,而且 scope 的顺序也不是固定的。不推荐

    另外就是通过本地存储、全局变量或者现代浏览器的 postMessage 来传递参数了,除非特殊情况,请避免这类方式。

    参与互动

    15.自定义指令的几个参数

    答案:

    说几个常用的如:

    restrict:指令在 dom 中的声明形式 E(元素)A(属性)C(类名)M(注释)

    template:两种形式,一种 HTML 文本;一个可以接受两个参数的函数,tElemetn 和 tAttrs,并返回一个代表模板的字符串。模板字符串必须存在一个根 DOM 元素

    templateUrl:两种形式,一种代表外部 HTML 文件路径的字符串;一个可以接受两个参数的函数,参数为 tElement 和 tAttrs,并返回一个外部 HTML 文件路径的字符串

    compile (对象或函数):compile 选项可以返回一个对象或函数。如果设置了 compile 函数,说明我们希望在指令和实时数据被放到 DOM 中之前进行 DOM 操作,在这个函数中进行诸如添加和删除节点等 DOM 操作是安全的。本质上,当我们设置了 link 选项,实际上是创建了一个 postLink() 链接函数,以便 compile() 函数可以定义链接函数。

    然后又是传送门:http://www.cnblogs.com/mliudong/p/4180680.html

    compile 和 link 的区别:

    编译的时候,compile 转换 dom,碰到绑定监听器的地方就先存着,有几个存几个,到最后汇总成一个 link 函数,一并执行,提升了性能。

    参与互动

    16.angular 和 jquery 的区别

    答案:

    angular 是基于数据驱动,所以 angular 适合做数据操作比较繁琐的项目(这里可以再提一下单页面应用,如果你不会福利又来了 http://www.zhihu.com/question/20792064)

    jquery 是基于 dom 驱动,jquery 适合做 dom 操作多的项目

    参与互动

    17.对 angular 中的 form 表单了解多少

    答案:

    Angular 对 input 元素的 type 进行了扩展,一共提供了以下 10 种类型:

    text

    number

    url

    email

    radio

    checkbox

    hidden

    button

    submit

    reset

    Angular 为表单内置了 4 中 CSS 样式。

    ng-valid 校验合法状态

    ng-invalid 校验非法状态

    ng-pristine 如果要使用原生的 form,需要设置这个值

    ng-dirty 表单处于脏数据状态

    Angular 在对表单进行自动校验的时候会校验 Model 上的属性,如果不设置 ng-model,则 Angular 无法知道 myForm.$invalid 这个值是否为真。

    校验的一下内容

    required 表示是否输入内容

    ng-maxlength 最大长度

    ng-minlength 最小长度

    例子:传送门https://github.com/18500047564/clutter

    参与互动

    18.fliter 是什么你了解的有多少?实现一个自定义 fliter

    答案:

    date(日期)

    currency(货币)

    limitTo(限制数组或字符串长度)

    orderBy(排序)

    lowercase(小写)

    uppercase(大写)

    number(格式化数字,加上千位分隔符,并接收参数限定小数点位数)

    filter(处理一个数组,过滤出含有某个子串的元素)

    json(格式化 json 对象)

    filter 有两种使用方法,

    一种是直接在页面里:

    <p>{{now | date : ‘yyyy-MM-dd’}}</p>
    

    另一种是在 js 里面用:

    $filter(‘过滤器名称’)(需要过滤的对象, 参数 1, 参数 2,…)

    $filter(‘date’)(now, 'yyyy-MM-dd hh:mm:ss’);

    自定义一个去重数组的

    app.filter("unique", function() {
      return function(arr) {
        var n = [];
        var obj = {};
    
        for (var i = 0; i < arr.length; i++) {
          if (!obj[arr[i]]) {
            n.push(arr[i]);
            obj[arr[i]] = 1;
          }
        }
    
        return n;
      };
    });
    

    参与互动

    展开全文
  • 经典Angular面试题有哪些?AngularJS是一个JavaScript框架,是一个以JavaScript编写的库。它可通过1、解释Angular 2应用程序的生命周期hooks是什么? Angular 2组件/指令具有生命周期事件,是由@angular/core管理的。...
  • angular 面试题总结

    万次阅读 2018-04-08 22:08:41
    angular中的service则是封装和处理这些与Model相关的业务逻辑的场所,这类的业务服务是可以被多个Controller或者其他service复用的领域服务。 Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的...
  • eact 和angular,vue 这三个框架最近都比较火,下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
  • Angular 面试题汇总1-基本知识. 目录关于Angular Componentcss样式的作用域、Shadow DOM关于Angular Service单例服务(singleton)forRoot() 模式 关于Angular Component css样式的作用域、Shadow DOM Shadow DOM...
  • 准备Angular面试的完整指南。 此外,您可以使用这些问题来验证您的Angular专业知识。
  • Angular 面试题汇总3-单元测试

    千次阅读 2020-11-20 16:35:29
    Angular 面试题汇总1-基本知识 Angular 面试题汇总2-Component/Service 目录Angular中的测试有哪些种,基于哪些测试框架什么是Karma? 在Angular中有什么作用?什么是Jasmine? 在Angular中有什么用?什么是...
  • Angular2+ 面试题集锦

    千次阅读 2019-10-28 10:43:54
    1. 生命周期钩子 生命周期的顺序,见下图: ngOnChanges:当组件数据绑定的输入属性发生变化是触发,该... ngOninit:初始化指令或组件,在angular第一次显示展示组件的绑定属性后调用,该方法只会调用一次 ng...
  • angular面试题及答案by Shlomi Levi 通过Shlomi Levi 关于最流行的Angular问题的StackOverflow上的48个答案 (48 answers on StackOverflow to the most popular Angular questions) I gathered the most common ...
  • 一、ng-show/ng-hide 与 ng-if的区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom...step2:angular回继续
  • Angular高频面试题_20题.pdf_前端面试题
  • Angular面试题

    2017-02-10 23:30:00
    二十、angular 的缺点有哪些? 1.强约束 导致学习成本较高,对前端不友好。 但遵守 AngularJS 的约定时,生产力会很高,对 Java 程序员友好。 2.不利于 SEO 因为所有内容都是动态获取并渲染生成的,搜索引擎...
  • angular面试题集锦

    2019-09-24 07:20:24
    Angular1.x 中常用 ngRoute 和 ui.router,还有一种为 Angular2 设计的 new router (面向组件)。后面那个没在实际项目中用过,就不讲了。 无论是 ngRoute 还是 ui.router,作为框架额外的附加功能,都必须以 ...
  • 2022年最新前端面试题

    万次阅读 多人点赞 2022-01-08 10:12:44
    前端面试总结----持续更新
  • Angular面试题

    2017-01-22 22:57:00
    其实当我们学习Angular的时候,我们应该做到从0去接受angular的思想,数据绑定,使用angular自带的一些api,合理的路由组织和,写相关指令和服务等等。angular自带了很多api可以完全替代掉jquery中常用的api,我们...
  • Angular面试题

    2017-01-26 23:24:00
    当浏览器接收到可以被 angular context 处理的事件时, $digest 循环就会触发,遍历所有的 $watch ,最后更新 dom。 举个栗子 <button ng-click="val=val+1">increase 1 click 时会产生一次更新的操作(至少...
  • Angular面试题

    2017-02-01 23:28:00
    十六、一个 angular 应用应当如何良好地分层? 目录结构的划分 1、对于小型项目,可以按照文件类型组织,比如: css Js { controllers models services filters } templates 2、但是对于规模较大的项目...
  • 什么是Spring Boot ? Spring Boot 自动配置的原理是什么? Spring Boot 核心注解有哪些?由哪些注解组成? 什么是Java Config? 什么是Yaml? Yaml有什么优势? MySQL查询过慢,应该怎么优化?....
  • 前端面试题angular

    千次阅读 2019-05-16 10:56:44
    Angular 1,ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是,ng-if 在后面表达式为 true 的时候才创建这个 dom 节点,ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示。 第二...
  • 2022前端高频面试题总结(附答案)

    千次阅读 2022-05-11 09:00:42
    分享一个前端面试题库小程序 MST宝库 [ js基础 ] 1. new的实现原理是什么? 创建一个空对象,构造函数中的this指向这个空对象 这个新对象被执行 [[原型]] 连接 执行构造函数方法,属性和方法被添加到this...
  • 2022年最新前端面试题,持续更新

    万次阅读 多人点赞 2022-06-08 11:41:13
    2022年最新前端面试题 适合初/中级前端开发工程师
  • 不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学习Angular 2的知识概念的绝佳途径。 在文中,我们将会接触到很多Angular 2的重要概念,并附...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,909
精华内容 1,963
关键字:

angular面试题