Howto bootstrap Backbone app with yeoman having require.js enabled - backbone.js

I'm playing with yeoman for a time now. I wonder how I accomplish bootstrapping a Backbone application and having require.js enabled at the same time.
yeoman init
provides me with a setup where I can work with modules in AMD style.
yeoman init backbone:all
provides me with a Backbone scaffold but I had to "include" all my models, collection etc. manually in index.html.
Is there a way to have both?
Regards Felix

We have updated the Yeoman backbone generator to support RequireJS. But it not officially added to npm. But you can try it using
npm install git://github.com/yeoman/generator-backbone.git
Discussion : Not found in npm install
The backbone generator supports yeoman 1.0beta. Try
yo backbone
You will receive a conditional prompt for RequireJS.
UPDATE 1
Backbone generartor is available on npm.
Try npm install generator-backbone
UPDATE 2
RequireJS with --coffee option is now supported in backbone generator v0.2.2

There's already an open issue for this. Add your thoughts there :)

Hi I developed a generator for that, take a look at https://github.com/abiee/generator-backbone-amd

I was trying the same today. What I did ultimately was to perform yeoman init first. Then again yeoman install backbone. Console will ask if you want to override files. Do not override main.js & index.html. Rest you may.
This won't give you perfect start. But, most of the things will be in place.

Related

AngularJS Upgrade to Angular Hybrid with Grunt/Bower

I have an older project that we want to add some more functionality to. It's a fairly big project so rewriting it is out of the question. I've been reading and following the Angular ngUpgrade guide to make the transition to be able to write Angular 2+ code and run it with my AngularJS application.
However, there are some things that I'm missing and I'm quite confused on what I need to do.
My team created the initial project using Grunt and Bower, looks like through a Yeoman generator. I've been following along in the PhoneCat Upgrade Tutorial and I'm at the part where it says to "Install Angular into the project, along with the SystemJS module loader."
At this point I've looked into SystemJS a bit and what we have with our Bower/Grunt setup but am fairly confused.
So my question is, do I need to change my AngularJS application to use SystemJS before continuing with the Angular Upgrade, or can Grunt and SystemJS work together in some way?

Angular 1 With Typescript

I'm looking into creating an app with typescript and angular 1.6.0. But everywhere I look is using webpack, babel, grunt, gulp, there is no single consensus on which is the best way to proceed with an app like this.
Anyone got any hints?
Thank you.
Do you have a specific need for using angular 1.6.0? As opposed to creating an angular2 project?
You can get more information here: Angular-cli
Angular cli currently includes webpack and you will not need to use gulp or grunt at all. In addition to the angular cli bundling your app together it allows easy build for Ahead of Time Compilation and tree shaking. Having these two features is nice for when you are ready to deploy your application to a production server you can bundle the application into a small package and serve a small amount of JS files.
Using the angular cli also helps you to code with best practices within an angular2 application. You generate new components/directives/pipes with a simple ng generate [component] [name] command.
I would strongly suggest reading through the angular quickstart for ts guide located here: Angular-Quickstart
Also, if you do not want to generate your own projects using the angular-cli. There are various templates online that you can start your application with.
Good luck!
If you are planning to start from scratch, then why not Angular2 ?
My suggestion is Typescript2 + Angular2 with webpack. As stated by #Andy Angular-cli is good to go.

what is a angular seed and Angular-Seed project for AngularJS?

I am new in angular and not clear with Angular seed.
I have some questions:
what is angular seed?
Is it necessary?
How to use angular seed?
Sorry if something is wrong in the questions.
Angular Seed is totally baked template for your rapid angular application development .
It has test suite like Karma and protractor and Jasmine
and many more . It has bower front-end tool manager . And Grunt as task runner . You can update add and delete any node module whenever you want with package.json.
In a easy way , all you need to get in super fast way is ready in there . Hope you got your answer .
Angular seed project can be seen as a template or kick-starter project that could be installed to get started with your AngularJS apps.
Check out this link:
Angular-Seed example

Upgrade ng-boilerplate to use angular ui bootstrap 3

I am using AngularJS v1.2.0-rc.3 with a project using ng-boilerplate. I want to use Bootstrap 3 so I've changed the bower file to use the branch for version 3, but now grunt fails when running the karma tests. I've isolated the problem to module dependencies on ui.bootstrap but I can't figure out what's wrong. Any ideas?
You'll probably need to fork it for now and change the dependency on ui.bootstrap to use their BS3 branch found here: https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
It turns out that I had to build the angular-ui-bootstrap package with grunt and change build.config.js vendor_files to use vendor/angular-ui-bootstrap/dist/ui-bootstrap-tpls-0.6.0-SNAPSHOT.min.js
If you're relatively new to ng-boilerplate and want to get jump started with angular support for boostrap3 this fork might be helpful.
https://github.com/MorrisLLC/ng-boilerplate
It uses the lastest versions of the boilerplate vendor libraries and most recent versions of the grunt tasks.
See the Quick Start for modified instructions on building angular-bootstrap. You have to build it because the current angular bootstrap branch does not include the tpls files (templates).
I ran into the same issue and already had written a lot in bootstrap 2.3.2. Instead of starting all over with someone else's git repo, you could just update several files:
build.config.js add in the vendor/bootstrap/js/.js where the file is the javascript that you are planning to use.
less/main.less which imports the bootstrap less. You could use specific less files from bootstrap or do an import of everything with:
#import '../../vendor/bootstrap/less/bootstrap.less';

Yeoman use Backbone/Ember with requireJs

I would like to use Yeoman to start a project with a framework and requireJs enabled.
If I init a project with Amd and install backbone after, the models/controllers/routes... aren't generated with requireJs.
I have find this topic :
Howto bootstrap Backbone app with yeoman having require.js enabled
But the link of the response is dead... :(
If it helps in any way, I ported over the Peepcode Backbone project to a RequireJS and Yeoman-enabled one here: https://github.com/vishvish/backbone-peepcode-reboot
Yeoman has just changed its MO, and I don't know if that will work with it, but the models, routes, etc, are all there in RequireJS format, hopefully that will help you be on your way.
We have updated the Yeoman backbone generator to support both twitter bootstrap and RequireJS. But it not officially added to npm. But you can try it using
npm install git://github.com/yeoman/generator-backbone.git
Discussion : Not found in npm install

Resources