Angular

# 一、说说你对MVC和MVVM的理解

mvc:

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

Angular它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

组成部分Model、View、ViewModel

View：UI界面

ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；

Model：数据访问层

# 二、对 bootstrap 的掌握？为什么用 angular+bootstrap 搭建后台管理系统

bootstrap是—个快速开发的响应式框架，主要是为了快速搭建ui界面，bootstrap 的web组件和js插件对pc端开发比较友好，尤其是栅格化系统可以良好兼容浏览器，低版本浏览器可以使用bootstrap—responsive的插件兼容，js插件有各种回调机制，可以满足自己的多样开发需求，而且bootstrap使用css属性来操作样式，免去了手写原生代码的痛苦，使用angular进行数据绑定，bootstrap来搭建界面，提升开发效率

个人心得：

我在实际开发中使用ace admin这套基于boostrap的框架，可以更快速的开发，数据项通过json结构进行配置，几乎不用手写代码，提升开发效率

# 三、 angular中ng—if和ng-show/hide 有什么区别？

1．ng—if 在后面表达式为 true 的时候才创建这个 dom 节点，ng—show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。

2．ng—if 会（隐式地）产生新作用域，ng—switch .ng—include 等会动态创建—块界面的也是如此。

个人心得：

ng—if添加删除节点，那么肯定回创建作用域，而ng—show/hide则不会

# 四、 Angular中ng—click中写的表达式，可以用js原生上的方法吗？为什么？

ng—click和原生事件完成的功能是—样的，但是ng—click做了优化，而且ng—click里面可以写表达式，运算过程，click则要单独处理，手写功能。

个人心得：

如果不在作用域里添加函数，可以配合ng—init初始化属性值，在ng—click里添加算法或者某—功能，虽然ng—inK不推荐使用，但是侧面说明ng—click的优势

# 五、内置filter都有哪些？

ng 内置的 filter 有九种：

date（日期）

currency（货币）

limitTo（限制数组或字符串长度）

orderBy（排序）

lowercase（小写）

uppercase（大写）

number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）

json（格式化 json 对象）

filter（处理—个数组，过滤出含有某个子串的元素）

filter有两种使用方法，—种是直接在页面里：

<p>{{now | date : 'yyyy—MM—dd'}}</p>

另—种是在 js 里面用：

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

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

1
2
3

# 六、如何自定义filter?

在模块下挂在—个filter()方法，第—个参数传入过滤器的名字，第二个参数是回调函数，处理过滤方法的详细内容，最后返回结果，这样外部就可以根据过滤器的名字调用了

例如

myAppModule.filter("reverse",function () {
        return function (input, uppercase) {
            var out = "";
            for (var i = 0; i < input.length; i++) {
                out = input.charAt(i) + out;
            }
            if (uppercase) {
                out = out.toUpperCase();
            }
            return out;
        }
    });

1
2
3
4
5
6
7
8
9
10
11
12

使用：name丨reverse通过管道符调用

# 七、 factory、service 和 provider 是什么关系？

factory, service, provider都是angular提供的服务

factory就是原生js里的方法，—个简单的函数

service类似原生里构造函数的过程，拥有—个构造器constructor，也就是说有 new的过程，追加属性和方法都是在this上追加的

provider是服务商当service需要配置的时候，需要使用provider提供服务，例如当使用angular进行跨域访问，需要配置jsonp信息的时候，就可以使用provider进行config的配置，简单理解是service的高级版本，provider提供—个$get的属性来返回 $provider的实例

他们都是单例模式，只实例化—次

个人理解：

provider> service> factory

factory用来配置简单的服务

service是在factory的基础之上加入了面向对象的思想，提供更多功能的服务

provider是在service的基础上进—步改进配置信息

factory与service在底层代码上都来源于provider

例子介绍：

我可以在factory里写—个$http( )请求，不做任何配置，参数写死

我可以在service里写—个$http( )请求，传入请求的参数可以先配置在this的属性上传入方法

我可以在provider里写—个请求，然后在config上传入要配置的参数，URL， method，data等信息，通过config来修改provider的参数，再将服务商提供的服务注入控制器controller

注意事项：

config里传入的参数是nameProvider而不是name，也就是说你的叫做 myProvider, config里传入的参数就是myProviderProvider而不是myProvider

# 八、 angular的数据绑定采用什么机制？详述原理

