谷歌的AngularJS框架 - 冒险值得吗?

65

我被要求为我们的一个客户构建一个小型Web应用程序,我认为这可能是尝试使用不同框架构建Web应用程序的好机会。我们构建的大多数应用程序都基于asp.net Web Forms,并且我们还没有在MVC体系结构中完成任何工作,但我渴望使用正确的工具以更有结构的方式构建Web应用程序。

我一直在研究像asp.net MVC等看起来很不错的东西,但我想知道是否有理由使用类似Google AngularJS框架的东西。

如果可能的话,我仍然希望能够使用C#编写我的服务器端代码,我还没有足够的研究AngularJS来知道这是否可行,尽管我认为我可以使用Web服务。

有没有人使用AngularJS开发过应用程序,如果有,使用感受如何,你能否指点我一些教程?


看起来类似于 Knockout.js 的声明绑定。 - greenimpala
4
使用AngularJS和ASP.NET MVC 4构建单页Web应用程序:http://tarkus.me/post/32121691785/angularjs-with-asp-net-mvc-4 - Konstantin Tarkus
2
您可能还想检查一下Visual Studio的AngularJS入门套件:http://github.com/kriasoft/angular-vs - Grief Coder
需要考虑的事情:Angular(未压缩)有超过一万五千行代码(https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js)!它可以是一个有用的工具,但考虑到它所用于的许多内容都可以在服务器上处理,值得问一下它是否会成为您网站的游戏规则改变者。 - Sandy Gifford
8个回答

104

我们最近几个月一直在将一个Swing fat-client应用程序移植到AngularJS中,我认为这值得推荐。就学习资源而言,请查看官方项目网站(务必阅读教程)和邮件列表(作者非常乐于助人)。

好东西:

  • 极佳的可测试性
  • 双向数据绑定是一个非常强大的功能,一旦理解后可以极大地帮助您
  • 在我的看法中,AngularJS模板比使用数据属性或“特殊”的CSS类标记执行某些操作的元素要不那么脆弱
  • 它极大地减少了使用jquery插件的需求,因为在AngularJS中实现该功能非常容易(例如树、选项卡、手风琴等)

不好的东西:

  • 学习曲线似乎相当陡峭(我没有太大问题,但我看到有些人很难掌握)
  • 目前,AngularJS对验证的支持不好(新的实现正在路上)
  • 并非所有的库/jquery插件都能很好地与Angular兼容,通常你需要对它们进行封装
  • API仍在完善中,因此可能会有一些破坏性的更改(尽管发布频繁且变更日志非常好)
  • 在页面上绑定了数千个数据项时,性能还可以(但大多数情况下这不是限制因素,但某些情况下可能会成为问题)。

一些指针(如果您决定学习AngularJS):

  • 有些人过度使用小部件。在我的经验中,最好使用HTML“partials”+服务,并仅偶尔使用小部件。
  • 阅读库的源代码-这是了解Angular最好的地方
  • 不要在服务/控制器中操纵DOM
  • 如果您使用CSS类来绑定事件,您正在错误地使用它

4
在“学习曲线”中,当你说“陡峭”(rapidly increasing)时,是否有可能是指“平缓”(slowly increasing)?请确认一下您的意思。 - Marko Dumic
12
Angular 是一个相当庞大的框架,刚开始学习时需要了解许多内容(包括依赖注入等概念),因此我认为合适的词语是“陡峭”。 - psyho
13
“陡峭的学习曲线”这个词汇在英语中的普遍使用已经不正确了,数学上恰恰相反。@MarkoDumic 在学术方面是正确的(“陡峭的学习曲线”意味着在短时间内学习很多),但在口语英语中,“陡峭的学习曲线”意味着“难学”。这种用法已经深入人心,因此最好使用科学上不正确但常用的版本,以便大多数人能理解您的意思。参见:http://english.stackexchange.com/questions/6209/what-is-meant-by-steep-learning-curve - Eran Medan
取决于坐标轴 - 如果x=学习,y=时间/努力,那么陡峭的学习曲线就是你在面对困难时所得到的。 - newcube
1
“陡峭的学习曲线”这个表达在使用中有着相反的含义。根据几本词典的定义,“陡峭的增长”意味着技能的快速提升。这与普通英语中“陡峭”代表初始学习过程困难的用法不同。详见维基百科-学习曲线页面。 - surfmuggle
显示剩余4条评论

26

+1 @psycho's answer

AngularJS是一款客户端框架,因此您可以在服务器上使用任何语言。它被设计为与jQuery良好配合使用,并非常注重测试...

以下是您可能会发现有用的一些资源:

一些示例应用程序:

SenchaTouch适配器:https://github.com/tigbro/sencha-touch-angular-adapter

