来聊聊AngularJS

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4036 天前的主题，其中的信息可能已经有所发展或是发生改变。

挑你喜欢的topic说说就好

#1 factory和service 的实际应用场景就是是啥，比如我有个markdown，想“编译”成JSON，应该用哪个

#2 大型APP你喜欢怎样的结构？ angular-seed 只适合简单的吧，我现在的做法是分成不同的小型APP

#3 如果一个站由多个APP组成，怎样控制载入呢？

#4 Directive 的参数搞清楚了吗？我还是分不太清 preLink 和 postLink

#5 把什么样的东西抽成directive比较好？

#6 纯数据处理的逻辑，是不是不用写成angular的物件？比如#1说的那个编译器

App

angular

编译器

36 条回复 • 2014-11-01 19:21:08 +08:00

loading

2013-12-11 20:18:03 +08:00 via iPhone

#为什么选AngularJS而不是BackboneJS或EmberJS

akinoniku

2013-12-11 20:48:54 +08:00

@loading backbone 有点太轻了，剩下的原因主要是感觉Google靠谱

lwjhere

2013-12-11 21:03:21 +08:00

最近刚开始用anguarjs，谈谈我的理解
1、service和factory差不多，只是service是singleton；markdown编译成html吗？不用service/factory，直接用markdown.compile之类的就可以了（如果你有markdown的库）
2、这个看个人了，可以多个module（就是app）
3、一个页面如果有多个app的话，不太科学吧？或者试试在不同的标签上面架ng-app=xxx试试
4、不太了解
5、和dom交互的部分用directive
6、是的

pythoner

2013-12-11 21:36:09 +08:00

最近正好在接触angularjs，写了个应用练手，戳这里：http://www.angularjs.cn/A0od

#1 把service理解成ORM就可以了

#2 参考一下angularjs的开源项目

#3 同上

#4 没高清粗

#5 常用的指令。比如我有一个用来加载系统提示信息的东西需要在很多模板里使用，把它做成directive，这样的话就一个标签搞定了，比如:<message></message>

#6 这个直接写js就搞定了貌似

forgottencoast

2013-12-11 22:40:40 +08:00

knockoutjs呢？

RIcter

2013-12-11 22:55:00 +08:00

楼主~~~=3=

marrow

2013-12-12 05:24:25 +08:00

1. factory和service基本是一样的只是调用方式不同，service的接口更加适合直接传一个类进去，在coffeescript里比较方便

2目前主流推荐是按功能或者组件组织代码，在用ng-boilerplate，
参考http://trochette.github.io/Angular-Design-Patterns-Best-Practices/

4在某处看到过一个顺序图但是找不到了，举个栗子 http://jsfiddle.net/DLNc6/

yakczh

2013-12-12 08:54:35 +08:00

AngularJS 如果做后台管理界面，布局怎么搞成那种普通网站后台管理的界面？
上面是主要模块，左侧是选中相应模块的二级菜单

pythoner

2013-12-12 09:16:32 +08:00

@yakczh 这个问题跟angularjs问题不大吧。主要取决于你的html怎么写。

pythoner

2013-12-12 09:17:03 +08:00

写错了一个词。第二个“问题”换成“关系”

akinoniku

2013-12-12 09:21:55 +08:00

@RIcter =3=

akinoniku

2013-12-12 09:47:18 +08:00

@marrow

1. 请问这个有没有例子可以参考一下，coffee的，在service里面写class吗？

2. 那个slide教会我很多，谢谢

4. 看了这个还是不清楚什么情况用pre什么情况用post

十分感谢

se77en

2013-12-12 09:54:09 +08:00

@akinoniku 搜一下谷歌墓地，你就知道谷歌多么不靠谱了

se77en

2013-12-12 09:56:13 +08:00

@akinoniku 链接在这儿 http://www.36kr.com/p/201933.html

akinoniku

2013-12-12 10:03:04 +08:00

@se77en 我觉得除了google reader，其它好像没那么严重

而且那些都是产品，又不是开源的什么技术，即使有一天google不开发了，我还能用旧版的或者哪个社区维护版的

比如jquery不更新了，对用jquery的软件来说，也不会有多大打击

只是google的东西总不会让别人买了然后闭源或者收费吧

teddy1004

2013-12-12 10:31:49 +08:00

记得以前看过一个博客里面说到 service 和 factory 的异同，是看 AngularJS 的源代码
翻了一下，下面分别是 factory 和 service 的代码

function factory (name, factoryFn) {
return provider(name, { $get: factoryFn });
}

function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}

得出的结论是：service 就是调用了 $injector 注入器的 factory，简化数据共享的实现。factory 可以有自己的依赖，注入其他服务。service 貌似不行。

