I want to do something that I think will be a good way to use "Coffee Script Class" and Angular JS structures.
<!doctype html>
<html ng-app>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Main Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/coffee.js"></script>
</head>
<body>
<div ng-controller="MainClass" style="margin-left:10px">
<h2>All todos: {{test()}}</h2>
</div>
</body>
</html>
Notice than I setup the DIV ng-controller as MainClass and binding test() method inside a H2 HTML tag.
class AngularJSController
constructor: ($scope, $main) ->
$scope.test = MainClass.prototype.test
MainClass.test = MainClass.prototype.test
$main.test = MainClass.prototype.test
test = MainClass.prototype.test
#test = MainClass.prototype.test
console.log #test
class MainClass extends AngularJSController
constructor: ($scope) ->
super $scope, this
setTimeout (->
console.log test()
), 1000
test();
test: -> 'aloha!'
In AngularJSController constructor I've tried all forms I imagined to setup my super class method TEST on MainClass scope without success.
I'm trying to do it because I want to work with classes just on my Angular JS controllers and components.
Problems I already fell:
If I try to use #test() instead of test() inside setTimeout, jQuery already replaced the this property with a kind of JQuery Window Object.
setTimeout (-> console.log #test()), 1000
I don't know what really the scope of test() calls, if a place this (or # cause Coffee), isn't the same of place anything.
test() != this.test() != #.test() # the first scope isn't the same scope of last two calls
I have used the following syntax:
app = angular.module 'myapp', []
class MySimpleCtrl
#$inject: ['$scope']
constructor: (#scope) ->
#scope.demo = 'demo value'
#scope.clearText = #clearText
clearText: =>
#scope.demo = ""
app.controller 'MySimpleCtrl', MySimpleCtrl
angular.bootstrap document, ['myapp']
Take a look at this jsFiddle:
http://jsfiddle.net/jwcMA/
Here's a generic approach with a base class:
http://www.devign.me/angular-dot-js-coffeescript-controller-base-class/
BaseCtrl.coffee
# dependency - Function.prototype.bind or underscore/lodash
app = angular.module 'someApp'
class #BaseCtrl
#register: (app, name) ->
name ?= #name || #toString().match(/function\s*(.*?)\(/)?[1]
app.controller name, #
#inject: (args...) ->
#$inject = args
constructor: (args...) ->
for key, index in #constructor.$inject
#[key] = args[index]
for key, fn of #constructor.prototype
continue unless typeof fn is 'function'
continue if key in ['constructor', 'initialize'] or key[0] is '_'
#$scope[key] = fn.bind?(#) || _.bind(fn, #)
#initialize?()
BookFormCtrl.coffee
app = angular.module 'someApp'
class BookFormCtrl extends BaseCtrl
#register app
# list of dependencies to be injected
# each will be glued to the instance of the controller as a property
# e.g. #$scope, #Book
#inject '$scope', 'Book'
# initialize the controller
initialize: ->
#$scope.book =
title: "Hello"
# automatically glued to the scope, with the controller instance as the context/this
# so usable as <form ng-submit="submit()">
# methods that start with an underscore are considered as private and won't be glued
submit: ->
#Book.post(#$scope.book).then =>
#$scope.book.title = ""
setTimeout isn't related in any way to jQuery, but function passed to setTimeout is indeed executed in the global(window) context. Use fat arrow to explicitly bind it to the current scope.
http://coffeescript.org/#fat_arrow
setTimeout (=>
console.log #test()
), 1000
Sorry, I'm not sure what are you asking about.
Angular does supports Coffescript classes!, for the most part.
I've found issues with using RequireJs, expecting a function instead of an object.
take a look here :
http://softwareninjaneer.com/blog/writing-angularjs-controllers-coffeescript-classes/
I didn't have luck with #malix's answer although it did lead me to a solution that works. Here's how I'm doing mine:
'use strict'
class ImportsCtrl
constructor: ($scope, Import) ->
Import.query().then (imports) -> $scope.imports = imports
angular.module("greatDealsApp").controller "ImportsCtrl", ImportsCtrl
And here's a contrived example of turning $scope into a property of ImportsCtrl:
'use strict'
class ImportsCtrl
constructor: ($scope, Import) ->
#scope = $scope
#Import = Import
#loadImports()
loadImports: =>
#Import.query().then (imports) => #scope.imports = imports
angular.module("greatDealsApp").controller "ImportsCtrl", ImportsCtrl
And I don't know for sure if this matters, but I'm using ng-annotate.
It's impossible. You can't set a controller as an object (MainClass), because AngularJS ensures that the controller is a function.
You need to customize AngularJS to do it. I think it's not a good idea.
References
https://github.com/angular/angular.js/blob/master/src/ng/controller.js
https://github.com/angular/angular.js/blob/master/src/Angular.js
Related
If an object is created in tag-a how can it be accessed in tag-b?
tag-a.tag
<tag-a>
<script>
const o = {data: () => {return "something" }}
</script>
</tag-a>
tag-b.tag
<tag-b>
<script>
// access object o created in tag-a
</script>
</tag-b>
I've tried using a mixin but I think this would need to be registered in a parent tag?
If they share a parent you can do something like this, but is not recommended as the tags will get coupled.
<parent>
<tag-a></tag-a>
<tag-b></tag-b>
</parent>
<tag-a>
<script>
this.o = 'Hi bro'
</script>
</tag-a>
<tag-b>
<span>{this.parent.tags.tag-a.o}</span>
</tag-b>
More info about simple tag communication:
http://vitomd.com/blog/coding/tag-communication-in-riot-js-part-1/
A better approach will be to communicate using the observable pattern.
First you create a store.js
//Store.js
var Store = function(){
riot.observable(this)
}
Then in the index.html before mounting the tags you add the store to the global riot variable, so it will be accessible from any tag
<script type="text/javascript">
riot.store = new Store()
riot.mount('* ')
</script>
Then in tag-a you can trigger to send the info
send_info() {
riot.store.trigger('send_to_b', 'Hello')
}
And in tag-b receive the message
riot.store.on('send_to_b', function(greeting) {
self.hi = greeting
})
More info: http://vitomd.com/blog/coding/tag-communication-in-riot-js-part-2/
Hello there Grammarians,
The documentation only shows:
flashing("success")
Do failures never happen if I use play? I've tried "failure" & "error" they don't do anything
You can either pass in a Flash instance or tuples of Strings. It doesn't have to be a specific String. Important is that you handle whatever you stick into the flash scope.
consider this example (Play 2.3.4):
Application.scala
package controllers
import play.api.mvc._
object Application extends Controller {
def index = Action { implicit req =>
Redirect(routes.Application.flash()).flashing("something" -> "show this text")
}
def flash = Action { implicit req =>
Ok(views.html.index("Flash!"))
}
}
index.scala.html
#(title: String)(implicit flash: Flash)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
</head>
<body>
<h1>#flash.get("something")</h1>
</body>
</html>
routes
# Home page
GET / controllers.Application.index
GET /flash controllers.Application.flash
I have this angular app and controller modules defined as follows:
var myTasks = angular.module('myTasks', [
'ngRoute',
'myTasksControllers'
]);
var myTasksControllers = angular.module('myTasksControllers',[]);
I also have:
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/lodash.min.js"></script>
<script src="js/lib/restangular.min.js"></script>
<script src="js/app.js"></script>
And I am trying to inject rectangular into my controller like so:
myTasksControllers.controller('ProjectsController', ['$scope','rectangular',
function ($scope, Rectangular) {
...
...
}
]);
But it keeps telling module not defined or something. To be precise:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=rectangularProvider%20%3C-%20rectangular
at Error (<anonymous>)
Rectangular: https://github.com/mgonto/restangular#how-do-i-add-this-to-my-project
You have to inject restangular module into your myTasks module first. Like this:
var myTasks = angular.module('myTasks', [
'restangular',
'ngRoute',
'myTasksControllers'
]);
Than, you have to inject Restangular into your controller:
myTasksControllers.controller('ProjectsController', ['$scope','Restangular',
function ($scope, Restangular) {
...
...
}
]);
P.S.: Note that you have spelled it "rectangular" in your question :)
I would like to create a simple demo page that compiles CoffeeScript in the browser with the extras/coffee-script.js. However, when I add this source and write my CoffeeScript within my text/coffeescript tags it is compiled in a closure so I don't have access to the CoffeeScript functions in the browser console.
In order to do so, I would need to do
<script type="text/coffeescript">
window.learning = ->
"I am learning coffeescript"
</script>
<script type="text/javascript" src="js/vendors/coffee-script.js"></script>
This is not ideal for my presentation. I would like to add the bare = true option so that I have access to the functions in browser console. Where in the extras/coffee-script.js do I add this option?
Here is the compiled js:
(function() {
window.learning = function() {
return "I am learning coffeescript";
};
})
I have this example.coffee:
learning = ->
"I am learning coffeescript"
Running the compiler from the command line with the following:
coffee -c --bare example.coffee
It is compiled to this example.js:
// Generated by CoffeeScript 1.6.2
var learning;
learning = function() {
return "I am learning coffeescript";
};
This will be globally available from the console.
The below code prints out to the console: I am learning coffeescript
Note: window.learning is available in the console on the global scope.
<html>
<body>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.1.2/coffee-script.min.js"></script>
<script type="text/coffeescript">
window.learning = ->
"I am learning coffeescript"
</script>
<script type="text/javascript">
setTimeout(function(){ console.log(window.learning()); }, 1000);
</script>
</body>
</html>
Where ever you call the CoffeeScript.compile function, you can pass in the --bare option, much like the command line:
CoffeeScript.compile(source, { bare: true });
If you look in the minified source, at the end you will see this:
CoffeeScript.run(a.innerHTML,s)
Where a is the <script> element, (so a.innerHTML is the source) and s is the options, which is then passed through run into compile:
CoffeeScript.run = function (e,t){return null==t&&(t={}),t.bare=!0,Function(compile(e,t))()}
As you can see, t.bare is set to !0 (aka true), so bare is already set!
I'm running Sinatra with Backbone.js. I'm trying to split up my models, views, etc so they aren't all lumped into a single JS file. Right now I have the following.
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script src="scripts/underscore-min.js"></script>
<script src="scripts/jquery-1.5.min.js"></script>
<script src="scripts/backbone-min.js"></script>
<script src="scripts/models.js"></script>
...
models.js
Models = {
var Event = Backbone.Model.extend({
});
var Events = Backbone.Collection.extend({
url: '/events',
model: Event
});
};
So models.js expects that Backbone.js has been loaded, which it should have been based on index.html, however, I'm getting a JavaScript error in models.js where I reference Backbone.Model.
Any ideas on what I'm missing here?
That isn't valid javascript. Something like this is more likely to work :
Models = {}
Models.Event = Backbone.Model.extend({
});
Models.Events = Backbone.Collection.extend({
url: '/events',
model: Event
});