4

I am trying to use this project https://github.com/ngbp/ngbp but with Twitter Bootstrap 3. I find no posts on how to do that. Is it because:

  1. It can't be done
  2. It shouldn't be done
  3. I am the only one in the world who wants to do that
  4. There are other better ways to do that.

I am afraid that using Twitter Bootstrap 2.3.2 as this boilerplate code comes with is old. Am I right?

I have tried to fix it myself but I give up the jungle world of JavaScript scripts and bugs that must be combined in a top secret order and maybe if you are lucky you don't get an error. Please help me.

Improve this question
7
  • It's using an extremely old version of UI-bootstrap. Looks like he could use a pull request with some much-needed updates. Maybe I'll dig into that tonight. Commented Feb 24, 2014 at 19:57
  • This is a better choice for angular+bootstrap: github.com/yeoman/generator-angular Commented Feb 24, 2014 at 20:12
  • @NathanielJohnson Does that use Twitter bootstrap 3 Commented Feb 24, 2014 at 20:16
  • Yes. And it is the preferred method. I would also add that you will want to use Angular-Bootstrap. Commented Feb 24, 2014 at 20:17
  • angular-ui.github.io/bootstrap Commented Feb 24, 2014 at 20:17

1 Answer 1

Reset to default
7

I consider using Yeoman good practice for scaffolding out new projects. The advantage to using Yeoman is that it creates the more arcane files used by Grunt (a build tool) and Bower (a dependency management tool). There is a generator for Angular. It will allow you to pick a good working set of libraries, create the project, and add more components that you find necessary later. Yeoman is really just Grunt+Bower and then Yo - a tool for stubbing out project skeletons. The nice thing is that you can continue to add Angular components after creating your project and it will update your config files letting you play around with the structure.

If you would like to use Bootstrap 3, I suggest looking at Angular-Bootstrap which is part of the Angular UI group of projects. Angular Bootstrap contains the portion of Bootstrap that is javascript but is rewritten to use angular style directives.The CSS and icons must still be included and can be found in the normal bootstrap library. The instructions for including the Bootstrap CSS and some great plunker examples are available in the Angular-UI readme.

Update Here is what a bower.json might look like. Notice that bootstrap is included separately. This is because the bootstrap css is a separate dependency so that angular-ui does not need to be updated whenever bootstrap is.

{ "name": "test", "version": "0.0.1", "ignore": [ "**/.*", "node_modules", "lib", "test", "tests" ], "dependencies": { "angular": "latest", "angular-route": "latest", "angular-bootstrap": "latest", "angular-ui-utils": "latest", "bootstrap": "latest", }, "devDependencies": { "angular-mocks": "latest", "angular-scenario": "latest" } }
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

I am probably stupid but I can't find any Bootstrap 3 stuff after using the angular-generator? Is this correct? What should I do after generating the project? Should I add bower install angular-bootstrap and bower install bootstrap? Am I done after that?
Yes, angular UI requires that you add the bootstrap.css file (but not the js). The github readme has how to add it. I just stick it in my bower.json file. I'll give you a stub of what my bower file looks like.
I probably should have looked at your profile before I answered. I come from a java background too and I have had a hard time transistioning to the Node/Angular javascript way of thinking. Each tool comes with a fairly substantial learning curve and JS async code is a bitch to get used to. I hope I cleared up this up a little but let me know and I will help as I can.
Thank you for helping. I think I managed to get it working last night. But what do you mean by bootstrap is included seperatly?
Bootstrap has three parts: The css, the icons, and a javascript file that has the more complicated controls (like popoups, dropdowns, etc). angular-ui-bootstrap angular-ui.github.io/bootstrap rewrites the javascript as angular directives but retains the original css and icons and does not include those files in its ditsribution.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.