ng-classify
Advanced tools
Convert CoffeeScript classes to AngularJS modules
Write less JavaScript. Write less CoffeeScript. Write less Angular.Watch the screencast
Demo
Install with npm
$ npm install ng-classify
ngClassify = require 'ng-classify'
content = '''
class Home extends Controller
constructor: ($log) ->
$log.info 'homeController instantiated'
'''
angularModule = ngClassify content
var ngClassify = require('ng-classify');
var content = '\
class Home extends Controller\n\
constructor: ($log) ->\n\
$log.info \'homeController instantiated\'\
';
var angularModule = ngClassify(content);
$ npm install gulp-ng-classify
$ npm install grunt-ng-classify
ng_classify - maintained by pencilcheck
$ gem install ng_classify
ng-classify-brunch - maintained by andrejd
$ npm install ng-classify-brunch
AngularJS is well suited to take advantage of the CoffeeScript class syntax. However there's still a bit of boilerplate code we have to work through. ng-classify addresses this. Note: all examples are valid CoffeeScript.
Here's how you write a controller using ng-classify
class Admin extends Controller
constructor: ($scope, someService) ->
$scope.coolMethod = someService.coolMethod()
which is equivalent to
angular.module('app').controller('adminController', ['$scope', 'someService', function ($scope, someService) {
$scope.coolMethod = someService.coolMethod();
}]);
Take the following typical AngularJS controller declaration (same as above)
angular.module('app').controller('adminController', ['$scope', 'someService', function ($scope, someService) {
$scope.coolMethod = someService.coolMethod();
}]);
So what's wrong with this?
angular.module('app').controller, is required within the declaration
app.controller, which is not good JavaScript hygiene'$scope', 'someService', and one for the function parameters, function ($scope, someService)
controller) and module name (adminController) have duplication, due to the suffixed controller in this exampleWrite AngularJS modules using the following syntaxes.
NOTE: {{}} denotes placeholders
class {{appName}} extends {{Animation|Config|Controller|Directive|Factory|Filter|Provider|Run|Service}}
constructor: ({{params}}) ->
# module body here
or
class {{name}} extends {{App|Constant|Value}}
constructor: ->
return {{value}}
The typical way to use CoffeeScript classes with AngularJS is as follows.
# 203 characters
class AdminController
constructor: ($scope, someService) ->
$scope.coolMethod = someService.coolMethod()
angular.module('app').controller 'adminController', ['$scope', 'someService', AdminController]
which is equivalent to
// 177 characters
angular.module('app').controller('adminController', ['$scope', 'someService', function AdminController ($scope, someService) {
$scope.coolMethod = someService.coolMethod();
}]);
with ng-classify, this is all you need
# 116 characters
class Admin extends Controller
constructor: ($scope, someService) ->
$scope.coolMethod = someService.coolMethod()
angular.module('app'))constructor function. No need for the array syntax to make your code minifiable.bare: false CoffeeScript compilation option. see CoffeeScript UsageAngularJS provides two styles for writing and consuming controllers
$scopethis with Controller as$scope example
class Admin extends Controller
constructor: ($scope, someService) ->
$scope.coolMethod = someService.coolMethod()
view for $scope example
<div ng-controller="adminController">
<button ng-click="coolMethod()">Cool It Down!</button>
</div>
this example
class Admin extends Controller
constructor: (someService) ->
@coolMethod = someService.coolMethod()
view for this example
<div ng-controller="adminController as controller">
<button ng-click="controller.coolMethod()">Cool It Down!</button>
</div>
Although there is no AngularJS App module type, it is included for consistency.
class App extends App
constructor: ->
return [
'ngAnimate'
'ngRoute'
]
equivalent to
angular.module('app', [
'ngAnimate',
'ngRoute'
]);
You may wish to use the then CoffeeScript syntax to highlight your code even more by eliminating the need for extra lines of code and indentation, as follows. Note: this can be leveraged for any CoffeeScript class.
class App extends App then constructor: -> return [
'ngAnimate'
'ngRoute'
]
Note: the app name is configured via the appName option, not the class name
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).
}
equivalent to
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'
equivalent to
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'
}
equivalent to
angular.module('app').constant('HTTP_STATUS_CODES', {
'401': 'Unauthorized',
'403': 'Forbidden',
'404': 'Not Found'
});
The example below uses the this syntax
class Home extends Controller
constructor: (userService) ->
@save = (username) ->
userService.addUser username
equivalent to
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'
}
equivalent to
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
}
equivalent to
angular.module('app').factory('Greeting', ['$log', function Greeting ($log) {
return {
sayHello: function (name) {
$log.info(name);
}
};
}]);
Another nice feature is the ability to return classes
class User extends Factory
constructor: ($log) ->
return class UserInstance
constructor: (firstName, lastName) ->
@getFullName = ->
"#{firstName} #{lastName}"
usage
user = new User 'Cary', 'Landholt'
fullName = user.getFullName() # Cary Landholt
class Twitterfy extends Filter
constructor: ->
return (username) ->
"@#{username}"
equivalent to
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
equivalent to
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()
equivalent to
angular.module('app').run(['$httpBackend', function ViewsBackend ($httpBackend) {
$httpBackend.whenGET(/^.*\.(html|htm)$/).passThrough();
}]);
class Greeting extends Service
constructor: ($log) ->
@sayHello = (name) ->
$log.info name
equivalent to
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
}
]
equivalent to
angular.module('app').value('people',
[
{
name: 'Luke Skywalker',
age: 26
}, {
name: 'Han Solo',
age: 35
}
]
);
Although using multiple apps in an AngularJS application is unnecessary, some may still wish to do so.
Simply provide the app name as a parameter to the module type.
In the example below, a Controller is created within the 'common' app.
class Home extends Controller('common')
constructor: ($log) ->
$log.info 'homeController instantiated'
equivalent to
angular.module('common').controller('homeController', ['$log', function ($log) {
$log.info('homeController instantiated');
})];
Required
Type: String
Default: undefined
The content that may contain CoffeeScript classes to convert to AngularJS modules
Type: Object
Default: undefined
Type: String
Default: 'app'
The name of the AngularJS app
// for example
angular.module('app')
Type: String
Default: ''
To avoid potential collisions, the moduleType prefix may be set (ex: options.prefix = 'Ng')
class Home extends Ng.Controller
constructor: ($log) ->
$log.info 'homeController instantiated'
Type: Object
Default: {format: 'spinalCase', prefix: '.'}
Type: Object
Default: {format: 'screamingSnakeCase'}
Type: Object
Default: {format: 'camelCase', suffix: 'Controller'}
Type: Object
Default: {format: 'camelCase'}
Type: Object
Default: {format: 'upperCamelCase'}
Type: Object
Default: {format: 'camelCase'}
Type: Object
Default: {format: 'camelCase', suffix: 'Provider'}
Type: Object
Default: {format: 'camelCase', suffix: 'Service'}
Type: Object
Default: {format: 'camelCase'}
| Format | Example |
|---|
See CONTRIBUTING.md
See CHANGELOG.md
See LICENSE
FAQs
Compile CoffeeScript classes to AngularJS modules
The npm package ng-classify receives a total of 409 weekly downloads. As such, ng-classify popularity was classified as not popular.
We found that ng-classify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.