Development

Robin van Baalen edited this page Mar 27, 2015 · 1 revision

This information comes straight from the old README.md file and needs review.

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install global dev dependencies: npm install -g grunt-cli karma
  • Install local dev dependencies: npm install while current directory is bootstrap repo

Build

  • Build the whole project: grunt - this will run lint, test, and concat targets
  • To build modules, first run grunt html2js then grunt build:module1:module2...:moduleN

You can generate a custom build, containing only needed modules, from the project's homepage. Alternatively you can run local Grunt build from the command line and list needed modules as shown below:

grunt build:modal:tabs:alert:popover:dropdownToggle:buttons:progressbar

Check the Grunt build file for other tasks that are defined for this project.

TDD

  • Run test: grunt watch

This will start Karma server and will continuously watch files in the project, executing tests upon every change.

Test coverage

Add the --coverage option (e.g. grunt test --coverage, grunt watch --coverage) to see reports on the test coverage. These coverage reports are found in the coverage folder.

Customize templates

As mentioned directives from this repository have all the markup externalized in templates. You might want to customize default templates to match your desired look & feel, add new functionality etc.

The easiest way to override an individual template is to use the <script> directive:

<script id="template/alert/alert.html" type="text/ng-template">
    <div class='alert' ng-class='type && "alert-" + type'>
        <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>
        <div ng-transclude></div>
    </div>
</script>

If you want to override more templates it makes sense to store them as individual files and feed the $templateCache from those partials. For people using Grunt as the build tool it can be easily done using the grunt-html2js plugin. You can also configure your own template url. Let's have a look:

Your own template url is views/partials/ui-bootstrap-tpls/alert/alert.html.

Add "html2js" task to your Gruntfile

html2js: {
  options: {
    base: '.',
    module: 'ui-templates',
    rename: function (modulePath) {
      var moduleName = modulePath.replace('app/views/partials/ui-bootstrap-tpls/', '');
      return 'template/' + moduleName;
    }
  },
  main: {
    src: ['app/views/partials/ui-bootstrap-tpls/**/*.html'],
    dest: '.tmp/ui-templates.js'
  }
}

Make sure to load your template.js file <script src="/ui-templates.js"></script>

Inject the ui-templates module in your app.js

angular.module('myApp', [
  'ui.bootstrap',
  'ui-templates'
]);

Then it will work fine!

For more information visit: https://github.com/karlgoldstein/grunt-html2js

Release

  • Bump up version number in package.json
  • Commit the version change with the following message: chore(release): [version number]
  • tag
  • push changes and a tag (git push --tags)
  • switch to the gh-pages branch: git checkout gh-pages
  • copy content of the dist folder to the main folder
  • Commit the version change with the following message: chore(release): [version number]
  • push changes
  • switch back to the main branch and modify package.json to bump up version for the next iteration
  • commit (chore(release): starting [version number]) and push
  • publish Bower and NuGet packages

Well done! (If you don't like repeating yourself open a PR with a grunt task taking care of the above!)

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.