> npm > ng-classify中文文档|ng-classify js中文教程|解析

ng-classify中文文档|ng-classify js中文教程|解析

npm npmdoc 2年前 (2021-12-25) 468次浏览

ng-classify中文文档|ng-classify js中文教程|解析

安装命令：npm i ng-classify

ng-classify

执照
版本
构建状态
依赖状态

将 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 Controller\n\
    constructor: ($log) ->\n\
        $log.info \'homeController instantiated\'\
';
 
var angularModule = ngClassify(content);

吞咽

gulp-ng-分类

$ npm install gulp-ng-classify

咕噜声

咕噜咕噜的分类

$ npm install grunt-ng-classify

红宝石

ng_classify – 由pencheck维护

$ gem install ng_classify

早午餐

ng-classify-brunch – 由andrejd维护

$ npm install ng-classify-brunch

目录

概述

AngularJS非常适合利用CoffeeScript 类语法。然而，我们仍然需要处理一些样板代码。ng-classify 解决了这个问题。 注意：所有示例都是有效的 CoffeeScript。

以下是使用 ng-classify 编写控制器的方法

class Admin extends Controller
    constructor: ($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();
}]);

那么这有什么问题呢？

  • angular.module('app').controller声明中需要
    应用程序名称

    • 有些人通过使用全局变量来避免这种情况app.controller，这不利于 JavaScript 卫生
  • 参数名称重复，一个用于 getter，'$scope', 'someService'一个用于函数参数，function ($scope, someService)
    • 这种重复是使模块可缩小所必需的
    • 有些人通过使用ngmin 来避免这种情况
  • 根据所需的命名格式，模块类型 ( controller) 和模块名称 ( 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}}

CoffeeScript 类

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

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

这相当于

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

使用 ng-classify，这就是你所需要的

# 116 characters 
class Admin extends Controller
    constructor: ($scope, someService) ->
        $scope.coolMethod = someService.coolMethod()

好处

  • 删除不必要的礼仪代码 ( angular.module('app'))
  • 编写模块时不需要应用程序名称。它现在是可配置的。
  • 通过constructor函数只需要一次参数。无需使用数组语法来缩小代码。
  • 无需在模块名称后添加模块类型，例如我的Controller、我的Ctrl等。
  • 函数命名，调试更方便
  • 语法可以说是简洁的。通过消除杂乱，将您的代码带到最前沿。

注意事项

  • 为了避免使用全局变量，建议使用bare: falseCoffeeScript 编译选项。请参阅CoffeeScript 用法

控制器作为语法

AngularJS 提供了两种风格来编写和消费控制器

  1. $scope
  2. this 和 Controller as

$scope 例子

class Admin extends Controller
    constructor: ($scope, someService) ->
        $scope.coolMethod = someService.coolMethod()

$scope例如查看

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

this 例子

class Admin extends Controller
    constructor: (someService) ->
        @coolMethod = someService.coolMethod()

this例如查看

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

模块类型

应用程序

虽然没有 AngularJS App 模块类型，但为了一致性而包含它。

class App extends App
    constructor: ->
        return [
            'ngAnimate'
            'ngRoute'
        ]

相当于

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

您可能希望使用thenCoffeeScript 语法通过消除对额外代码行和缩进的需要来更加突出您的代码，如下所示。 注意：这可以用于任何 CoffeeScript 类。

class App extends App then constructor: -> return [
    'ngAnimate'
    'ngRoute'
]

注意：应用名称是通过appName选项配置的，而不是类名

动画片

class MyCrazyFader extends Animation
    constructor: ->
        return {
            enter: (element, done) ->
                # run the animation here and call done when the animation is complete 
 
                cancellation = (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', [function MyCrazyFader () {
    return {
        enter: function (element, done) {
            // run the animation here and call done when the animation is complete
 
            var cancellation = 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;
        }
    };
}]);

配置

class Routes extends Config
    constructor: ($routeProvider) ->
        $routeProvider
        .when '/home',
            controller: 'homeController'
            templateUrl: 'home.html'
        .when '/about',
            controller: 'aboutController'
            templateUrl: 'about.html'
        .otherwise
            redirectTo: '/home'