jQ Mobile适配器:https://github.com/tigbro/jquery-mobile-angular-adapter

欢迎在邮件列表上提出任何问题!

我们仍处于测试阶段,但谷歌已经有几个内部应用程序采用AngularJS技术支持。


更新(2012年7月26日):

AngularJS v1.0已发布。

了解一些基于AngularJS的公共应用程序,请查看http://builtwith.angularjs.org


Vojta,那些应用程序是什么?如果我们能指出Google正在使用自己的产品,那将使销售变得更加容易。 - Steven P
@StevenP,Google大部分应用程序很遗憾都是内部使用的。但是,我已经更新了答案,并提供了一个链接,您可以在其中查看一些公共应用程序。最大的AngularJS驱动的公共应用程序是DFA。 - Vojta
v1版本中有哪些示例应用程序?如果有一个清单的话,那将非常有帮助。 - noogrub

20

我认为,为客户开发一些他们难以支持的东西是不专业的。你必须考虑到,对于客户来说,雇佣有经验的Angular专业人员或培训自己的人员爬那个“陡峭的学习曲线”会很困难。此外,到目前为止,文档并不是那么好。你能否在几分钟内轻松回答这个问题,“如何将我的亮丽的Angular应用程序连接到我的客户数据库?”客户是否能够在未来某个时候轻松地获取一些现有的代码,并根据他们潜在的未来需求进行调整?要诚实。

将可靠的LAMP开发与Angular进行比较。对于“小型Web应用程序”,我真的认为专业人士应该给客户一个易于维护和简单的东西。

这并不是说Angular不酷、不性感等等。但是,除了最新的框架热潮之外,您还必须考虑到客户未来的可维护性。我的建议是谨慎行事。先用Angular构建自己的网站,看看自己的想法,然后再将您的新技能赋予一些信任的客户。


2
明白了,最终我没有使用Angular构建应用程序。 - TGuimond
2
这很有趣。当 jQuery 刚出来时,我敢打赌你也用同样的理由拒绝了它。 - maxisam
9
@maxisam - 是的,我是这么做的。当jQuery代码变得成熟时,我开始向商业客户推广它。我只是觉得,早期采用有一些风险,客户在做决定时应该负责任地考虑到这些风险。我现在正在构建一个应用程序,作为生产代码的测试;如果它表现良好,并且我们觉得AngularJS代码库是稳定和可靠的,我们将把它推广为公司的标准。这就是我想说的全部内容。 - noogrub
你能否在短短几分钟内轻松回答这个问题:“我该如何将我的华丽Angular应用程序连接到客户的数据库?”当你回答这个问题时,情况可能有所不同,但是今天这个修辞性问题的答案显然是肯定的。 - user240515
2
李小龙曾说过:“它就像是一根指向月亮的手指。不要只关注手指,否则你会错过所有天堂的荣耀。”我同意,在我工作的企业级别中,我们积极使用AngularJS,它非常出色。这里提供的核心建议仍然适用于新技术,特别是对于那些正在考虑在实际客户应用程序中使用它们之前甚至没有练习过该技术的“顾问”:首先使用最新的热门技术构建自己的<tech solution>,看看你的想法如何,然后再将你的新技能赋予一些信任的客户。 - noogrub
显示剩余2条评论

11

我记得几个月前在SO上读到过一个与我的问题相同的帖子,我们决定使用AngularJS,在这个项目上做出了最好的决定。

我们正在使用AngularJS + ASP.NET MVC4 REST WebAPI。

很可能在使用如此好的客户端Javascript MVC框架后,您只需要REST API层与服务器端的业务逻辑层交互,并且不需要MVC在服务器端(ASP.NET MVC / Spring / Struts将感觉像旧的回忆)。

您会发现Angular-UI是一个很好的附加组件(尤其是ng-grid)。

在我们的项目完成之后,我们可能会将我们编写的某些指令放到开源世界中。


我知道你的回答时间不长,但是...今天有什么可以分享的吗? - superjos
@SutikshanDubey,您能否帮忙回答一下,在使用AngularJS的单页应用程序中,如果我需要制作自定义控件,并且这些控件的属性(如宽度、高度、屏幕上的x/y位置)来自于JSON格式的服务器,该怎么办? - Siddharth Pandey

11

我已经研究了 AngularJS 好几个月,想把它用作我正在创建的产品的核心框架。有许多方面使 AJS 值得学习。是的,学习曲线有点陡峭,但这非常值得,特别是如果您希望在客户端具有更多控制能力。

