How to use EJS templates in a Backbone project generated by Yeoman? - backbone.js

Using yeoman init backbone:all generates the required files for a sample Backbone.JS app. Along with the MVC files for a sample application object, it also creates a folder at bbapp/app/scripts/templates with a sample ejs file called application.ejs. The Backbone View file for the sample application has a line (which is commented out):
//template: application
Uncommenting this does not work. It tries to look for an object with the name 'application' and throws an error: Uncaught ReferenceError: application is not defined. Using yeoman init bbb creates the Backbone Layout Manager which probably does the trick. Any ideas how I can use EJS files for templating in a project generated with yeoman init backbone:all ?
Thanks!

Till now the generator-backbone is not officially released for yeoman 1.0, but you can try it like this.
Today I proposed a fix for precompiling ejs templates.
That fix will precompile all the *.ejs files in app/templates to app/scripts/templates.js. Will update once the fix is merged to the master and the generator is officially released.
PS : In yeoman 1.0beta use yo backbone:all instead of yeoman init backbone:all

Related

Angular 1.5, typescript and gulp

I have a project written in angular 1.x according this template by John Papa:
https://github.com/johnpapa/ng-demos/tree/master/modular.
Basically i use a gulp to build a minified js for production and another task (called 'index') that injects all the js src files (without minification) into the index.html file.
How should I change things now when adding typescript to my project?
specifically, my issue is when I have a class B which inherits from class A and they both on the same namespace.
how can I make sure that in the minified js file or in the index.html injection the order of the classes will be according the dependencies?
Note also this issue that I've opened for another template, a one that shows how to use typescript with Angular - https://github.com/johnpapa/hottowel-angular-typescript/issues/24
Many thanks!

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.

how to add angular files on yeoman generator ionic

I'm using generator-ionic from link, and It made well, but I want to know how to add angular controllers or directives files.
It's not like app when I made with 'yo angular'
there is no views folder and files neither.
'yo angular:directive myDirective' not work.
do I have to make all files and folders by myself?
I found that the Angular Generator works fine with a project created by yo ionic. You are correct that the folder structure is different, but that may not a problem for you. You could always start with a completely blank ionic template, and then start adding the pieces you need. Your app.js and index.html files will be where the Angular Generator expects them to be.

How to setup Gruntfile / Yeoman to scaffold over a feature-centric directory structure

When creating a new project using Yeoman's angularJS generator (yo angular), the app is initialiazed with the following directory structure:
app
scripts
controllers
aFeatureController
bFeatureController
directives
aFeatureDirective
bFeatureDirective
views
aFeatureView
bFeatureView
While this traditional MVC structure works well, I find it harder to navigate than a feature -centric structure, where all files related to the same section of the app are living under the same roof. In other words, I'd like to have the following structure instead:
app
aFeature
aFeatureController
aFeatureDirective
aFeatureView
bFeature
bFeatureController
bFeatureDirective
bFeatureView
Is it possible to configure gruntfile and Yeoman so that grunt keeps tasking and Yeoman scaffolding generators still function properly?
The structure you pointed out is generated by the default angular yeoman generator.
For the feature based structure that you want, (which I personally like as well), can be generated by other yeoman generators like generator-cg-angular.
There are quite a few generators which do the same. You can find one that suits you best by searching for angular on yeoman. These generate this structure by default without having to change your grunt or writing a new generator.

sencha cmd extjs build does not include MVC controllers

When I 'compile' my extjs MVC app (version 4.1.1a, CMD ver 3.0.2.288), an all-classes.js file gets created however none of my custom code (controllers, views etc) gets included. They get dynamically loaded when I load the html page. I have another app that works fine. I can't post my hundreds of lines of code. What can I look for?
I tried the CMD build in debug mode and it seems to process and find all my app files, it just doesn't include in all-classes.js.
I tried
sencha -d app build
and
sencha compile -classpath=app/app.js,app,ext/src page -in=index.html -out=build/index.html
I used 'sencha generate app' to create the original directory structure etc.
I have exactly the same issue.
Maybe as a hint, I've got another project where I generated the whole application, and the build. And here, with the build-impl.xml, I've got everything I need in all-classes : my controllers, models, etc
Not sure why but it seems if I explicitly do a 'requires' on my controllers in my app.js file then the compile works
Ext.Loader.setConfig({ enabled: true });
Ext.require([
'AM.controller.myController1'
, 'AM.controller.myController2'
.
.

Resources