相当于

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

持续的

class HttpStatusCodes extends Constant
    constructor: ->
        return {
            '401': 'Unauthorized'
            '403': 'Forbidden'
            '404': 'Not Found'
        }

相当于

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

控制器

下面的例子使用了这个语法

class Home extends Controller
    constructor: (userService) ->
        @save = (username) ->
            userService.addUser username

相当于

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

指示

class Dialog extends Directive
    constructor: ->
        return {
            restrict: 'E'
            transclude: true
            templateUrl: 'dialog.html'
        }

相当于

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

工厂

class Greeting extends Factory
    constructor: ($log) ->
        return {
            sayHello: (name) ->
                $log.info name
        }

相当于

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

另一个不错的功能是能够返回类

class User extends Factory
    constructor: ($log) ->
        return class UserInstance
            constructor: (firstName, lastName) ->
                @getFullName = ->
                    "#{firstName} #{lastName}"

用法

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

筛选

class Twitterfy extends Filter
    constructor: ->
        return (username) ->
            "@#{username}"

相当于

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

提供者

class Greetings extends Provider
    constructor: ($log) ->
        @name = 'default'
 
        @$get = ->
            name = @name
 
            sayHello: ->
                $log.info name
 
        @setName = (name) ->
            @name = name

相当于

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

跑

class ViewsBackend extends Run
    constructor: ($httpBackend) ->
        $httpBackend.whenGET(/^.*\.(html|htm)$/).passThrough()

相当于

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

服务

class Greeting extends Service
    constructor: ($log) ->
        @sayHello = (name) ->
            $log.info name

相当于

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

价值

class People extends Value
    constructor: ->
        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 应用程序中使用多个应用程序是不必要的，但有些人可能仍然希望这样做。

只需提供应用程序名称作为模块类型的参数。

在下面的示例中，在“通用”应用程序中创建了一个控制器。

class Home extends Controller('common')
    constructor: ($log) ->
        $log.info 'homeController instantiated'

相当于

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

应用程序接口

ngClassify（内容，选项）

内容

所需

类型：String

默认：undefined

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

选项

类型：Object

默认：undefined

选项.appName

类型：String

默认：'app'

AngularJS 应用程序的名称

// for example
angular.module('app')
选项.前缀

类型：String

默认：''

为了避免潜在的碰撞，在moduleType前缀可以设置（例如：options.prefix = 'Ng'）

class Home extends Ng.Controller
    constructor: ($log) ->
        $log.info 'homeController instantiated'
选项.动画

类型：Object

默认：{format: 'spinalCase', prefix: '.'}

options.constant

类型：Object

默认：{format: 'screamingSnakeCase'}

选项.控制器

类型：Object

默认：{format: 'camelCase', suffix: 'Controller'}

选项指令

类型：Object

默认：{format: 'camelCase'}

options.factory

类型：Object

默认：{format: 'upperCamelCase'}

选项过滤器

类型：Object

默认：{format: 'camelCase'}

选项.provider

类型：Object

默认：{format: 'camelCase', suffix: 'Provider'}

选项.服务

类型：Object

默认：{format: 'camelCase', suffix: 'Service'}

选项值

类型：Object

默认：{format: 'camelCase'}

支持的格式

格式 例子
* 没变化
骆驼香烟盒 骆驼香烟盒
小驼峰 小驼峰
小写 小写
尖叫蛇案 SCREAMING_SNAKE_CASE
蛇壳 蛇案例
脊柱病例 脊椎病例
火车箱 火车案例
驼峰大写 驼峰大写
大写 大写

贡献

参见CONTRIBUTING.md

变更日志

参见CHANGELOG.md

执照

见许可证

npm地址: https://www.npmjs.com/package/ng-classify
项目主页地址：https://github.com/CaryLandholt/ng-classify
项目仓库地址: https://github.com/CaryLandholt/ng-classify
项目issue地址: https://github.com/CaryLandholt/ng-classify/issues
项目issue数量: 7

项目贡献人员列表：
carylandholt

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：ng-classify中文文档|ng-classify js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}