Angular.js

angularjs:https://segmentfault.com/a/1190000005836443

类型一:angular.js 几大特性总结:

1.MVC

2.数据双向绑定

3.依赖注入

4.指令

MVC

MVC 大家应该都比较熟悉了,M即模型model,V即视图view,C即控制器controller。这背后的核心理念是:

把管理数据的代码(model),应用逻辑代码(controller),以及向用户展示数据的代码(view)清晰的分离开。

在 Angular 应用中,视图就是 Document Object Model (DOM,文档对象模型),控制器就是 javascript 类,而模型数据则被存储在对象的属性中。

数据双向绑定

Angular实现了双向绑定机制。所谓的双向绑定,是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。

依赖注入

依赖注入是一种软件设计模式,用来处理代码的依赖关系。

简单说说依赖注入

一般来说有三种方法让函数获得它的需要的依赖:

它的依赖是能被创建的,一般用new操作符就行

能够通过全局变量查找依赖

依赖能在需要时被导入

前两种方式都不是很好,因为它们需要对依赖硬编码,使得修改依赖的时候变得困难。特别是在测试的时候不好办,因为对某个部分进行孤立的测试常常需要模拟它的依赖。

第三种方式是最好的,因为它不必在组件中去主动需找和获取依赖,而是由外界将依赖传入。

functionhelloCtrl($scope){varvm = $scope;}

如上例所示,只需要把 $scope 对象放在 helloCtrl 的构造函数里面,然后就可以后去它。

其他的 angular 的 service 如:$location,$http,$local 等也是可以通过放在构造函数里获得。同时,你自定义的 service、factory,也可以通过依赖注入获得。

指令

指令是所有AngularJS 应用最重要的部分。指令是DOM元素上的标记,使元素拥有特定的行为。Angularjs 内置了一些指令,比如 ng-mode, ng-repeat, ng-show等。这些指令都赋予DOM元素特定的行为。例如,ng-repeat 重复特定的元素,ng-show 有条件地显示一个元素。

你可以通过自定义一个指令,来实现自己想要达到的效果。例如你想让一个元素支持拖拽,你可以创建一个指令来实现它;你也可以创建一个指令显示时间选择器。

指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。这个功能让我们可以创建更多有价值的插件进行开源共享,也可以解决项目中代码冗余的情况。

类型二:angular 的数据绑定采用什么机制?详述原理

脏检查机制。

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

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

类型三:两个平级界面块 a 和 b,如果 a 中触发一个事件,有哪些方式能让 b 知道?详述原理

这个问题换一种说法就是,如何在平级界面模块间进行通信。有两种方法,一种是共用服务,一种是基于事件。

共用服务

在 Angular 中,通过 factory 可以生成一个单例对象,在需要通信的模块 a 和 b 中注入这个对象即可。

基于事件

这个又分两种方式

第一种是借助父 controller。在子 controller 中向父 controller 触发( $emit )一个事件,然后在父 controller 中监听( $on )事件,再广播( $broadcast )给子 controller ,这样通过事件携带的参数,实现了数据经过父 controller,在同级 controller 之间传播。

第二种是借助 $rootScope 。每个 Angular 应用默认有一个根作用域 $rootScope , 根作用域位于最顶层,从它往下挂着各级作用域。所以,如果子控制器直接使用 $rootScope 广播和接收事件,那么就可实现同级之间的通信。

详见 AngularJS 中 Controller 之间的通信

类型四: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 指令将子路由模版插入到父路由模板的

中去,从而实现视图嵌套。而在 ngRoute 中不能这样定义,如果同时在父子视图中 使用了
会陷入死循环。


Angular.js_第1张图片

你可能感兴趣的:(Angular.js)