UI Angular

My KISS - semantic-ui/angularJS library

About

You will find the all the help and usage instructions with navigation menu on the UI Angular homepage. Here the readme's are distributed over the relevant folders.

Approach

Designed around KISS Principle Keep it simple stupid

1. Accept all parameters that Semantic UI does and extends with some angular features.
2. Pass data in variables and objects (don't clutter html, use controller and services)
3. Call Semantic UI js code as much as possible: Why reinvent the wheel!
4. Semantic UI syntax looks good with angular, no need to have directive to add html classes unless really nessesary or simpifies significantly
5. Follow from last two points :If there is no Semantic UI js code, there needs to be a real benefit to write angular code.

Dependencies

• AngularJS
• semantic UI
• jQuery

Status

I have written directive as I have needed the modules, which mean they are used live and work. If you request a directive please allow a week for me to write it.

Please put an issue if you intend to contribute your work, then I will put some effort to write the rules and guidlines etc.

| Backlog | Planned | Done | Not Planned | | ------------- |-------------| -----------|--------------------------| | Dimmer | Accordian | Dropdown | ~~Checkbox~~ * | | Embed | | Modal | ~~Nag~~ * | | Progress | | Popup | ~~Tab~~ * | | Rating | | Sidebar | | | Search** | | Sticky | | | Shape | | | | | Transition** | | | | | | | Visibility | ~~API~~ * |
| | | | ~~Form Validation~~ * |
| | | | ~~Elements~~ *** |
| | | | ~~Collections~~ *** |

* Found AngularJS out of the box does the job well enough ** Not sure if AngularJs is better suited or not **** No javascript, so no plans unless there is a compelling reason

Install

Download

NPM

> npm install ui-angular --save

Bower

> bower install ui-angular --save

Build

Local Build

To build inside ui-angular folder

• Go to ui-angular folder
• Install all needed packages ui-angular> npm install
• Build ui-angular> gulp build

Integrated Build

To integrate with your own gulp build

• Copy ui-angular.json to your build folder and set the relative paths in the file
• There must be a semantic.json file in the same folder
• add

var buildUIAngular = require('[your path]/ui-angular/tasks/build')(__dirname); 
gulp.task('buildUIAngular', buildUIAngular);

• And integrate this with your build task

Only the the modules used for Semantic-UI will be included in the build

Usage

Load the Module

Use uiAngular to load the module. E.g.

angular.module('app', ['uiAngular']);

Common features

• All object are initiated if needed to. E.g.

$('.classes').method();

• vm.directiveObject Dom instance object to be used for Semantic UI usage. E.g.

vm.directiveObject.method('show');

• vm.directiveData Semantic UI settings object. E.g.

vm.directiveData = {
  on: 'hover',
  onShow: function(){...}
};

Warning: Setting the variables for the method through javascript/jquery syntax will in many cases render the ui-directive useless, i.e.

$('.classes').method({
 setting: value
});

/*OR*/

vm.directiveObject.method({
 setting: value,
 callBack: function(){...}
});