ng-classify, 将CoffeeScript类转换为AngularJS模块

分享于 

18分钟阅读

GitHub

  繁體 雙語
Convert CoffeeScript classes to AngularJS modules
  • 源代码名称:ng-classify
  • 源代码网址:http://www.github.com/CaryLandholt/ng-classify
  • ng-classify源代码文档
  • ng-classify源代码下载
  • Git URL:
    git://www.github.com/CaryLandholt/ng-classify.git
    Git Clone代码到本地:
    git clone http://www.github.com/CaryLandholt/ng-classify
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/CaryLandholt/ng-classify
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    分类

    LicenseVersionBuild StatusDependency Status

    将CoffeeScript类转换为 AngularJS的模块
    编写更少的JavaScript。编写更少的CoffeeScript。 写入更少的Angular。

    观看视频屏幕。
    演示工具

    安装

    安装使用 npm

    $ npm install ng-classify

    用法

    客户端

    ngClassify=require'ng-classify'content='''class Home extends Controller constructor: ($log) -> $log.info 'homeController instantiated''''angularModule=ngClassify content

    JavaScript

    var ngClassify =require('ng-classify');var content ='class Home extends Controllern constructor: ($log) ->n $log.info 'homeController instantiated'';var angularModule =ngClassify(content);

    gulp-ng-classify

    $ npm install gulp-ng-classify

    Grunt

    grunt-ng-classify

    $ npm install grunt-ng-classify

    ruby-gem

    ng_classifypencilcheck维护

    $ gem install ng_classify

    Brunch

    ng-classify-brunchandrejd维护

    $ npm install ng-classify-brunch

    目录

    概述

    非常适合利用的syntax类语法。 然而,仍然有一些样板代码我们必须通过。 ng分类解决这个问题。注意: 所有示例都是有效的CoffeeScript。

    下面是使用ng分类编写控制器的方法

    classAdminextendsControllerconstructor: ($scope, someService) ->$scope.coolMethod=someService.coolMethod()

    这相当于

    angular.module('app').controller('adminController', ['$scope', 'someService', function ($scope, someService) {
     $scope.coolMethod=someService.coolMethod();
    }]);

    为什么?

    使用以下典型的AngularJS控制器声明 ( 同上面一样)

    angular.module('app').controller('adminController', ['$scope', 'someService', function ($scope, someService) {
     $scope.coolMethod=someService.coolMethod();
    }]);

    这又怎么了?

    • 应用程序 NAME,angular.module('app').controller 在声明中是必需
      • 有些消息通过使用全局变量 app.controller,这不是很好的JavaScript卫生
    • 参数名是重复的,一个用于 getter,'$scope','someService',一个用于函数参数,function ($scope, someService)
    • 根据所需的命名格式,MODULE 类型( controller ) 和 MODULE NAME ( adminController ) 具有重复性,因为本例中的后缀 controller
    • 函数是匿名( 未命名),使得调试变得更加困难
    • 通常详细

    使用以下语法编写AngularJS模块。 注:{{}} 表示占位符

    class {{appName}} extends {{Animation|Config|Controller|Directive|Factory|Filter|Provider|Run|Service}}
     constructor: ({{params}}) -># module body here

    或者

    class {{name}} extends {{App|Constant|Value}}
     constructor:->return {{value}}

    类的名称

    在AngularJS中使用CoffeeScript类的典型方法如下。

    # 203 charactersclassAdminControllerconstructor: ($scope, someService) ->$scope.coolMethod=someService.coolMethod()angular.module('app').controller'adminController', ['$scope', 'someService', AdminController]

    这相当于

    // 177 charactersangular.module('app').controller('adminController', ['$scope', 'someService', functionAdminController ($scope, someService) {
     $scope.coolMethod=someService.coolMethod();
    }]);

    有了ng分类,这就是你所需要

    # 116 charactersclassAdminextendsControllerconstructor: ($scope, someService) ->$scope.coolMethod=someService.coolMethod()

    收益

    • 移除不必要的仪式代码( angular.module('app') )
    • 在编写 MODULE 时不需要应用 NAME。 现在可以配置。
    • 通过 constructor 函数只需要一次参数。 不需要使用 array 语法使代码成为 minifiable。
    • 不需要将 MODULE NAME 与 MODULE 类型。比如的控制器 my Ctrl Ctrl Ctrl等等 suffix。
    • 函数名,使调试更加方便
    • 这个语法很简单。 消除繁琐的代码,使代码处于最前沿。

    考虑

    控制器作为语法

    AngularJS为编写和使用控制器提供了两种风格

    • $scope
    • Controller asthis

    $scope 示例

    classAdminextendsControllerconstructor: ($scope, someService) ->$scope.coolMethod=someService.coolMethod()

    $scope 示例的视图

    <divng-controller="adminController">
     <buttonng-click="coolMethod()">Cool It Down!</button>
    </div>

    this 示例

    classAdminextendsControllerconstructor: (someService) ->@coolMethod=someService.coolMethod()

    this 示例的视图

    <divng-controller="adminController as controller">
     <buttonng-click="controller.coolMethod()">Cool It Down!</button>
    </div>

    MODULE 类型

    应用

    但是,虽然没有AngularJS应用程序的类型,但它是为了一致性而被包含的。

    classAppextendsAppconstructor:->return [
     'ngAnimate''ngRoute' ]

    等于

    angular.module('app', [
     'ngAnimate',
     'ngRoute']);

    你可以能希望使用 then,语法更多地通过消除代码和缩进的需求来对代码进行 Highlight 处理。 注意:这可以用于任何CoffeeScript类。

    classAppextendsAppthenconstructor:->return [
     'ngAnimate''ngRoute']

    注意:应用程序 NAME 是通过 appName选项配置的,而不是使用类名。

    动画

    classMyCrazyFaderextendsAnimationconstructor:->return {
     enter: (element, done) -># run the animation here and call done when the animation is completecancellation= (element) -># this (optional) function will be called when the animation# completes or when the animation is cancelled (the cancelled# flag will be set to true if cancelled). }

    等于

    angular.module('app').animation('.my-crazy-fader', [functionMyCrazyFader () {
     return {
     enter:function (element, done) {
     // run the animation here and call done when the animation is completevarcancellation=function (element) {
     // this (optional) function will be called when the animation// completes or when the animation is cancelled (the cancelled// flag will be set to true if cancelled). };
     return cancellation;
     }
     };
    }]);

    配置

    classRoutesextendsConfigconstructor: ($routeProvider) -> $routeProvider
    . when'/home',
     controller:'homeController'templateUrl:'home.html'. when'/about',
     controller:'aboutController'templateUrl:'about.html'. otherwiseredirectTo:'/home'

    等于

    angular.module('app').config(['$routeProvider', functionRoutes ($routeProvider) {
     $routeProvider
    . when('/home', {
     controller:'homeController',
     templateUrl:'home.html' })
    . when('/about', {
     controller:'aboutController',
     templateUrl:'about.html' })
    . otherwise({
     redirectTo:'/home' });
    }]);

    常数

    classHttpStatusCodesextendsConstantconstructor:->return {
     '401':'Unauthorized''403':'Forbidden''404':'Not Found' }

    等于

    angular.module('app').constant('HTTP_STATUS_CODES', {
     '401':'Unauthorized',
     '403':'Forbidden',
     '404':'Not Found'});

    控制器

    最后,示例 below 使用了这个语法语法

    classHomeextendsControllerconstructor: (userService) ->@save= (username) ->userService.addUser username

    等于

    angular.module('app').controller('homeController', ['userService', functionHome (userService) {
     this.save=function (username) {
     returnuserService.addUser(username);
     };
    }]);

    指令

    classDialogextendsDirectiveconstructor:->return {
     restrict:'E'transclude:truetemplateUrl:'dialog.html' }

    等于

    angular.module('app').directive('dialog', [functionDialog () {
     return {
     restrict:'E',
     transclude:true,
     templateUrl:'dialog.html' };
    }]);

    工厂

    classGreetingextendsFactoryconstructor: ($log) ->return {
     sayHello: (name) ->$log.info name
     }

    等于

    angular.module('app').factory('Greeting', ['$log', functionGreeting ($log) {
     return {
     sayHello:function (name) {
     $log.info(name);
     }
     };
    }]);

    另一个不错的特性是能够返回

    classUserextendsFactoryconstructor: ($log) ->returnclassUserInstanceconstructor: (firstName, lastName) ->@getFullName=->"#{firstName}#{lastName}"

    用法

    user=newUser'Cary', 'Landholt'fullName=user.getFullName() # Cary Landholt

    滤波器

    classTwitterfyextendsFilterconstructor:->return (username) ->"@#{username}"

    等于

    angular.module('app').filter('twitterfy', [functionTwitterfy () {
     returnfunction (username) {
     return'@'+ username;
     };
    }]);

    提供程序

    classGreetingsextendsProviderconstructor: ($log) ->@name='default'@$get=->name=@namesayHello:->$log.info name
     @setName= (name) ->@name= name

    等于

    angular.module('app').provider('greetingsProvider', ['$log', functionGreetings ($log) {
     this.name='default';
     this.$get=function () {
     var name =this.name;
     return {
     sayHello:function () {
     return$log.info(name);
     }
     };
     };
     this.setName=function (name) {
     returnthis.name= name;
     };
    }]);

    运行

    classViewsBackendextendsRunconstructor: ($httpBackend) ->$httpBackend.whenGET(/^.*.(html|htm)$/).passThrough()

    等于

    angular.module('app').run(['$httpBackend', functionViewsBackend ($httpBackend) {
     $httpBackend.whenGET(/^.*.(html|htm)$/).passThrough();
    }]);

    电子邮件服务

    classGreetingextendsServiceconstructor: ($log) ->@sayHello= (name) ->$log.info name

    等于

    angular.module('app').service('greetingService', ['$log', functionGreeting ($log) {
     this.sayHello=function (name) {
     return$log.info(name);
     };
    }]);

    classPeopleextendsValueconstructor:->return [
     {
     name:'Luke Skywalker'age:26 }
     {
     name:'Han Solo'age:35 }
     ]

    等于

    angular.module('app').value('people',
     [
     {
     name:'Luke Skywalker',
     age:26 }, {
     name:'Han Solo',
     age:35 }
     ]
    );

    多个应用

    尽管在AngularJS应用程序中使用多个应用程序是不必要的,但是有些人仍然希望这样做。

    只需将 app NAME 作为 MODULE 类型的参数提供。

    在示例 below 中,在'公用'应用程序中创建控制器。

    classHomeextendsController('common')
     constructor: ($log) ->$log.info'homeController instantiated'

    等于

    angular.module('common').controller('homeController', ['$log', function ($log) {
     $log.info('homeController instantiated');
    })];

    API

    ngClassify ( 内容,选项)

    电子邮件内容

    必需
    类型:String
    默认值:undefined

    可能包含CoffeeScript类以转换为AngularJS模块的内容

    命令行选项

    类型:Object
    默认值:undefined

    options.appName

    类型:String
    默认值:'app'

    AngularJS应用程序的NAME

    // for exampleangular.module('app')
    options.prefix

    类型:String
    默认值:''

    为了避免潜在的冲突,可以设置moduleType前缀( 例如: options.prefix ='Ng' )

    classHomeextendsNg.Controllerconstructor: ($log) ->$log.info'homeController instantiated'
    options.animation

    类型:Object
    默认值: {format: 'spinalCase', prefix: '.'}

    options.constant

    类型:Object
    默认值:{format:'screamingSnakeCase'}

    options.controller

    类型:Object
    默认值: {format: 'camelCase', suffix: 'Controller'}

    options.directive

    类型:Object
    默认值:{format:'camelCase'}

    options.factory

    类型:Object
    默认值:{format:'upperCamelCase'}

    options.filter

    类型:Object
    默认值:{format:'camelCase'}

    options.provider

    类型:Object
    默认值:{format:'camelCase'}

    options.service

    类型:Object
    默认值: {format: 'camelCase', suffix: 'Service'}

    options.value

    类型:Object
    默认值:{format:'camelCase'}

    支持格式

    格式示范
    • 本示例 change camelCase camelCase train train train train train train train train train train train train train train train UPPERCASE UPPERCASE

    请参见 CONTRIBUTING.md

    变更日志

    请参见 CHANGELOG.md

    许可证

    请参见许可协议。


    angular  模块    classes  modules  coffee  
    相关文章