Sinatra + AngularJS 与 SeaJS 使用体会

August 12, 2013 22:12


发现差不多一个月没写点东西了,最近么,工作略忙,回家又玩忙着建新blog去了(练手。。), 都快忘了这里了,无意间点进来才想起好久没写什么的,于是把最近练手体会写写了。 项目地址: Sky

后台用Sinatra搭,写起来略麻烦,不过我选的富前端,所以后台就提供API了, 用着还行,没Rails方便,习惯了Rails的环境,刚开始时还真有点不习惯。。

恩说正题,由于AngularJS以前没用过,而且他的使用方式也比较特别的,不过由于以前 使用过Backbone.js所以还算习惯,angular写东西,代码确实少了很多,恩,真的很多, 不会少于三倍,因为不用进行很多底层的控制,如数据视图的绑定,页面元素事件的绑定等

说白了,这些天基本都是在熟悉Angular的使用方式去了,看了下网上的例子,发现controller 的加载都是一起加载的,这怎么行呢,于是找了个模块化的库来用用,看了下requireJS与,SeaJS, 然后看seajs代码短点,于是我就用seajs了。。。

以前也用NodeJS写过点东西,如一个简单的http代理,所以对这个模块化的东西感觉还好, 比较熟悉的,然后就是怎么把seajs与angularjs结合起来,怎么才知道angular要用哪个controller 了呢?由于对angular不太熟悉,网上找了一会,只发现一个通过angular注入器实现的, 而且感觉写的好烂。。。

不过这始终是一种方式,其他的也还没发现。。。突然才想起,我居然没去论坛问问。 不管了,就直接使用注入的方式吧,方法就是写一个空controller,然后他被调用时 再加载实际要用的controller,然后把$scope等东东注入到加载好的controller中, 下面是我为这个自动加载的辅助方法写的一个模块:

define(function(require, exports){

  exports.autoload = function() {
    var modules = format_args(arguments)
    var injector = ['$scope'];
    var bak = injector.slice(0, injector.length);


    bak.push('$injector');

    bak.push(function() {
      var $injector = arguments[arguments.length - 1];
      var inject_opts = {};
      var that = this;

      for (var i = 0; i < injector.length; i++) {
        inject_opts[injector[i]] = arguments[i];
      }


      seajs.use(modules, function(m) {
        $injector.invoke(m.ctrl, that, inject_opts);
      });
    });

    return bak;
  }


  // 主要用来区别js与css
  // xxx 默认为seajs的加载
  // xxx.js 为js
  // xxx.css 为css
  function format_args(args) {
    var tmp = [];

    for (var i = 0; i < args.length; i++){
      switch (args[i].split('.')[1]) {
      case 'js':
        tmp.push('/public/' + args[i]);
        break;
      case 'css':
        tmp.push('/stylesheets/' + args[i]);
        break;
      default:
        tmp.push(args[i]);
      }
    }

    return tmp;
  }
});

然后使用时就简单多了:

var sa = require('sea_angular');

Sky.config(function($routeProvider){
  $routeProvider
    .when('/', {
      controller: sa.autoload('home', 'home.css'),
      templateUrl: '/template/index'
    })
});

每一个参数都是要自动加载的模块,或是通过seajs的配置,或是直接通过路径加载

还有就是jquery,以前用jquery用的爽,在angularjs下感觉都不用怎么操作元素了, 实在有点不想加载他,不过有些时候,没他还真不方便,以后得再找找有什么简单的库。

最后加上boostrap,加上了,设计的再差也有个底限了,哈哈,我用上后, 页面再也不会出现惨不忍暏的情况了。。

Comments: