Angular总结

angular关键核心点进行总结

1 2	angular中有很多知识点需要学习,学习成本是很大的,我通过平常开发中把一些 很重要知识点总结下来,不管是以后拿来用,或者跳槽面试需要,我都感觉是很有帮助的!

angular的缺点

1 2 3 4 5 6

本身它是比较笨重的,源码就有3w多行,并且替我封装了很多的方法,所以它的性能是比较差的. 所以我们在用的时候,就要尽最多程度保证性能了. 第一个:不要过多在$Scope.$watch方法,因为这个方法会一直执行,如果我们不去手动关闭, 这个方法会一直监听绑定的属性,所以是非常耗性能的. 减少不必要的数据展示,因为进行视图的展示,会触发脏值检测,如果一些不必要的数据展示到视图 中,就会耗性能了

ng-if ,ng-show ,ng-hide 区别

1 2 3 4 5 6 7

这三者虽然很类似,但是还是不同 首先是共同点:它们三者都可以起到隐藏显示元素的作用 不同点:ng-if的隐藏是把dom元素直接删除,而show和hide只是类似使用display:none的方法 第二个不同点使用场景不一样,ng-if一般用在单次显示隐藏的时候,比如页面一上来就出现的广告 信息,关闭之后就不会在显示,而show hide一般是配套使用用来控制一些元素显示隐藏, 多次使用,比如头部的返回和底部的tabbar,它们是相反的,通过show和hide方法就能用 一个变量控制它们的显示和隐藏

ng-repeat迭代数据出现数据相同处理

1 2 3

平常使用ng-repeat时候,遍历数据可能会出现数据相同情况,这时候就会报错,如何解决这个 问题呢?其实很简单,只需要在后面加上 track-by='索引' 里面传入一个不同的值,就能解决 数据一样的情况了

ng-事件绑定,能否使用原生js对象方法

1 2 3 4 5

我们在事件绑定时候,是不允许使用原生js对象的方法的,因为angualr不允许我们这样做,如何 使用这些方法,angular为我们封装了属于自己的对象,在原生对象的前面加一个$,例如$window, $timeout.$interval 都是angular为我们封装,我们需要使用的使用,在依赖注入服务的时候 把这些服务也一同注入进来,就能使用这样对象,它们的实现的功能和原生js对象是一样的,只不过用法 稍微不同而尔!

factory、service 和 provider 区别

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

在平常的开发中,需要用到很多自定义服务,而它们三者之间的共同点就是用来自定义服务的,它们的本质都是创建对象返回一个方法. 而它们之间的不同就在于定义的方式不一样 factory自定义服务:我们需要在内部返回一个一个对象,先通过function getData() 定义函数 然后通过返回一个对象 return {getDate:getData}的方式,我们需要使用的时候通过服务名称 .对象的key 例如上面的例子,服务名称.getDate()就能调用服务的方法了 service服务:我们通过this来创建函数,例如,this.getData=function() 然后通过服务名称. getData() 就能调用服务里面的方法了 provider服务:我们需要通过this调用 $get方法 this.$get({return｛｝})　方法里面返回一个 对象，然后对象接收一个方法，我们通过服务名称.对象名称就能调用服务的方法了 内置服务都会提供一个provider来进行配置,通过配置文件config方法,然后注入对应服务的名称 例如 app.config(['$logProvider',function ($logProvider) { $logProvider.debugEnabled(false); }])

angular当中数据绑定的机制和原理 $digest $apply

1 2 3 4 5

angular中是通过脏值检测的方式来进行数据展示到视图的 每次在视图中绑定数据的时候,都会把这个数据添加到一个$watchlist数组当中,里面的属性会被 $watch监听,只要有事件的方式,就会触发$degist事件,它第一次会遍历$watchlist数组, 询问每一个属性是否有更改,然后回再次遍历一次$scope上面的属性,是否有更新,如果有,会再次遍历 数组,如果没有就会触发$apply方法,把数据展示到视图中

定时器的取消和$watch的停止

1 2 3 4 5 6

当我们项目需要用到定时器时候,我们肯定需要关闭定时,原生js通过clearInterval来关闭 而angular中通过 $interval.cancel(timer)来关闭 先用一个变量接收var timer=$interval(); $watch方法调用的时候会返回一个函数,如果我们想要停止某个监听,在定义时候接收一下 var stopWatch = $scope.$watch('监听的值',回调) ,再次调用该方法即可关闭监听 stopWatch();

