Angular boilerplate and Twitter Bootstrap 3

Question

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.

Answer 1

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"
    }
}