angularjs with coffeescript

[Freewind]

I found backbone.js is very easy to use with coffeescript, because we can create `class` to extend Backbone.Model/Controller/View:

    class MyModel extends Backbone.Model

        initialize: ->

            # ...

        

    class MyView extends Backbone.View

         # ...

But for angularjs, angularjs is not that usefull:

     function MyCtrl($scope) {

     }

The `$scope` is injected by angularjs, and is and `object`. We can't use `extends` with it, to organize codes as classes.

How can I benefit from coffeescript with angularjs?

[Misko Hevery]

no coffeescript expert, but I think this is what you are looking for

class MyController

  constructor: (@$scope) ->

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d-UMs0VATOoJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Freewind]

But when I want to add field or methods to $scope, I have to write:

    @$scope.name = "..."

    @$scope.changeName = (name) ->

          @$scope.name = name

If I can use `extends`, I can write it like:

    class MyScope extends Scope

        changeName: (name) ->

           @name = name

The later one is much clear than first.

  constructor: (@$scope) ->

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[ThomasBurleson]

Take a look at the CafeTownsend with AngularJS demo/source.

It uses Coffeescript with 

• the namespace feature
  
• angular.bind to set scopes appropriately for private/protected methods
  
• use `extends` to sublcass
• use `namespace` to configure packages easily
• use static methods, enumerators, aliases, etc.

Here is an SessionController.coffee used to manage logout() features

Warning. Once you start using CoffeeScript with AngularJS you will never want to go back [to handwriting JS].

I highly recommend a build script that you run to manually transcompile the JS. 

That script can also `join` all the js code into a single deploy file.

Here is a sample script also. CakeFile

Hope this helps. Good luck.

- ThomasB

[Misko Hevery]

Think of $scope as the external part which view sees, and think of the controller as your private state.

If you would prefer to not have private state for the sake of simplicity you can do this:

class MyController

  constructor: (@$scope) ->

    @$scope.my = this;

    this.name = 'world';

then in the view you can do:

{{my.name}}

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/O4uZ5xJXPJcJ.

To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

[Misko Hevery]

Also on related note.

Having your controller be forced to inherit from scope is a bad idea. the reason is that you only have one inheritance hierarchy and it would be mean for the framework to assume that it is the most important one, as it would prevent you from creating your own inheritance. 

A good (bad) real world example of this are java servlets. They force you to inherit from a servlet and this causes all kinds of problems.

-- misko

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/HLtudAoYEaUJ.

[Vojta Jína]

One can think of controller as a function that decorates $scope, more than a "class".

I would write something like this:

Controller = ($scope) ->

  # call parent's constructor

  BaseController $scope

  someLocalFunction = (a, b, c) ->

    a + b

  # define a method on scope

  $scope.method = (a, b) ->

    someLocalFunction a, b

  #define a property on scope

  $scope.prop = 10

  this

V.

[ThomasBurleson]

I found that thinking of controllers as three (3) things is very helpful:

1. $scope decorators
   
2. classes with additional, core functional that is not directly available on the $scope
   
3. classes with services and models injected, but hidden from $scope

[Peter Bacon Darwin]

+1 for this approach. I love coffeescript and angular and while coffeescript's classes are tempting to someone coming from a classical background the functional approach suggested here is really terse and powerful providing easier hiding of private stuff and saves on unnecessary binding with => and @.
By the way, now you can create controllers in modules you no longer need to hack coffeescript controllers onto the global namesake with @ all the time.
Pete
...from my mobile.