backbone 1.1.2, marionette, requirejs, min version - backbone.js

Need help.
https://github.com/serheyShmyg/requirejs-jquery-backbone
This is my boilerplate.
Try install it.
Before install:
1. change backbone version from 1.1.0 to 1.1.2(latest with amd wrapper); in bower.json.
2. app/jade/layouts/_footer.jade - uncoment Production version, and comment Development.
Like this
//-Production
script(src="../js/lib/requirejs/require.js", data-main="../js/main.min.js")
//-Development
//-script(src="../js/lib/requirejs/require.js", data-main="../js/config.js")
Install: npm install
Go localhost:8080/markup/ and get in console
Uncaught ReferenceError: Backbone is not defined backbone.marionette.js:35
Can't understand why backbone loading with amd wrapper so long, and marionette can't find Backbone global var.
Its only with backbone 1.1.2 or 1.1.1, this version got AMD wrapper.
And only in min. version of js.
Guys help!
Thank's!

There was a pretty big change made in Backbone from 1.1.0 to 1.1.1: it registers itself as an AMD module (see http://backbonejs.org/#changelog).
To get your optimization working, you probably need to set the wrapShim option to true (see http://requirejs.org/docs/api.html).
You can see an example (from my book on using RequireJS) here: https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/blob/master/assets/js/build.js#L7

Related

AngularJS ngSanitize Error on 1.7.0

I've got pretty much this error:
AngularJS ngSanitize Error
short version: "lowercase is not a function".
While my application has AngularJS enforced to 1.4.9, we didn't enforce angular-sanitize, so it resolves to 1.7.0 and on that version of AngularJS lowercase function doesn't exist anymore, producing an error.
Probably by forcing angular-sanitize to a fixed version would fix that, but I want to go beyond fixing it and understand what is causing the problem and why, because I find a few inconsistencies.
AngularJS is forced to 1.4.9. bower-components folder holds this version, build folder after compiling also holds this version, developer panel on Chrome show only this version is fetched. This version does have lowercase method.
Angular-sanitize has angular 1.7.0 as a dependency, but it's never downloaded, never. Not in any single folder or subfolder on the entire project, not at compiling, not from Chrome either. So I guess the only angular.js he's got access to is 1.4.9, which does have lowercase method.
I don't quite understand why then "lowercase is not a function" error appears if the only available angular.js still has that method. Also I don't understand why angular-sanitize 1.7.0 demanding angular 1.7.0 uses non-existing methods on AngularJS 1.7.0 (Angular developers mistake? but I find hard to believe it.)
Probably sanitize is downloading and accessing angular 1.7.0 somehow, but I would like to know how. Just out of curiosity. And also to confirm if this is an angular developers mistake or if there's something I've missed.
It is explained in the official Angular 1.6 to 1.7 Migration Guide:
Due to 1daa4f, the helper functions angular.lowercase and angular.uppercase have been removed.
These functions have been deprecated since 1.5.0. They are internally used, but should not be exposed as they contain special locale handling (for Turkish) to maintain internal consistency regardless of user-set locale.
Developers should generally use the built-ins toLowerCase and toUpperCase or toLocaleLowerCase and toLocaleUpperCase for special cases.
Further, we generally discourage using the angular.x helpers in application code.

Backbone 1.1.2 with lodash 3

Lodash 4 claim to work with Backbone >= 1.3.0
we are still working with Backbone 1.1.2 - what are our options? currently we use a custom build of lodash 1.2.1.
Is lodash v3 is compatible with that version?
Thanks!
jdalton (the main contributor to lodash) claims that it should just work (i.e. lodash 3 is compatible with backbone 1.1.2). so, in regards to the backbone code, everything should be fine.
see this comment on a github issue that poses the same question as yours.
regardless, you should check out lodash's official docs on compatibility warnings for version 3, and update your code wherever necessary.

Angular not working correctly with Meteor 1.3.1

I am following www.angular-meteor.com tutorial on a windows computer.
But when I run meteor in console I only see:
A blank screen besides socially...
So it seems like some angular packages does not work with Meteor 1.3.1.
Here is output from meteor list:
accounts-password 1.1.7 Password support for accounts
angular 1.3.9_2 Everything you need to use Angu...
angularui:angular-google-maps 2.3.2 angular-google-maps (official)
angularui:angular-ui-bootstrap 0.13.0 Native AngularJS (Angular) direc...
angularui:angular-ui-router 0.2.15 angular-ui-router (official): Fl...
angularutils:pagination 0.9.1_2 Magical automatic pagination fo...
check 1.1.3 Check whether a value matches a p...
dotansimha:accounts-ui-angular 0.0.4 AngularJS wrapper for Meteor's Ac...
email 1.0.11 Send email messages
es5-shim 4.5.9 Shims and polyfills to improve EC...
jquery 1.11.7 Manipulate the DOM using CSS sel...
less 2.5.7 Leaner CSS language
meteor-base 1.0.3 Packages that every Meteor app needs
mobile-experience 1.0.3 Packages for a great mobile user ...
mongo 1.1.6 Adaptor for using MongoDB and Min...
reactive-var 1.0.8 Reactive variable
standard-minifier-css 1.0.5 Standard css minifier used with M...
standard-minifier-js 1.0.5 Standard javascript minifiers use...
tmeasday:publish-counts 0.7.3 Publish the count of a cursor, in...
tracker 1.0.12 Dependency tracker to allow reac...
twbs:bootstrap 3.3.6 The most popular front-end framew...
For example angularui:angular-ui-router seems not be working. But it works with meteor 1.2 version.
Is there someone out there that have the same problem? Maybe a solution as well?
Best Regards
EDIT
Removing dotansimha:accounts-ui-angular resulted in that I can see the map and search box. But The app is still broken. No parties are shown, pagination does not work and so on... Any ideas how to fix it?
I think I got it working now:
meteor list
accounts-password 1.1.7 Password support for accounts
angular-meteor-auth 1.0.1 Angular-Meteor authentication module
angular-templates 1.0.2 Compile angular templates into th...
angular:angular 1.5.3_1 AngularJS (official) release. F...
angularui:angular-google-maps 2.3.2 angular-google-maps (official)
angularui:angular-ui-bootstrap 0.13.0 Native AngularJS (Angular) direc...
angularui:angular-ui-router 0.2.15 angular-ui-router (official): Fl...
angularutils:pagination 0.9.1_2 Magical automatic pagination fo...
check 1.1.3 Check whether a value matches a p...
dotansimha:accounts-ui-angular 0.0.4 AngularJS wrapper for Meteor's Ac...
email 1.0.11 Send email messages
es5-shim 4.5.9 Shims and polyfills to improve EC...
jquery 1.11.7 Manipulate the DOM using CSS sel...
less 2.5.7 Leaner CSS language
meteor-base 1.0.3 Packages that every Meteor app needs
mobile-experience 1.0.3 Packages for a great mobile user ...
modules 0.5.2 CommonJS module system
mongo 1.1.6 Adaptor for using MongoDB and Min...
pbastowski:angular-babel 1.3.2 Babel compiler and ng-annotate fo...
reactive-var 1.0.8 Reactive variable
standard-minifier-css 1.0.5 Standard css minifier used with M...
standard-minifier-js 1.0.5 Standard javascript minifiers use...
tmeasday:publish-counts 0.7.3 Publish the count of a cursor, in...
tracker 1.0.12 Dependency tracker to allow reac...
twbs:bootstrap 3.3.6 The most popular front-end framew...
So I do use accounts-ui-angular!
I followed this link
What I did was:
First:
Remove the angular meteor package you installed via atmosphere: meteor remove angular
Make sure you have the ecmascript package installed. If you had the atmosphere angular package installed previously you may have removed it after getting a notice that multiple compilers were trying to handle files with .js extension. So check out meteor list and if ecmascript isn't there do: meteor add ecmascript
Install angular and angular meteor via npm: npm install angular angular-meteor --save
List 'angular-meteor' as a module dependency for your main module: angular.module('myApp', ['angular-meteor']);
meteor remove ecmascript
meteor add modules (ecmascript implies modules so you have to add it manually if you remove ecma)
meteor add pbastowski:angular-babel
Note that I do not need to import angular in app.js (no import angular from 'angular'; or import 'angular-meteor';)
Now:
Hope that helps if someone have the same problem:)
I found that the problem is the incompatibility with this package:
meteor remove dotansimha:accounts-ui-angular
Don't forget to remove the dependency 'accounts.ui' on 'app.js'
Just removed and the result:
Possibly the problem is why somehow this package uses the "blaze-html-templates"

Cannot install gulp-angular

I am using gulp-angular for the first time, and am following this blog: http://www.angularonrails.com/how-to-wire-up-ruby-on-rails-and-angularjs-as-a-single-page-application-gulp-version/
When I run through the install questions, it just bombs out, on Karma.
I'm on ubuntu 14 in a Vagrant box, node v0.10.37, npm 2.7.5
Any pointers would be greatly appreciated.
fluent#vagrant-ubuntu-trusty-64:~/fluent/client$ yo gulp-angular myapp
.
.
? Which version of Angular do you want? 1.3.x (latest)
? Which Angular's modules would you want to have? (ngRoute and ngResource will be addressed after) angular-animate.js (enable animation features), angular-cookies.js (handle cookie management), angular-touch.js (for mobile development), angular-sanitize.js (to securely parse and manipulate HTML)
? Would you need jQuery or perhaps Zepto? None (Angular will use its own jqLite)
? Would you like to use a REST resource library? None, $http is enough!
? Would you like to use a router ? ngRoute, the official router
? Which UI framework do you want? Bootstrap, the most popular HTML, CSS, and JS framework
? How do you want to implements your Bootstrap components? Angular UI Bootstrap, Bootstrap components written in pure AngularJS by the AngularUI Team
? Which CSS preprocessor do you want? Sass (Node), Node.js binding to libsass, the C version of the popular stylesheet preprocessor, Sass.
? Which JS preprocessor do you want? None, I like to code in standard JavaScript.
? Which html template engine would you want? None, I like to code in standard HTML.
Template processing error on file karma.conf.js
events.js:72
throw er; // Unhandled 'error' event
^
AssertionError: Trying to copy from a source that does not exist: /usr/lib/node_modules/generator-gulp-angular/app/templates/karma.conf.js
at EditionInterface.exports._copySingle (/usr/lib/node_modules/generator- gulp-angular/node_modules/yeoman-generator/node_modules/mem-fs- editor/actions/copy.js:44:3)
Some additional information, not really sure what to make of this, there is a _karma.conf.js file
myapp#vagrant-ubuntu-trusty-64:/usr/lib/node_modules/generator-gulp-angular/app/templates$ ls
_bower.json e2e gulp _.jshintrc _package.json src tslint.json
coffeelint.json _.gitignore _gulpfile.js _karma.conf.js protractor.conf.js _tsd.json
EDIT
I have had to use sudo for all npm commands. Is this normal?
EDIT 2
https://github.com/Swiip/generator-gulp-angular/issues/470
As per the github issue, deleting the reference to karma.conf.js from app/files.json did the job.
I guess there will be an official fix at some point.

getting Jasmine specs written in coffeescript to run

I'm trying to get Jasmine (jasmine-headless-webkit), coffeescript and backbone to work together.
I'm close - I've got my site running on coffeescript and backbone, and I can run coffeescript written tests - but my problem is, I can't get my coffeescript tests to do anything interesting.
If I try create an instance of a model in a test, I'll get an error:
ReferenceError: Can't find variable: xxxx
FYI - I'm using this with guard-jasmine-headless-webkit...
I've been working with the Jasmine.yml file - but still can't get these tests to work. Does anyone have any advice?
Trevor was right - the issue was the order in which scripts were loaded (in my jasmine.yml)
I wound up cleaning it out for the most part...
helpers:
- helpers/**/*.js
src_dir:
- app/assets/javascripts
- vendor/assets/javascripts
src_files:
- "**/*.*"
spec_dir: spec/javascripts
spec_files:
- "**/*[Ss]pec.*"
stylesheets:
- stylesheets/**/*.css
Friendly update: if you're using Rails asset pipeline for coffeescript compilation, a recent release of the Jasmine gem adds support for coffeescript via rails asset pipeline. huge improvement. its the 1.2.0 version (not the release candidates, the official 1.2.0 release)
https://github.com/pivotal/jasmine-gem

Resources