Angular meets the Coffeescript-ngcomponent package

Coffeescript is a JavaScript-based, extensible, compact language that needs to be compiled into JavaScript and then run with a browser or Nodejs platform. JavaScript has been in a hurry for 10 days due to business reasons, so there are many drawbacks. But as the JavaScript Digest says: JavaScript also has a gorgeous heart, and if we can avoid the "pit" in JavaScript and use its essence, it will be a very addictive language. And Coffeescript is trying to use this part of the concise way to showcase this part of JavaScript's excellent essence, to avoid the "pit" that bothers JavaScript developers. Coffeescript draws on the two languages of Python and Ruby, functional style, duck type, and oo style as a simple language.

Angularjs has been the front-end MVVM framework since 2012, introducing module, bidirectional binding, Dependency injection, Directive, MVVM and other mechanisms. See other blog posts for more information. What will happen when angular meets the language of Coffeescript?

Let's take a look at this. The author uses coffeescript to angular1.x code after the encapsulation effect.

 # # Controllerclass Democontroller extends ngcomponent @inject ' demoservice ' @controller ' Ng.green.demo ' __i NIT__: + @demoService. Getlang () then (data) and @lang = data # # service class Demoservice extends ngcom Ponent @inject ' $q ' @service ' Ng.green.demo ' getlang: = = data = data: [' JavaScript ', ' coffeescript ', ' Type ' Script ', ' ES6 '] @ $q. When (data) # # directive Controller class Jsondumpcontroller extends Ngcomponent @inject ' $log ' @controller ' Ng.green.demo ' __init__: = @ $log. info (' This is form Directive controller ') # # directive Class Jsondumpdirective extends Ngcomponent @inject ' $timeout ', ' $http ', ' $cacheFactory ', ' $log ' @directive ' NG.GREEN.D Emo ' Restrict: ' EA ' templateurl: '/jsondump.html ' scope:json: ' = ' controller: ' Jsondumpcontroller ' Link: (Scope , elm, iattrs) = @ $timeout (() = @ $log. Info ' $timeout & $log Injector worked on link function! '), 100

With the above definition of controller, service, and directive, we can use the following methods:

<div ng-app="ng.green.demo" ng-controller="DemoController as demo" class="container">  <json-dump json="demo.lang"></json-dump>  <script type="text/ng-template" id="/jsonDump.html">   

I wonder how you feel about the code like crossing? is not more simplified, semantically, a little ng feeling. The author also intends to imitate Python, such as init as the initialization method. Here each class will self-declare the component type, as well as declarative injection, module self-registration.

No matter how it looks, let me see what Ngcomponent has done.

Class Ngcomponent @controller: (ModuleName, moduleresolver), componentname = @$ $componentName (true) Angu Lar.module (ModuleName, Moduleresolver). Controller componentname, @ @service: (modulename, Moduleresolver) ComponentName = @$ $componentName () angular.module (ModuleName, moduleresolver). Service ComponentName, @ @direct Ive: (modulename, moduleresolver), componentname = @$ $componentName (). Replace (' Directive ', ') Directiveclas s = @ directivefactory = (args ...)-new Directiveclass (args ...) Directivefactory. $inject = @ $inject angular.module (modulename, moduleresolver). Directive ComponentName, DIRECTIVEFAC Tory @$ $componentName: (Uppercasefirstletter = False) # regex for IE componentname = @name | | @toString (). Match (/function\s* (. *?) \(/)? [1] If uppercasefirstletter firstletter = componentname.substr (0,1). toUpperCase () Else firstletter = ComponentnaME.SUBSTR (0,1). toLowerCase () (componentname = "#{firstletter}#{componentname.substr (1)}") unless Uppercasefirstletter componentname @inject: (args ...) @ $inject = args constructor: (args ...) For key, the index in @constructor. $inject @[key] = Args[index] @__init__? ()

The controller, service, and Directive registration interfaces are defined in Ngcomponent, where either the declaration creation module or the component types can be registered on the declared module. For component naming, the Convention is better than the configuration, they are based on the class type, the controller is named after the uppercase Camel, the service is the first lowercase hump named, Directive will remove the directive tag and the first letter lowercase registration.

It also declares the @inject method, which allows us to define the $INEJCT attribute on top of the type, angular the injection declaration. For angular injection services, they are added to the current class instance object in the constructor. After the dependency is added, the object initialization method is also called, which simulates the Python init.

The demo effect can be viewed in Codepen http://codepen.io/greengerong/pen/EVVQZg?editors=101:

See the Pen Angular meet Coffeescript-Green (@greengerong) on Codepen.

The author's whim, I hope to give readers some inspiration, perhaps you have a better DSL package, welcome to communicate.

Angular meets the Coffeescript-ngcomponent package