angualr中指令以及里面的常用方法

大专栏  Angular总结line">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

自定义指令是可以以哪种方式进行展示的, 通过 restrict 来定义 里面具体的值 为 E==>元素 <nav></nav> A==>属性 <div nav></div> C==>类 <div class='nav'></div> M==>注释 不建议使用 template:模板,可以直接写html结构 并且里面的标签必须有一个父级包着,要不会报错. templateUrl:模板地址 写一个路径 replace:true 设置为true会替换原来的标签 transculde:true 该方法之适用外链模板 会保留标签里面的元素 在需要保留的元素添加 <div transculde></div> link:里面接收三个参数,分别是scope,ele,attr, 它们分别是scope服务,ele为模板的元素,它会默认转换成jQ对象,attr为元素身上的属性 scope修饰符: 里面有三个选项 该方法作用用于外界传值使用 第一种：自定义名称:'@' 通过<xmg content="{{content}}""></xmg> 的插值语法获取值,该修饰符特点:外界数据修改,内部数据会一起修改,内部修改外部不修改, 并且如果指令本身具有该属性,外界同名的属性会覆盖 第二种:自定义名称:'=' <xmg content="content"></xmg> 通过这中语法获取值 该修饰符特点:外界数据和内部数据会互相更改,并且内部同名的属性会被外部同名的属性覆盖 第三种 自定义名称:'&' <xmg content="content()"></xmg> 外界传入的是一个函数

angular常用的路由和它们之间的区别

1 2 3 4 5 6 7

angular当中常用路由是原生ngRoute 和 ui.router 并且ui.router是依赖angualr的 它们的共同点都是用来进行设置单页面(spa) 不同的是,原生angular的路由只支持单视图展示,也就是说视图与视图不能嵌套,用法上受到很大的 限制. 而ui.router方法弥补了原生路由的不足,它不仅可以设置多视图的展示,还可以设置子路由的概念, 就是同一个页面存在多个路由

angular依赖注入的原理

1 2 3 4 5 6

我们知道依赖注入是angualr的核心之一,我们通过注入服务的方式,达到不同功能之间的相互联系, angualr当中有2种注入方式,一种是行内是注入,即我们帮注入的名称放到[]中 例如 app.controller('控制器名称',[$scope,funtion($scope){}]) 另外一种是推断式注入 app.controller('控制器名称',funtion($scope){}]) 不写[],直接跟 一个函数,它的缺点是很明显的,我们的项目都是需要经过压缩的,压缩会把一些形参转换成一些简单 的字母,这时候anular就不能通过形参的值来判断需要哪一个服务,就会报错,所以这种方式不建议使用..

$rootScope 和$scope 区别

1 2 3

它们的共同点都是作业域.只不过$rootScope是作为根作用域,$scope的作用域和原生js的作用域链 类似,都是由底层往上找,上面不能往下找,所以在$rootScope中定义的数据,在任何地方都能被使用, 它就是一个数的根节点, $scope就像它的分支,一层层的往下分,形成一个树状分支.

数据绑定出现闪烁处理

1 2 3

当我们使用插值语法进行数据绑定的时候,会出现闪烁. 解决办法第一种是ng-bind的方法或者ng-bind-template 方法 第二个是绑定一个类ng-cloak 添加 display:none的方法

angular mvc和mvvm

1 2 3

简单的来说,angular是属于mvc和mvvm mvc指视 视图模型控制器 mvvm值 数据的双向绑定

控制器之间的通讯

1 2 3 4 5

想要实现控制器的通讯,先清楚作用域之间的关系,父控制器想要传输数据到子控制器,通过 $scope.$broadcast 方法发送一个广播给子控制器,里面绑定一个通讯名称key 后面带上参数 子空控制器通过$scope.$on 方法接收 传入key名称和一个回调. 如果是子向父传数据,通过$scope.$emit方法发送,父级也是通过 $scope.$on方法来接收数据 另外需要注意,一定要等指令加载完毕才去发送广播!

单页面应用的优缺点

1 2 3

spa应用,优缺点还是很明显的优点是性能高,始终只有一个页面,不需要跳转页面,减轻了服务器的压力.让用户的体验更加好. 缺点就是不利于seo,对搜索引擎不友好.另外就是没有新窗口的跳转,对应习惯新窗口的用户来说可能 造成不适应!!!