现在有一个向前运动的趋势 [ http://todomvc.com ],其中 NG 是一个比较先进的框架。
NG + api 会否成为未来的主流呢?api 可以用 rails 或者 node、php 实现。
这样将大为简化 rails,只用 route,controller,AR 等部分。不用 view 和费解的 assets,甚至完全实现 c/s 的解耦。
元方,怎么看?
就算是完全用 angular 写,你也还得写 template 啊,那么 rails 的 view 还是要的,毕竟手写 html 什么的太特么反人类了……另外不用 assets 难道不用 css 么
#5 楼 @aptx4869 前端的自动化构建一点都不比 rails 的 assets pipeline 差,可以参见 grunt 等类似的工具
HTML -> haml, jade, handlebars, eco... CSS -> Sass, Less, Stylus... Javascript -> Coffee
Angular 本身就是 MVC 框架,view 对它来说是很普遍的事情
@chenge 所说的 C/S 完全分离一点都不是梦想,我们现在的项目已经在这么做了,基于 Java 的后台,只负责业务逻辑和 API,前端用的是 Ember.js,就好像两个项目分开做一样。最大的好处就是一套业务后台,我可以方便的实现 N 个应用,就看你把后台的业务覆盖面如何设计了。
不过说到 NG 一家独大,呵呵……至少 Ember 就不同意。而且也不会影响到 Rails 什么,毕竟需要完全分离的项目是少数,在这个趋势还未成气候之前,我们还有很长的路要走。
你自己看吧,用来写 Ember.js 的 Emblem 模板语法,几乎完全复刻 slim。这就是用在纯前端的,当然也可以嵌套在 Rails 这样的后端框架里使用。
别太局限自己的眼界啊。
至于你说的那几行,创建新用户的表单,用 form helper 输出结果。Angular 我不熟,不过 Ember 里反而更简单(搭配 Emblem 简化语法)
form submit="createNewUser"
input value=name
input value=email
button Submit
BTW,我并无意非要和别的东西比个高低,新的技术总有优势也总有要改善的地方,并不是说纯前端就一定胜过后端 + 前端 MVC,反之也不完全成立。总之,在认定 A 一定不如 B 之前,还是花点时间和心思多了解一下 A 会比较好。
我现在挺看好 angular 的,全部按照它的思路的话,客户端逻辑只维护数据更新就行了,页面完全自更新。emberjs 的文档有点长还没看,不知道它的数据绑定有没有这么方便。
目前我尝试用 ujs 做 ajax 逻辑,简单的页面更新是方便,交互复杂的部分就很吃力,这时候就需要客户端框架。
再考虑到离线应用的话,只能用 js,所以还是需要客户端框架。抢饭碗我不觉得,我继续用 Rails 做后端的粘合剂。
ember 可以用 emblem 模板,angular 不能
angular 有依赖注入这种东西在,不好控制生命周期,和 jquery mobile 等兼容性不好
discourse 用 ember, 不过 angular star 数多 40% 左右
ember 让人担心的地方就是有 yehuda 在... 每次 yehuda 想重构什么东西的时候你们懂的...
#11 楼 @nightire 哟,满满的优越感……随便一个语法简答的模板引擎就能满足你了?非要我把生成的 html 帖出来比较么 源码:
= ng_form_for(User.new, controller: 'RegistrationNewCtrl') do |f|
= f.input :user_name, placeholder: '输入你的用户名'
= f.input :email, placeholder: '[email protected]'
= f.input :password, placeholder: '长度在6位以上'
= f.input :password_confirmation, placeholder: '确认密码'
= f.button '注册'
<form accept-charset="UTF-8" action="/users" class="simple_form new_user" data-ng-controller="RegistrationNewCtrl" data-ng-submit="submit()" id="new_user" method="post" name="form" novalidate="novalidate">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
</div>
<div class="control-group string required user_user_name"><label class="string required control-label" for="user_user_name"><abbr title="required">*</abbr>
用户名</label>
<div class="controls"><input class="string required" data-ng-model="user.user_name" id="user_user_name" name="user[user_name]" placeholder="输入你的用户名" type="text" />
<p class="help-block">{{errors.user_name}}</p>
</div>
</div>
<div class="control-group email optional user_email"><label class="email optional control-label" for="user_email">Email</label>
<div class="controls"><input class="string email optional" data-ng-model="user.email" id="user_email" name="user[email]" placeholder="[email protected]" type="email" value="" />
<p class="help-block">{{errors.email}}</p>
</div>
</div>
<div class="control-group password optional user_password"><label class="password optional control-label" for="user_password">密码</label>
<div class="controls"><input class="password optional" data-ng-model="user.password" id="user_password" name="user[password]" placeholder="长度在6位以上" type="password" />
<p class="help-block">{{errors.password}}</p>
</div>
</div>
<div class="control-group password optional user_password_confirmation"><label class="password optional control-label" for="user_password_confirmation">确认密码</label>
<div class="controls"><input class="password optional" data-ng-model="user.password_confirmation" id="user_password_confirmation" name="user[password_confirmation]" placeholder="确认密码" type="password" />
<p class="help-block">{{errors.password_confirmation}}</p>
</div>
</div>
<div class="btn" data-ng-click="submit()" data-ng-disabled="form.$invalid">注册</div>
</form>
这玩意在我写完ng_form_for
这 helper 之前,本来就是用 slim 手写的,重复得都想吐,同学你可以试着用 Emblem 重写一遍
#14 楼 @aptx4869 大哥,我都说了无意比较什么,Ember 和 Angular 不见得谁就比谁更优越几分,这道理我想谁都能懂。
你那 ng_form_for 是个 helper 好吗?你以为 Ember 就不能写 helper 吗?Handlebars 作为 Ember 内置的模板系统,写类似的 helper 又不是多难的事情,去看看 discourse 的源码,你以为这样的 helper 就只有用 Angular 能做到吗?emblem 也有用于 rails 的 gem,重现你这个 helper 并不是只有一条路可走。
还是那句话,在认为 A 一定没有 B 好之前,还是去了解一下 A 吧。
#16 楼 @nightire So, what's your point then? You are now useing some pure front-ended
helper which is written in javascript that are better than Rails helper which is written in ruby? Ok, If you have something better, just show us the code, please.
PS.说了半天你怎么知道我就没看过那点东西呢?我会告诉你我最后选 angular 没选 ember 的原因之一就是看了 discourse 那些一坨坨的玩意被吓到了么……
個人淺見,http://deployd.com 像這種東西以後有可能會是後端的方向,讓視覺層與後端完全分離,WEB 就提供一套 Web 用的 API 再搭配 Angular 等喜歡的框架來使用就好
任何封装都会损失性能和灵活性 angular 和 emberjs 这种做法有点像.NET、delphi 中的数据感知控件(data-aware),做原型和供初学者把玩的,真的用在产品中会被骂的。谁能科普一下这样的优点? 前后段分离只是 ajax 交互的问题,直接写 js 所有控制点都可以灵活处理。
大家也不用太害怕 Angular 吧,畢竟前端 MVC 這樣的特性是因為 WebAPP 的產品越來越多,這種產品為了使用上的體驗因此需要像是 Angular 這樣的 Framework 來支持,但目前絕大部分都還只是在用 jQuery 套套動態效果而已,如果那種東西要用 Angular 來做是會死人的,所以他們瞄向的產品特性不同,別太擔心
#31 楼 @ronbin 那个 required 应该是 simple_form 加的,我都没动它……
其实那 helper 没干啥特别的,只是用 simple_form 的 custom form builder 的功能,直接将后端模型塞入到相应的options[:input_html]['data-ng-model']
里面而已,写的很难看很罗嗦,但整个全部不到 50 行,所以真的是很简单的……那个 data-ng-disable 只是简单的覆盖掉 form builder 原来的 button……
def button(name, options={})
options[:class] ||= ''
options[:class] += ' btn'
options[:class].sub!(/^\s+/, '')
content_tag(:div, name, options.merge(
'data-ng-click' => 'submit()',
'data-ng-disabled' => 'form.$invalid'
))
end