JQuery 在运行时操作 DOM,而 AJS 位于 JS 渲染生命周期内。这使您可以通过创建 HTML 元素和属性来教授 DOM 新技巧。这非常、非常强大。因为您能够引入新的元素行为,以适应您的目的和需求。在 AJS 中,这些自定义 HTML 属性/元素称为指令(Directives)。通过编写自己的指令,您可以构建当前 HTML 没有的功能,推出在现代浏览器上运行并且将来也将可用的功能。在诱导新行为的众多方法中,AJS 看起来是最安全的方向,因为他们选择了如何实现它。

AJS 对比 jQuery 可以获得巨大的性能提升。

我喜欢双向数据绑定的简单性,以及客户端 MVC 模式中的关注点分离,在上面提到的测试性方面提供了极大的帮助。它的 scope 对象是视图(HTML)、模型(数据)和自定义控制器之间的粘合剂。作用域提供对父属性的访问,并且可以在兄弟级别上进行隔离,这对于一些可重用的模板非常重要。

模板可以在应用程序中创建和重复使用,其中可以包含 0 个或多个自定义指令。

我一直在使用 PRISM 和 MEF 等框架,但我发现 AJS 具有这些 .NET 框架中存在的大部分功能,但体积只有 29K。有传言称他们正在开发懒加载,如果提供将提供一些非常有趣的 LOB 类型功能。

有许多 UI 框架正在为 AJS 构建,但您可以根据需要包装任何第三方控件库,只需花费一点精力即可。关键是确保当这些第三方控件引起更改时,您要使用其应用方法正确地通知 AJS。

如果将AJS与MS TypeScript结合在VS 2012中,就可以管理和构建一些非常令人印象深刻的项目,对于那些更熟悉VS项目的人来说,这些项目可以很好地工作。AJS有很多其他值得考虑的原因,但是如果您正在考虑像KnockOut这样的框架,我强烈推荐使用AJS,而不管它被认为具有多大的学习曲线。Knockout是一个库,而AJS则是一个框架。

我完全同意。 - Spock
@user1333524,您能否帮忙回答一下,在使用AngularJS的单页应用程序中,如果我需要制作自定义控件,并且这些控件的属性(如宽度、高度、在屏幕上的X/Y位置)来自于JSON格式的服务器,该怎么办? - Siddharth Pandey

8

7

我知道这篇文章已经过时了,而你也没有选择Angular,但我和你有着类似的背景,当我提出这个问题时,我和你处于同样的境地。

因此,为了未来的访问者的利益,以下是我发现的一些“风险”和有用资源的链接...

  • 正如许多人已经提到的那样,Angular 可能有一个非常陡峭的学习曲线,“不仅是我,而且我认为是高度聪明的开发人员的同事,在一些基本概念上都遇到了困难” AngularJS is amazing... and hard as hell(该链接还有一些很好的教程链接,你要求的),而版本2的东西看起来更像Javalooking more like java,这对于你的C#背景来说可能不是问题,在我看来指令已经足够难以理解了,没有冗长的注释等等。
  • 在某些情况下,Angular 的性能可能会很差,特别是当在大量元素上使用ng-repeat时Considering Speed and Slowness in AngularJSScaylr's experience。其他人已经提到,性能真正下降超过约2000个绑定元素,但这通常会引起关于任何具有超过该数量元素的应用程序可能不是一个好应用程序的争论。然而,如果您有合法的使用案例需要许多绑定对象,请记住这一点。
  • Angular 在贡献者方面很受欢迎in terms of contributors,但在生产使用方面远远落后于 jQuery 等production usage。找到 Angular 开发人员可能会很困难,而且 jQuery 或其他开发人员转换需要处理这个“陡峭的学习曲线”。
  • 因为 Angular 还很年轻,您不能保证它将获得足够的关注,以使您的新 Angular 技能可用,并且您的新应用程序不会很快成为遗留代码
  • 在v1.2中,Angular 不支持IE7及以下版本,v1.3将放弃IE8。对于>=IE9,您需要遵循some special coding practices
  • 许多您可能习惯使用的 JavaScript 小部件、插件和库无法正常使用 Angular,除非进行大量修改,人们经常建议re-write your component in Angular anyway
  • 2014年3月更新:在尝试构建一个非常复杂的一整页应用程序两个月之后:有许多版本的 Angular,很难说哪个是最好或最稳定的。这将取决于你用它编码的内容。我发现一些错误可以通过升级到较新版本来修复,而其他错误则可以通过回归到较早版本来修复。我从未像这样与 jQuery 一样去过版本购物。
  • 2014年5月更新:年轻、损坏的工具。Batarang很棒,直到它doesn't work。在他们修复这个问题之前,我不能相信它。

最后,我发现学习这方面最好的三个资源是:


0

请提供链接备份。 - Viral Jain

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接