通过$watch来监听每—次dom的变化，然后$digest来遍历循环所有的$watch 队列，发现与原来不同的值，也就是脏值则进行修改，最后通知$apply, $apply会进入angularcontext的执行环境，通知浏览器拿回控制权，修改相应的dom节点

个人心得：

每—个ng指令的触发都在内部触发了—个$Watch的队列，加入—组标签

<ling—repeat="iteminitems">

{{ item }}

</li>

1
2
3
4
5

循环了 10次，那么就触发了10个item与1个ng—repeat的11个$watch的队列，

$digest会遍历循环这些队列，比较值的变化，有变化的即为脏值过程叫做dirty—checking，$digest修改完对应的值就会通知$apply()准备进入angularcontext的执行阶段修改dom，没有变化则不修改。也就是说我们在页面每次触发的操作，每次输入—个文字都会触发$watch，可见于react相比angular的劣势出现了

# 九、两个平级界面块a和b，如果a中触发—个事件，有哪些方式能让b知道？详述原理

1．通过a的子controller将事件使用$emit传递给父controller再将事件用 $broadcast传递给bcontroller实现数据传递

2．也可以通过service服务，将数据保存在service之内，然后在b中调用service

个人心得：

像这种数据传递的方式其实有很多种，本质是不同作用于之间的数据传递，只要掌握住这—点思想有很多方式解决，比如我可以尝试挂在$rootScope之上进行共享，也可以用本地存储来存储数据，实现数据共享。方法不重要，关键是如何解决的思路。

# 十、 —个angular应用应当如何良好地分层？

目录结构的划分

对于小型项目，可以按照文件类型组织，比如：

css

controllers

models

services

filters

templates

但是对于规模较大的项目，最好按业务模块划分，比如：

css

modules

account

controllers

models

services

filters

templates

disk

controllers

models

services

filters

templates

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

# 十一、 angular应用常用哪些路甶库，各自的区别是什么？

ng—router，ui—touter，ui—router可以嵌套子视图

# 十二、如果通过angular的directive规划—套全组件化体系，可能遇到哪些挑战？

隔离作用域，ng—指令的作用域传递

# 十三、分属不同团队进行开发的angular应用，如果要做整合，可能会遇到哪些问题，如何解决？

可能会遇到不同模块之间的冲突。比如—个团队所有的开发在moduleA下进行，另—团队开发的代码在moduleB下

    angular.module('myApp.moduleA', []).factory('serviceA', function () {
        .......
    }) angular.module('myApp.moduleB', []).factory('serviceA', function () {
        ......
    }) angular.module('myApp', ['myApp.moduleA',
        'myApp.moduleB'
    ])

1
2
3
4
5
6
7

会导致两个module下面的serviceA发生了覆盖。

个人心得：没有太好的解决方案，只能约定命名规范

# 十四、 angular的缺点有哪些？

不适合做交互过多的项目，因为没有选择器的存在，

导致学习成本较高，对前端不友好。但遵守AngularJS的约定时，生产力会很高，对Java程序员友好

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

# 十五、如何看待angularl.2中引入的controller as语法？

为angular添加this作用域链，使得angular更加像原声写法

# 十六、详述angular的“依赖注入”。

依赖注入是—个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻—个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。

AngularJS提供了—个至高无上的依赖注入机制。它提供了—个可注入彼此依赖 constantvaluefactoryserviceprovide核心组件。

# 十七、当你简单的动态给页面插入html时，此时html带有 angular的语法不会执行的，为什么？

通过$compile进行处理，任何指令的生效都需要compile，这—步在app启动的时候angular先帮你做了，但你插入的html是没有经过compile这个步骤的，所以你手动 compile下即可。

# 十八、使用ng—repeat出错：Error: [ngRepeat:dupes]，怎么回事？

Error: [ngRepeat:dupes]这个出错提示具体意思是指数组中有2个以上的相同数字。 ngRepeat不允许collection中存在两个相同Id的对象

对于数字对象来说，它的id就是它自身的值，因此，数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。

例如：在ng—repeat="itmeinitems"中加入rackbyitem.id或者trackbyfnCustomld(item)。嫌麻烦的话，直接拿循环的索引变量$index来用iteminitemstrackby $index——>ng—repeat="itmeinitemstrackby $index"

—句话总结：因为angular不允许数组中出现重复的值，所以会报错dupes错误，意思是重复的参数错误

# 十九、 Ng—repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

见上题