akinoniku

2013-12-12 10:48:44 +08:00

@teddy1004 service好像可以注入其他service，这应该也算注入？

agassi_yzh

2013-12-12 10:57:00 +08:00

最近也在学angularjs，用yeoman的这个generator https://github.com/DaftMonk/generator-angular-fullstack

可以用coffee和jade

teddy1004

2013-12-12 11:13:31 +08:00

@akinoniku 这个官方文档里面有说的，service 声明其他的 service 依赖其实还是通过 factory function 来的， http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies

geew

2013-12-12 11:43:52 +08:00

还是比较熟悉backbone啊 backbonejs.org

L42y

2013-12-12 15:38:07 +08:00

1.

- http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory

- http://jacobmumm.com/2012/08/28/angular-js-services/

- http://angular-tips.com/blog/2013/08/understanding-service-types/

Service 和 Factory 的不同第一个链接里解释得比较清楚，我只用 Factory, 从来不用 Service, 个人觉得你用 Factory 就好。

2. & 3.

App 是指 angular.module?

4.

postLink 就是默认的 link function, 如果你想在 link 子 node 前 compile 后执行就用 preLink

5.

要操作 DOM 就写成 directive, 放在 link fn 里，其他的用 ngController, 因为 ngController 也是个 directive https://github.com/angular/angular.js/blob/master/src/ng/directive/ngController.js

6.

物件是指？

akinoniku

2013-12-12 16:22:46 +08:00

@L42y 谢谢

1. 有个疑问，factory就不是单例了吗？

2&3. 指的是一个网站有不同的模块，比如blog的文章列表和用户中心

6. 就是angular的provider衍生出来那一系列东西

scarlex

2013-12-12 16:37:34 +08:00

#1 http://iffycan.blogspot.com/2013/05/angular-service-or-factory.html
我大部分情况下都是用 factory。

#2 + #3
不太清楚，或者可以参考下 angular-ui ？

#4
directive 详细版的参数有好多，scope，restrict, templateUrl, controller, compile, link 之类的。具体可以参考下http://www.cnblogs.com/lcllao/archive/2012/09/09/2677190.html
里面也有谈pre，post。
当然，你也可以看看官方文档

#5
DOM 操作基本都要写成 directive ，这也是官方推荐的做法。

#6
不太清楚，orz

dagger

2013-12-12 20:35:37 +08:00

2. http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
这篇让我比较有感觉

3. 前面的那篇里面有例子，新建一个app然后把需要的module导进去，比如
angular.module('homepageApp', ['postApp', 'userApp']);

4. 引述 http://zouyesheng.com/angular.html
“link 函数是由两部分组成，所谓的 preLink 和 postLink 。区别在于执行顺序，特别是在指令层级嵌套的结构之下， postLink 是在所有的子级指令 link 完成之后才最后执行的。 compile 如果只返回一个函数，则这个函数被作为 postLink 使用”
也就是说如果一个directive的template里面还有directive，那么它自己的postLink得等template里面那个directive的postLink执行完才能执行（link默认就是postLink）

5. 如果自己感觉把它变成DOM实体比较舒服那就用directive，一般来说DOM都是独立实体（单独的controller，它的scope相当于directive里的scope: true）

marrow

2013-12-12 23:58:35 +08:00

service的官方例子
http://docs.angularjs.org/api/AUTO.$provide#methods_service

L42y

2013-12-13 01:12:52 +08:00

@akinoniku

#1 所有 service 都是 singleton 的，官方有考虑在以后的版本中加入非 singleton 的 Service，不过原来的那份 Google Doc 我没翻出来，抱歉。像 @pythoner 所说，你可以把 Service 理解成 ORM，用来存储一些全局共享的数据，Factory 用于存放其他东西，你可以选择 expose 哪些东西，而其他的东西不 return。

#2 & #3 我目前的做法是分成很多个 module，方便测试和复用，比如一个网站分成 config, utility, auth, user, post 之类的几个大模块，每个模块下有更多的模块，比如 config.routes 构成这样的代码：angular.module('namespace', ['namespace.config']);angular.module('namespace.config', ['namespace.config.routes']);

#6 我倾向于都放在框架里完成，比如你的

L42y

2013-12-13 01:14:41 +08:00

呃，好像我在 Mac 下打了个栗子的图标结果后面的内容都被吞了 cc @Livid

L42y

2013-12-13 01:17:41 +08:00

补充一下，框架可以让你以（个人偏好的）更优方式组织代码，如果你已经选择了 AngularJS，为什么不按它的方式来完成这件事呢？

akinoniku

2013-12-13 17:46:05 +08:00

@L42y 谢谢，就是说同一个factory可以当普通的class用，new 一堆出来咯？