论 Angular的混乱

关于angular,一直都有一种云里雾里的感觉,我想很多开发者尤其是搞过后端的程序员,对于angular中的scope controller service 都有很多特别的感触,那就是一个字 乱

关于angular的最佳实践,社区曾给出不少提议,然而我个人觉得,这些提议本身就指出了angular在一些概念上的模糊之处,JavaScript本身就是一个灵活性极大的语言,作为架构之上的框架,一点不清晰将导致很多显而易见的问题

1.scope 到底是什么 modal?state?viewModal?

  scope这个词 字面上看是作用域,是controller下的一个对象,从这层关系看,它应该不能算modal,因为寄生于controller之上,之间是强耦合关系,然而在angular的不少示例中都直接这么写scope.name = ‘jacky‘,于是就有了简单的绑定,迅速的显示,最初这本是彰显angular作为一个自动化框架的强大之处,然后却导致了一大批开发者将其当成了modal,或者说viewModal,在mvvm的模式中 viewmodal 是作为控制器存在的,显然单纯的scope不能负担这一重任,必须加上controller 但是controller又是一个独立的部分,那么看来 scope也不能算是viewmodal了,那么scope到底是什么?

  我们从另一个角度看,angular除了controller service 还设计了 directive, directive 的配置中同样包含了controller scope,然而这里的scope 则绑定了directive上的属性,函数,表达式,事实上我们并没有预先设定一个scope = xxxmodal来配置指令而angular也不允许如此配置,那么从这个设计上来看scope实际上是一个ui组件的state,于是问题就来了,在一大堆看似经典的controller中scope扮演了各种角色,而隐藏背后的却实际上是个state,这就明显产生了混乱.对于scope的使用没有了一个明确定义,directive实际上也就只能在项目内部打打包了.

2.controller 到底是什么?control?viewControl?action?

  在.net的MVC中 control是action的一个上层管理者,每一个路由不仅指定了control 同时还指定了action,这样在定义上看,同一个大页面下的不同操作被集中到一起,项目的结构也会更合理,然后来看看angular,angular对于control的定义从route设置上看更像是个action,我们可以为每一个ui组件指定control,小到一个button大到一整个页面,这导致了一个问题,那就是随着项目的推进,一大堆control估计是不能避免了,有人会说 哪还有module呢,我得说angular的module就是个命名空间,而且还不那么好使.因为JavaScript的加载机制,我们不得不为每一个文件指定一个module,这也是angular最佳实践的一部分,于是乎,有多少个control就意味着有多少个module,当然只会更多,不会更少.

  如果说control是action,从route上看是如此,但是从view的角度来看,每一个directive都能有自己的control 显然一个directive包括各种用户交互自然不能只有一个action,从react的角度看,封装的ui组件中的control应该是一系列交互的调度者,angular中至少directive这部分也是如此设计,control是一个viewControl.

  再从数据角度来看,社区的最佳实践给出的建议是针对每一个view都应该有独立的service作为数据抓取的部分,甚至可以说就是modal的含义了,那么control又是一个真正的control了,它负责抓取数据并且绑定到视图上,似乎看起来还不错,恩可在这之前大家都是直接在control中写http请求的吧,显然这又是一个混乱.所以control到底是啥,看心情,自己玩吧.

3.service 到底是什么?modal?工具函数?

  在angular中service有多种定义方式有factory,provide,还有service自己,这就是个混乱了,从定义方式我们几乎可以这么来看,xxxService ->xxxfactory, xxxService -> xxxprovide, xxxService-> xxxservice, 看不懂啊完全看不懂,service定义了Service也就算了,剩下的factory和provide到底是个甚!

  Service叫服务,从angular最初的设计来看,我觉得是作为http封装来定义的,然而随着angular的不断发展,Service变得越来越庞大和臃肿,并且混乱,因为依赖注入的特性,angular是不提倡自己来管理命名空间的,于是乎我们把各种第三方服务,工具函数,等等都封成了Service,而事实上在这些Service中还依赖着其他Service,这种定义的不明确和依赖的混乱,给项目后期带来了很大麻烦.

事实上angular作为一个完善的自成体系的框架,从诞生到现在已经承载了太多的东西,这也导致框架最初的设计和实际发展产生了不协调,这种不协调同时又随着开发者的需求变得更大,如果框架本身就具备了混乱的特性,对于项目而言也确实算是个不大不小的问题了.

时间: 2024-10-12 17:50:33

论 Angular的混乱的相关文章

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的j

Angular 2的核心概念

让我们来构建一个程序 组件(Component) Angular 2的应用是由一系列的组件构成的(ui element.route..),应用始终有一个包含其他组件的根组件,换句话每个angualr2应用都有一个组件树,这个应用程序可能是这样的: Application是一个根组件,Filters组件具有speaker输入框和过滤按钮,下面有一系列的talks,及每一个talk-cmp // [email protected]({   selector: 'talk-cmp',   proper

Angular基础(四) 创建Angular应用

应用(Application)是由组件构成的树.树的根部是最顶层的组件即应用本身,启动的时候,浏览器会最先渲染顶层组件,然后根据树形结构,迭代渲染子组件.组件是可装配的,可以互相组合以构成更大的组件.本篇作者介绍了创建一个Angular应用的思路和过程. 一.介绍 要编写Angular应用是一个产品列表界面,先要从组件树的角度分析页面构成: 包含导航条.面包屑.产品列表三部分,产品列表又可进一步分割成单个产品->产品图片.价格.分类等.最终组件的树形结构为: 二.创建过程 a) 首先在app文件

angular下H5上传图片(可多张上传)

最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码 angular.module('myApp').directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $time

AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无

angular控制器之间的传值

每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件 另外,我的经验是,尽量不要用event传数据.应该建立一个service来保存数据,并且设置相应getter/setter,具体如下: 每个controller依赖service, call service.setter(...) 统一的service.setter

H5单页面架构:requirejs + angular + angular-route

说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的模块化,模块间低耦合高内聚,目的就为了团队合作效率: 可扩展性.这个不用说了. 学习成本.一个框架再好,团队新成员难以掌握,学习难度大,结果很容易造成代码混乱. 而根据实际经验来看,方便是必然首要地位,除此之外,应该是代码管理了.团队合作过程中,各种协作,代码冲突等等,都会给一个优秀框架带来各种奇怪

Angular 2 应用的 8个主要构造块

前面的话:最近空余时间在学 Angular 2,国庆节的时候看了官网的quickstart,还写了一篇文章,只是一个hello world demo.后面继续看了它的一个项目教程,刚开始还可以跟上,当后面就比较混乱了.的确,对于新手来讲,要了解一个框架还是比较麻烦的.所以停止项目,开始看看 angular 的整体框架是如何的,联系项目,分析下,慢慢来. 学习链接:中文官网 正文开始: angular 应用:用带 angular 拓展语法的 HTML 写模板,用组件类管理这些模板,用服务添加应用逻