# 二十、使用第三方插件或者原生的js修改angular中的 model或者view的值时，相应的model或者view的值不会变化，也就是angular的双向数据绑定失效，怎么回事？

angular有自己的—个上下文，所有与angular有关的代码执行（如双向数据绑定）都在这个上下文中进行，因此如果你用第三方插件或者原生的js进行操作时，此时代码是在javascript的上下文中执行，angular无法知道你是否修改model或者view的值，自然也就无法进行双向数据绑定。

解决方案是在操作之后执行$scope.$apply( )或者将操作的代码放在$scope.$apply(function( ){//操作的代码...})

# 二十一、 angular中注入方式有推断式注入、$inject注入、内联式注入，当然这三种方式在angular中是等效的，但推断式注入对于压缩的JavaScript代码来说是不起作用的，为什么？

因为压缩过后的 JavaScript 代码重命名了函数的参数名。在压缩js代码的时候尽量不要用推断式注入，最佳是用内联式注入的方式。

# 二十二、如何看待 angular2?

相比Angularl.x，Angular2的改动很大，几乎算是—个全新的框架。

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

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

还有module支持动态加载，newrouter，promise的原生支持等等。

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

详细参考：

http://www.tuicool.com/articles/ymmq2mf

http://www.cnblogs.eom/laixiangran/p/4938732.html

在GitHub上编辑

上次更新: 4/27/2021, 11:18:01 AM

← React 框架底层→

Angular

# 一、 说说你对MVC和MVVM的理解

# 二、 对 bootstrap 的掌握？为什么用 angular+bootstrap 搭建后台管理系统

# 三、 angular中ng—if和ng-show/hide 有什么区别？

# 四、 Angular中ng—click中写的表达式，可以用js原生上 的方法吗？为什么？

# 五、 内置filter都有哪些？

# 六、 如何自定义filter?

# 七、 factory、service 和 provider 是什么关系？

# 八、 angular的数据绑定采用什么机制？详述原理

# 九、 两个平级界面块a和b，如果a中触发—个事件，有哪些方式能让b知道？详述原理

# 十、 —个angular应用应当如何良好地分层？

# 十一、 angular应用常用哪些路甶库，各自的区别是什 么？

# 十二、 如果通过angular的directive规划—套全组件化体 系，可能遇到哪些挑战？

# 十三、 分属不同团队进行开发的angular应用，如果要做整合，可能会遇到哪些问题，如何解决？

# 十四、 angular的缺点有哪些？

# 十五、 如何看待angularl.2中引入的controller as语 法？

# 十六、 详述angular的“依赖注入”。

# 十七、 当你简单的动态给页面插入html时，此时html带有 angular的语法不会执行的，为什么？

# 十八、 使用ng—repeat出错：Error: [ngRepeat:dupes]，怎么回事？

# 十九、 Ng—repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

# 二十、 使用第三方插件或者原生的js修改angular中的 model或者view的值时，相应的model或者view的值 不会变化，也就是angular的双向数据绑定失效，怎么回事？

# 二十一、 angular中注入方式有推断式注入、$inject注入、内联式注入，当然这三种方式在angular中是等效的，但推断式注入对于压缩的JavaScript代码来说是不起作用的，为什么？

# 二十二、 如何看待 angular2?

# 一、说说你对MVC和MVVM的理解

# 二、对 bootstrap 的掌握？为什么用 angular+bootstrap 搭建后台管理系统

# 四、 Angular中ng—click中写的表达式，可以用js原生上的方法吗？为什么？

# 五、内置filter都有哪些？

# 六、如何自定义filter?

# 九、两个平级界面块a和b，如果a中触发—个事件，有哪些方式能让b知道？详述原理

# 十一、 angular应用常用哪些路甶库，各自的区别是什么？

# 十二、如果通过angular的directive规划—套全组件化体系，可能遇到哪些挑战？

# 十三、分属不同团队进行开发的angular应用，如果要做整合，可能会遇到哪些问题，如何解决？

# 十五、如何看待angularl.2中引入的controller as语法？

# 十六、详述angular的“依赖注入”。

# 十七、当你简单的动态给页面插入html时，此时html带有 angular的语法不会执行的，为什么？

# 十八、使用ng—repeat出错：Error: [ngRepeat:dupes]，怎么回事？

# 二十、使用第三方插件或者原生的js修改angular中的 model或者view的值时，相应的model或者view的值不会变化，也就是angular的双向数据绑定失效，怎么回事？

# 二十二、如何看待 angular2?