Showing posts with label angular directive. Show all posts
Showing posts with label angular directive. Show all posts
ngDraggable

ngDraggable

September 27, 2018
Drag and drop module for Angular JS with support for touch devices. demo.

Usage:

  • Install: bower install ngDraggable
  • Add angular and ngDraggable to your code:
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>  
 <script src="ngDraggable.js"></script>  
  • Add a dependency to the ngDraggable module in your application.
 angular.module('app', ['ngDraggable']);  
  • Add attribute directives to your html:
Draggable usage:
 <div ng-drag="true" ng-drag-data="{obj}" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true">  
  Draggable div  
 </div>  
  • ng-center-anchor is optional. If not specified, it defaults to false.
  • If the draggable is also clickable (ng-click, ng-dblclick) the script wont react.
  • You can define a drag-button as child with the attribute ng-drag-handle.
ng-drag-start and ng-drag-move is also available. Add to the ng-drop element. ng-drag-stop can be used when you want to react to the user dragging an item and it wasn't dropped into the target container.
draggable:start, draggable:move and draggable:end events are broadcast on drag actions.
Drop area usage:
 <div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" >  
  Drop area  
 </div>  

Angular Controller:

 app.controller('MainCtrl', function ($scope) {  
   $scope.onDragComplete=function(data,evt){  
     console.log("drag success, data:", data);  
   }  
   $scope.onDropComplete=function(data,evt){  
     console.log("drop success, data:", data);  
   }  
  };  

Examples

Drag and drop.
Re-ordering.
Cloning.
Canceling.

Pull requests

We welcome pull requests but please check that all the examples still work if you modified the source base. There have been serveral PRs recently that broke core functionality. If you are feeling really keen you could include some protractor test cases in your PR.
Note: Special thanks to Philip Andrews
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ngSocketIO

ngSocketIO

February 22, 2018
Socket.IO module for AngularJS

Requirements

  • AngularJS 1.0.5+
  • Socket.IO 0.9.16

Installing

Simply download either ng-socket-io or ng-socket-io.min.js from the build folder and add it to your web application. Just make sure it's included after the AngularJS script.

Usage

  1. Add the socket-io module as a dependency in your AngularJS app;
  2. Inject the socket factory wherever you need to use Socket.IO;
  3. You're done!

Example

 <script src="angular.js"></script>  
 <script src="ng-socket-io.js"></script>  
 <script>  
   var myApp = angular.module('myApp', ['socket-io']);  
   myApp.controller('MyCtrl', function($scope, socket) {  
     // Listening to an event  
     socket.on('someEvent', function(data) {  
       $scope.data = data;  
     });  
     // Raising an event  
     $scope.raise = function(message) {        
       socket.emit('otherEvent', message);  
     };  
   });  
 </script>  

Cancelling a subscription automatically on scope destruction

If you want to unsubscribe from an event automatically on scope destruction, just call bindTo passing the current scope:
 socket.on('someEvent', function(data) {  
 ...   
 }).bindTo($scope);  

Note: Special thanks to Michael Benford
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ngTagsInput

ngTagsInput

February 18, 2018
Tags input directive for AngularJS. Check out the ngTagsInput website for more information.

Requirements

  • AngularJS 1.3+
  • A modern browser (Chrome 31+, Firefox 29+, Safari 7+, Opera 12+, IE 10+)

Installing

All files are available from a variety of sources. Choose the one that best fits your needs:
You can also grab the latest build generated by Travis. It's fully functional and may contain new features and bugfixes not yet published to the services listed above.
Now all you have to do is add the scripts to your application. Just make sure the ng-tags-input.js file is inserted after the angular.js script:
 <script src="angular.js"></script>  
 <script src="ng-tags-input.js"></script>  
 <link rel="stylesheet" type="text/css" href="ng-tags-input.css">  

Usage

  1. Add the ngTagsInput module as a dependency in your AngularJS app;
  2. Add the custom element <tags-input> to the HTML file where you want to use an input tag control and bind it to a property of your model. That property, if it exists, must be an array of objects and each object must have a property named text containing the tag text;
  3. Set up the options that make sense to your application;
  4. Enable autocomplete, if you want to use it, by adding the directive <auto-complete> inside the <tags-input> tag, and bind it to a function of your model. That function must return either an array of objects or a promise that eventually resolves to an array of objects (same rule from step 2 applies here);
  5. Customize the CSS classes, if you want to.
  6. You're done!
Note: There's a more detailed getting started guide on the ngTagsInput website.

Example

 <html>  
 <head>  
   <script src="angular.min.js"></script>  
   <script src="ng-tags-input.min.js"></script>  
   <link rel="stylesheet" type="text/css" href="ng-tags-input.min.css">  
   <script>  
     angular.module('myApp', ['ngTagsInput'])  
       .controller('MyCtrl', function($scope, $http) {  
         $scope.tags = [  
           { text: 'just' },  
           { text: 'some' },  
           { text: 'cool' },  
           { text: 'tags' }  
         ];  
         $scope.loadTags = function(query) {  
            return $http.get('/tags?query=' + query);  
         };  
       });  
   </script>  
 </head>  
 <body ng-app="myApp" ng-controller="MyCtrl">  
   <tags-input ng-model="tags">  
     <auto-complete source="loadTags($query)"></auto-complete>  
   </tags-input>  
 </body>  
 </html>  

Options

Check out the documentation page for a detailed view of all available options.

Demo

You can see the directive in action in the demo page.

Contributing

Before posting an issue or sending a pull request, make sure to read the CONTRIBUTING file.

License

See the LICENSE file.

Changelog

See the CHANGELOG page.

Alternatives

The following are some alternatives to ngTagsInput you may want to check out:
  • angular-tags: Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap
  • angular-tagger: Pure Angular autocomplete with tags, no jQuery
  • jsTag: Open source project for editing tags (aka tokenizer) based on AngularJS
  • bootstrap-tagsinput: jQuery plugin providing a Twitter Bootstrap user interface for managing tags (provides Angular support)

Latest build


Note: Special thanks to Michael Benford
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
angular-keypad - An Angular directive that creates a numeric keypad.

angular-keypad - An Angular directive that creates a numeric keypad.

May 19, 2017

All Demos

Installation



NPM

 npm install angular-keypad --save  

Bower

 bower install angular-keypad --save  

Manually

Add the script and styles to your HTML:
 <link rel="stylesheet" href="../path/to/your/bower_components/angular-keypad/dist/angular-keypad.css">  
 <script src="../path/to/your/bower_components/angular-keypad/dist/angular-keypad.js"></script>  

Dependencies


  • Angular.js (>=1.4.0)

Usage


Include bc.AngularKeypad as a dependency in your project:
 angular.module('YourModule', ['bc.AngularKeypad']);  
Use the directive anywhere in your HTML. The keypad will expand to fill the width of it's container while maintaining the aspect ratio of the keypad buttons.
 <!-- Show the number model in your UI: -->  
 <span>{{ vm.numbers }}</span>  
 <!-- Define the keypad: -->  
 <bc-keypad bc-number-model="vm.numbers"></bc-keypad>  


Simple demo
  • bc-number-model
    Required : String

    The directive will store the current string of numbers here. This is the only required attribute.
     <bc-keypad bc-number-model="vm.numbers"></bc-keypad>  
    
  • bc-max-length
    Required : Integer

    The directive will use this number to set a hard limit on how many characters are allowed in the number model (vm.numbers in the example below).
    Demo for max-length
     <!-- Restrict 'vm.numbers' to the length of 4 -->  
     <bc-keypad  
      bc-number-model="vm.numbers"  
      bc-max-length="4"  
     ></bc-keypad>  
    
  • bc-left-button
    Required : String

    You can define a custom Plug'n'Play button type by passing in the name of any valid (PnP) button.
    Demo for Plug'n'Play button types with custom methods
     <!-- This would generate a backspace button in the bottom left of the keypad -->  
     <bc-keypad  
      bc-number-model="vm.numbers"  
      bc-left-button="backspace"  
     ></bc-keypad>  
    
  • bc-right-button
    Required : String

    You can define a custom Plug'n'Play button type by passing in the name of any valid (PnP) button.
    Demo for Plug'n'Play button types with custom methods
     <!-- This would generate a submit button in the bottom right of the keypad -->  
     <bc-keypad  
      bc-number-model="vm.numbers"  
      bc-right-button="submit"  
     ></bc-keypad>  
    


Custom Methods


  • bc-left-button-method
    Required : method
    You can pass in a custom method that will be called each time the button is interacted with. This allows you to track interaction or handle custom validation in your controller. Available Parameters:
    Param Type Details
    $event Object The original event object from the ng-click
    numbers String The current value of bc-number-model

    Demo for Plug'n'Play button types with custom methods
     <!-- This would create a backspace button in the bottom left corner of the keypad -->  
     <bc-keypad  
      bc-number-model="vm.numbers"  
      bc-left-button="backspace"  
      bc-left-button-method="vm.doSomething($event, numbers)"  
     ></bc-keypad>  
    
     export class YourController {  
       constructor() {  
         this.numbers = '';  
       }  
       // I will be called each time the left (backspace) button is interacted with  
       doSomething($event, numbers) {  
         console.log('The backspace button on the left was clicked!');  
         console.log('Original click event object: ', $event);  
         console.log('Current number model value: ', numbers);  
       }  
     }  
    
  • bc-right-button-method
    Required : method
    You can pass in a custom method that will be called each time the button is interacted with. This allows you to track interaction or handle custom validation in your controller. Available Parameters:
    Param Type Details
    $event Object The original event object from the ng-click
    numbers String The current value of bc-number-model

    Demo for Plug'n'Play button types with custom methods
     <!-- This would create a submit button in the bottom right corner of the keypad -->  
     <bc-keypad  
      bc-number-model="vm.numbers"  
      bc-right-button="submit"  
      bc-right-button-method="vm.doSomething($event, numbers)"  
     ></bc-keypad>  
    
     export class YourController {  
       constructor() {  
         this.numbers = '';  
       }  
       // I will be called each time the right (submit) button is interacted with  
       doSomething($event, numbers) {  
         console.log('The submit button on the right was clicked!');  
         console.log('Original click event object: ', $event);  
         console.log('Current number model value: ', numbers);  
       }  
     }  
    
  • bc-empty-backspace-method
    Required : method
    You can pass in a custom method that will be called when the backspace button is interacted with and bc-number-model is already empty. This can be useful for allowing users to step backwards through a multi-part form.
    Demo for bc-empty-backspace-method
     <bc-keypad  
      bc-number-model="vm.numbers"  
      bc-right-button="backspace"  
      bc-empty-backspace-method="vm.backspaceWhenEmpty()"  
     ></bc-keypad>  
    
     export class YourController {  
       constructor() {  
         this.numbers = '';  
       }  
       // I will be called when the backspace button is clicked and the numbers  
       // model is empty  
       backspaceWhenEmpty() {  
         console.log('Backspace clicked, but "vm.numbers" is empty!');  
       }  
     }  
    


Plug'n'Play Buttons


This directive now supports Plug'n'Play (PnP) button types to the left and right of the final digit. These button types can be used on either side (or both if you really wanted to).
Demo for Plug'n'Play button types with custom methods

Available (PnP) Button Types

Even when using a (PnP) button, any defined custom methods will still be called.
Any (PnP) button template can be overwritten using methods exposed via the provider.
 <!-- Example directive setup for the above image -->  
 <bc-keypad  
  bc-number-model="vm.numbers"  
  bc-left-button="backspace"  
  bc-right-button="submit"  
  bc-right-button-method="vm.submitMyData($event, numbers)"  
 ></bc-keypad>  


Backspace


 <!-- This would create a backspace button in the bottom left corner of the keypad -->  
 <bc-keypad  
  bc-number-model="vm.numbers"  
  bc-right-button="backspace"  
 ></bc-keypad>  
This will create a backspace button with styles and functionality already wired together.

Functionality

Each time a backspace button instance is interacted with, the last number will be removed from bc-number-model. If a custom method was passed to bc-empty-backspace-method it will be called when the backspace button is interacted with and bc-number-model is already empty. This can be useful for allowing users to step backwards through a multi-part form. Any defined custom methods will still be called.

Style

By default the button is using a raw SVG version of ion-backspace-outline from ionicons since this allows you to customize the SVG styles with your project's CSS.
Demo for custom button CSS

A special class is added to the backspace button which can be used to target specific styles:
 .bc-keypad__key-button--backspace {  
  fill: #DE1E7E;  
 }  

Submit

 <bc-keypad  
  bc-number-model="vm.numbers"  
  bc-right-button="submit"  
 ></bc-keypad>  
This is a purely aesthetic (PnP) button type. No functionality is attached, but any defined custom methods will still be called.

Submit

By default the button is using a raw SVG version of ion-log-in from ionicons since this allows you to customize the SVG styles with your project's CSS.
Demo for custom button CSS
A special class is added to the submit button which can be used to target specific styles:
 .bc-keypad__key-button--submit {  
  fill: #101CA7;  
 }  


bcKeypadConfigProvider


This module exposes bcKeypadConfigProvider which can be used to set custom defaults for the directive. Setting options here will overwrite the directive's default options for all instances within your module.
Demo for bcKeypadConfigProvider
 // ES6 Config Example  
 export function config(bcKeypadConfigProvider) {  
   'ngInject';  
   // Set a default of '7' for the max length of all keypads within your module  
   bcKeypadConfigProvider.setMaxLength(7);  
 }  
 // ES5 Config Example  
 angular.module('myModule')  
   .config((bcKeypadConfigProvider) => {  
     'ngInject';  
     bcKeypadConfigProvider.setMaxLength(7);  
   })  
 ;  

setBackspaceTemplate

This allows you to specify a custom template for the backspace key.

By default it is using a raw SVG version of ion-backspace-outline from ionicons since this allows you to overwrite the SVG styles with CSS.
Demo for bcKeypadConfigProvider
 bcKeypadConfigProvider.setBackspaceTemplate('<span>↩</span>');  

setSubmitTemplate

This allows you to specify a custom template for the submit key.

By default it is using a raw SVG version of ion-log-in from ionicons since this allows you to overwrite the SVG styles with CSS.
Demo for bcKeypadConfigProvider
 bcKeypadConfigProvider.setSubmitTemplate('Go');  

setMaxLength

The directive will use this number to impose a hard limit on how many characters the model can hold. This is useful for specific data items such as a phone number:
Demo for bcKeypadConfigProvider
 bcKeypadConfigProvider.setMaxLength(10);  

Styles


The included styles are 99% layout with just enough style to work out of the box. The true styles should be written at your project level using the associated classes.

Your project CSS should always be included after any library CSS files. This makes it easy for you to override or add to any styles defined by this module. Below are the classes available for styling.
Class Element Details
 .bc-keypad  
 <div>  
Primary container (
 <div>  
) around the keypad.
 .bc-keypad__key  
 <div>  
Individual wrapper for each key.
 .bc-keypad__key--left  
 <div>  
Target the left customizable key.
 .bc-keypad__key--center  
 <div>  
Target the last number key (between the two customizable keys).
 .bc-keypad__key--right  
 <div>  
Target the right customizable key.
 .bc-keypad__key-button  
 <button>  
The button inside each key.
 .bc-keypad__key-button--backspace  
 <button>  
Target the backspace key (if used)
 .bc-keypad__key-button--submit  
 <button>  
Target the submit key (if used)
Demo for custom theming

angular-ripple


The bc-keypad directive was written primarily for mobile so it supports the Google Material 'ripple' style feedback via a module called angular-ripple. As not everyone may want that style of interaction, this project does not automatically install the angular-ripple library, but is however built to support it out of the box.
Demo for angular-ripple integration
Just install the angular-ripple library:
 $ npm install nelsoncash/angular-ripple --save  
 # or  
 $ bower install angular-ripple --save  
Include it as a dependency in your primary project:
 angular.module('YourModule', ['bc.AngularKeypad', 'angularRipple']);  
And you should see it working!

Development


  • npm run build - Build JS/CSS/HTML/SVG
  • npm run build:js - Build JS
  • npm run build:css - Build CSS
  • npm run watch:css - Watch CSS and rebuild on change
  • npm run watch:js - Watch JS/HTML and rebuild on change
  • npm run watch - Watch JS/CSS/HTML and rebuild on change


Note: Special thanks to Benjamin Charity

Contact - ben@benjamincharity.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer.
angular tubular

angular tubular

May 17, 2017

A set of AngularJS directives designed to rapidly build modern web applications - http://unosquare.github.io/tubular/

Tubular provides a set of directives and services using AngularJS as framework, the main component is a grid with multiple options:
  • Full markup design, you don't need to write even a Controller in AngularJS to start using our Grid or Form
  • Common functionality like Sorting, Filtering (specific to the data type), Free-text search, Paging and more.
  • Easy to implement inline editors, page or popup forms totally bound to your grid.
  • Basic services like Print and Export to CSV in client-side.
Developing with .NET as backend? check Tubular DotNet project. If you are looking for Angular2 support, check Tubular2 project.

Please visit the Tubular GitHub Page to learn how quickly you can start coding. Don't forget to check out the Tubular Generator which quickly turns models into an awesome UIs!

Dependencies


You will need to reference the following JS libraries in order to use Tubular in your HTML:

Mandatory


Using a CDN


You can get all the dependencies using the following links in your master HTML page. jsDelivr provides almost everything you need to import.
 <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.min.css" />  
 <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/latest/css/font-awesome.min.css" />  
 <script src="//cdn.jsdelivr.net/g/angularjs@1.6.0(angular.min.js+angular-animate.min.js+angular-route.min.js),angular.bootstrap@2.5.0(ui-bootstrap.min.js+ui-bootstrap-tpls.min.js),momentjs@2.17.1"></script>  
Then you will need to either grab your own copy of Tubular or you use jsDelivr to reference Tubular CSS and JS files.
 <link rel="stylesheet" href="//cdn.jsdelivr.net/tubular/latest/tubular-bundle.min.css" />  
 <script src="//cdn.jsdelivr.net/tubular/latest/tubular-bundle.min.js"></script>  
Finally update your modules to include Tubular, for example if your module is called app, then you will need to add Tubular as a dependency as follows:
 angular.module('app', ['tubular']);  

NuGet Installation


 PM> Install-Package Tubular  

Bower Installation


 # install Tubular package and add it to bower.json  
 $ bower install tubular --save  

npm Installation


The npm package only contains the Tubular Template Generator Module, if you want to use all of Tubular's features, please install the Bower package instead.
 # install Tubular package and add it to package.json  
 $ npm install tubular --save  

Charts


An experimental support to chart is running with Tubular and you can choose between ChartJS or Highcharts. If you want to use any of them, be sure to load the library before Tubular and check Tubular OWIN Sample with easy to understand code on how to start using charts.

Samples


You can check out the Tubular GitHub Page to get a few examples. We still need to work on more samples and better documentation, but we feel what we have now will get you up to speed very quickly :).
The following HTML represents a basic grid. You don't need to add anything else to your controller! Everything you need is to create your markup.
 <div class="container">  
     <tb-grid server-url="/data/customers.json" page-size="20"   
          class="row" grid-name="mygrid">  
       <div class="col-md-12">  
         <div class="panel panel-default panel-rounded">  
           <tb-grid-table class="table-bordered">  
             <tb-column-definitions>  
               <tb-column name="CustomerName">  
                 <tb-column-header>  
                   <span>{{label}}</span>  
                 </tb-column-header>  
               </tb-column>  
               <tb-column name="Invoices">  
                 <tb-column-header>  
                   <span>{{label}}</span>  
                 </tb-column-header>  
               </tb-column>  
             </tb-column-definitions>  
             <tb-row-set>  
               <tb-row-template ng-repeat="row in $component.rows"   
                        row-model="row">  
                 <tb-cell-template>  
                   {{row.CustomerName}}  
                 </tb-cell-template>  
                 <tb-cell-template>  
                   {{row.Invoices}}  
                 </tb-cell-template>  
               </tb-row-template>  
             </tb-row-set>  
           </tb-grid-table>  
         </div>  
       </div>  
     </tb-grid>  
   </div>  

Boilerplate


We have 3 boilerplates ready to seed your project:
Note: Special thanks to Unosquare Labs

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer