V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
akinoniku
V2EX  ›  Angular

来聊聊AngularJS

  •  
  •   akinoniku · 2013-12-11 20:00:52 +08:00 · 8681 次点击
    这是一个创建于 3998 天前的主题,其中的信息可能已经有所发展或是发生改变。
    挑你喜欢的topic说说就好

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

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

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

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

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

    #6 纯数据处理的逻辑,是不是不用写成angular的物件? 比如#1说的那个编译器
    36 条回复    2014-11-01 19:21:08 +08:00
    loading
        1
    loading  
       2013-12-11 20:18:03 +08:00 via iPhone
    #为什么选AngularJS而不是BackboneJS或EmberJS
    akinoniku
        2
    akinoniku  
    OP
       2013-12-11 20:48:54 +08:00
    @loading backbone 有点太轻了,剩下的原因主要是感觉Google靠谱
    lwjhere
        3
    lwjhere  
       2013-12-11 21:03:21 +08:00   ❤️ 1
    最近刚开始用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
        4
    pythoner  
       2013-12-11 21:36:09 +08:00   ❤️ 1
    最近正好在接触angularjs,写了个应用练手,戳这里:http://www.angularjs.cn/A0od


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

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

    #3 同上

    #4 没高清粗

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

    #6 这个直接写js就搞定了貌似
    forgottencoast
        5
    forgottencoast  
       2013-12-11 22:40:40 +08:00
    knockoutjs呢?
    RIcter
        6
    RIcter  
       2013-12-11 22:55:00 +08:00
    楼主~~~=3=
    marrow
        7
    marrow  
       2013-12-12 05:24:25 +08:00   ❤️ 2
    1. factory和service基本是一样的只是调用方式不同,service的接口更加适合直接传一个类进去,在coffeescript里比较方便

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

    4在某处看到过一个顺序图但是找不到了,举个栗子 http://jsfiddle.net/DLNc6/
    yakczh
        8
    yakczh  
       2013-12-12 08:54:35 +08:00   ❤️ 1
    AngularJS 如果做后台管理界面,布局怎么搞成那种普通网站后台管理的界面?
    上面是主要模块,左侧是选中相应模块的二级菜单
    pythoner
        9
    pythoner  
       2013-12-12 09:16:32 +08:00
    @yakczh 这个问题跟angularjs问题不大吧。主要取决于你的html怎么写。
    pythoner
        10
    pythoner  
       2013-12-12 09:17:03 +08:00
    写错了一个词。第二个“问题”换成“关系”
    akinoniku
        11
    akinoniku  
    OP
       2013-12-12 09:21:55 +08:00
    @RIcter =3=
    akinoniku
        12
    akinoniku  
    OP
       2013-12-12 09:47:18 +08:00
    @marrow

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

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

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

    十分感谢
    se77en
        13
    se77en  
       2013-12-12 09:54:09 +08:00
    @akinoniku 搜一下谷歌墓地,你就知道谷歌多么不靠谱了
    se77en
        14
    se77en  
       2013-12-12 09:56:13 +08:00
    akinoniku
        15
    akinoniku  
    OP
       2013-12-12 10:03:04 +08:00
    @se77en 我觉得除了google reader,其它好像没那么严重

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

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

    只是google的东西总不会让别人买了然后闭源或者收费吧
    teddy1004
        16
    teddy1004  
       2013-12-12 10:31:49 +08:00   ❤️ 2
    记得以前看过一个博客里面说到 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
        17
    akinoniku  
    OP
       2013-12-12 10:48:44 +08:00
    @teddy1004 service好像可以注入其他service,这应该也算注入?
    agassi_yzh
        18
    agassi_yzh  
       2013-12-12 10:57:00 +08:00   ❤️ 1
    最近也在学angularjs,用yeoman的这个generator https://github.com/DaftMonk/generator-angular-fullstack

    可以用coffee和jade
    teddy1004
        19
    teddy1004  
       2013-12-12 11:13:31 +08:00   ❤️ 1
    @akinoniku 这个官方文档里面有说的,service 声明其他的 service 依赖其实还是通过 factory function 来的, http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies
    geew
        20
    geew  
       2013-12-12 11:43:52 +08:00
    还是比较熟悉backbone啊 backbonejs.org
    L42y
        21
    L42y  
       2013-12-12 15:38:07 +08:00   ❤️ 2
    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
        22
    akinoniku  
    OP
       2013-12-12 16:22:46 +08:00
    @L42y 谢谢

    1. 有个疑问,factory就不是单例了吗?

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

    6. 就是angular的provider衍生出来那一系列东西
    scarlex
        23
    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
        24
    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
        25
    marrow  
       2013-12-12 23:58:35 +08:00
    L42y
        26
    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
        27
    L42y  
       2013-12-13 01:14:41 +08:00
    呃,好像我在 Mac 下打了个 栗子 的图标结果后面的内容都被吞了 cc @Livid
    L42y
        28
    L42y  
       2013-12-13 01:17:41 +08:00
    补充一下,框架可以让你以(个人偏好的)更优方式组织代码,如果你已经选择了 AngularJS,为什么不按它的方式来完成这件事呢?
    akinoniku
        29
    akinoniku  
    OP
       2013-12-13 17:46:05 +08:00
    @L42y 谢谢,就是说同一个factory可以当普通的class用,new 一堆出来咯?
    ThomasChan
        31
    ThomasChan  
       2013-12-13 21:43:10 +08:00   ❤️ 1
    luikore
        33
    luikore  
       2013-12-14 02:40:40 +08:00   ❤️ 1
    angular 简单说就是 半个jquery + rivetsjs + backbone + DI
    angular 教程视频这么多都无数人学不会, DI 有一定功劳. 不考虑老浏览器的话可以去掉 backbone model. 最后简简单单一个 rivetsjs 绑定原生对象就够了.
    lyric
        34
    lyric  
       2013-12-31 14:32:29 +08:00   ❤️ 1
    复杂 WebApp (单页面上绑定数超过2000个)不要使用 Angular,dirty checking 对性能有严重影响
    akinoniku
        35
    akinoniku  
    OP
       2013-12-31 15:08:24 +08:00
    @lyric 这么说用ng-view分离功能页面,每个页面保持专注简洁,大概就能萌
    bigbee
        36
    bigbee  
       2014-11-01 19:21:08 +08:00
    创业团队求angularjs的熟手,有兴趣创业的请联系我,mymojing at 163 dot com
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3215 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:16 · PVG 20:16 · LAX 04:16 · JFK 07:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.