bootstrap - AngularJS directives specific to Bootstrap - Persian Edition

Gitter

Build Status devDependency Status

 About ui-bootstrap Persian Version

As a front-end developer in Iran using angular for developing single page applications I was always in need of persian angular components. The directives presented by angular-ui was always attracting me to use them but the big problem was being rose up when I wanted them to be right to left or having persian features like persian calendar. So I forked this open-source project and started to add my desired persian features into it.

Persian datepicker is completed till now. I am working on a right to left pagination too and I will be so glad if you suggest other required persian features.

Demo

Do you want to see directives in action? Visit http://rkeshmir.ir/github/bootstrap/!

Installation

Installation is easy as angular-ui-bootstrap has minimal dependencies - only the AngularJS, Bootstrap's CSS and moment (plus moment-jalaali plugin) are required. After downloading dependencies (or better yet, referencing them from your favourite CDN) you need to download build version of this project. All the files and their purposes are described here: https://github.com/rkeshmir/persian-angular-ui-bootstrap/tree/gh-pages#build-files Don't worry, if you are not sure which file to take, opt for ui-bootstrap-tpls-[version].min.js.

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the ui.bootstrap AngularJS module:

angular.module('myModule', ['ui.bootstrap']);

Project files are also available through your favourite package manager:

Support

If you are having problems making some directives work, there are several ways to get help:

Project's issue on GitHub should be used discuss bugs and features.

FAQ

https://github.com/angular-ui/bootstrap/wiki/FAQ

Supported browsers

Directives from this repository are automatically tested with the following browsers:

Modern mobile browsers should work without problems.

IE 8 is not officially supported at the moment. This project is run by volunteers and with the current number of commiters we are not in the position to guarantee IE8 support. If you need support for IE8 we would welcome a contributor who would like to take care about IE8. Alternatively you could sponsor this project to guarantee IE8 support.

We believe that most of the directives would work OK after:

We are simply not regularly testing against IE8.

Project philosophy

Native, lightweight directives

We are aiming at providing a set of AngularJS directives based on Bootstrap's markup and CSS. The goal is to provide native AngularJS directives without any dependency on jQuery or Bootstrap's JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the original JavaScript code size and better integrated into the AngularJS ecosystem.

Customizability

All the directives in this repository should have their markup externalized as templates (loaded via templateUrl). In practice it means that you can customize directive's markup at will. One could even imagine providing a non-Bootstrap version of the templates!

Take what you need and not more

Each directive has its own AngularJS module without any dependencies on other modules or third-party JavaScript code. In practice it means that you can just grab the code for the directives you need and you are not obliged to drag the whole repository.

Quality and stability

Directives should work. All the time and in all browsers. This is why all the directives have a comprehensive suite of unit tests. All the automated tests are executed on each checkin in several browsers: Chrome, ChromeCanary, Firefox, Opera, Safari, IE9. In fact we are fortunate enough to benefit from the same testing infrastructure as AngularJS!

Persian Version

Angular is a world class level js library that most of the time is the first choice to write a single page application. One its best facilities is its directives that helps developers to use modular two-way binding components. So it is important for angular to have versions compatible with local needs all over the world. This version is a starting to present some persian facilities.

Support

If you are having problems making some directives work, there are several ways to get help:

Project's issue on GitHub should be used discuss bugs and features.

Contributing to the project

We are always looking for the quality contributions! Please check the CONTRIBUTING.md for the contribution guidelines.

Development

Prepare your environment

Build

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

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

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