preject restructured / bower support

stherrienaspnet · Apr 5, 2015 · 5d7e45a · 5d7e45a
1 parent 5a37278
commit 5d7e45a
Show file tree

Hide file tree

Showing 10 changed files with 438 additions and 410 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+bower_components
+node_modules
+dist
+.tmp
+.sass-cache
+.project
+.settings
diff --git a/README.md b/README.md
@@ -1,9 +1,8 @@
-ngRadialGauge
-=============
+# ngRadialGauge
 
-Angular.js Radial Gauge (with bower support)
+Angular.js Radial Gauge
 
-![alt tag](https://raw.github.com/stherrienaspnet/ngRadialGauge/master/ngRadialGauge/ngRadialGaugeDemo.png)
+![alt tag](https://raw.github.com/stherrienaspnet/ngRadialGauge/master/ngRadialGaugeDemo.png)
 
 This radial gauge builded using D3.js JavaScript library is designed for Angular.js framework.
 
@@ -35,19 +34,31 @@ List of directive attributes:
 **If the value provided by the controller is outside the limits defined, the needle won't be display but the value will   be display.**
 
 
-Html view sample code usage:
-``` 
-<body ng-app="myApp">
-    <div ng-controller="RadialGaugeCtrl">
-        <div width="300" ng-radial-gauge ranges="ranges" value="value" value-unit="unit" 
-        precision="precision" lower-limit="lowerLimit" upper-limit="upperLimit"></div>
-    </div>
-</body>
+## Installation
+
+You can install with Bower:
+
+`bower install ngRadialGauge`
+
+## Usage
+
+You need to include the module in your project:
+
+```JavaScript
+// in your app
+angular.module('myApp', ['ngRadialGauge']);
 ```
 
-Controller sample code usage:
+Then create the content:
+```HTML
+<div width="300" ng-radial-gauge ranges="ranges" value="value" value-unit="unit" 
+     precision="precision" lower-limit="lowerLimit" upper-limit="upperLimit">
+</div>
 ```
-app.controller('RadialGaugeCtrl', ['$scope', function ($scope) {
+
+The variables must be provided, e.g., in your controller:
+```JavaScript
+app.controller('MyCtrl', ['$scope', function ($scope) {
     $scope.value = 1.5;
     $scope.upperLimit = 6;
     $scope.lowerLimit = 0;

diff --git a/ngRadialGauge/ngRadialGauge/src/bower.json → bower.json b/ngRadialGauge/ngRadialGauge/src/bower.json → bower.json
@@ -1,25 +1,29 @@
 {
   "name": "ngRadialGauge",
   "version": "1.0.0",
-  "description": "Angular.js Radial Gauge",
-  "main": "index.html",
+  "description": "AngularJS Radial Gauge",
+  "main": "./src/ng-radial-gauge-dir.js",
   "keywords": [
-    "Angular.Js",
+    "AngularJS",
     "Radial",
-    "Gauge"
+    "Gauge",
+    "d3"
   ],
   "authors": [
     "Stephane Therrien"
   ],
   "license": "MIT",
   "homepage": "https://github.com/stherrienaspnet/ngRadialGauge",
   "ignore": [
-    ".jshintrc",
-    "**/*.txt"
+     ".jshintrc",
+     "**/*.txt",
+     "node_modules",
+     "bower_components",
+     "test"
   ],
   "dependencies": {
-     "d3": "~3.4.4",
-     "angular": "~1.2.28",
+     "d3": "~3.4.0",
+     "angular": "~1.3.0",
      "jquery": "~2.1.0"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>ngRadialGauge Demo</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="../src/ng-radial-gauge-dir.js"></script>
+    <script>
+
+    angular.module('RadialGaugeDemo', [
+      'ngRadialGauge'
+    ]);
+
+    angular.module('RadialGaugeDemo').controller('RadialGaugeDemoCtrl', ['$scope', function ($scope) {
+        $scope.value = 1.5;
+        $scope.upperLimit = 6;
+        $scope.lowerLimit = 0;
+        $scope.unit = "kW";
+        $scope.precision = 2;
+        $scope.ranges = [
+            {
+                min: 0,
+                max: 1.5,
+                color: '#DEDEDE'
+            },
+            {
+                min: 1.5,
+                max: 2.5,
+                color: '#8DCA2F'
+            },
+            {
+                min: 2.5,
+                max: 3.5,
+                color: '#FDC702'
+            },
+            {
+                min: 3.5,
+                max: 4.5,
+                color: '#FF7700'
+            },
+            {
+                min: 4.5,
+                max: 6.0,
+                color: '#C50200'
+            }
+        ];
+    }]);    
+
+    </script>
+</head>
+<body ng-app="RadialGaugeDemo">
+    <div ng-controller="RadialGaugeDemoCtrl">
+        <div width="300" ng-radial-gauge ranges="ranges" value="value" value-unit="unit" precision="precision" lower-limit="lowerLimit" upper-limit="upperLimit"></div>
+    </div>
+</body>
+</html>
diff --git a/ngRadialGauge/ngRadialGauge/src/index.html b/ngRadialGauge/ngRadialGauge/src/index.html
diff --git a/ngRadialGauge/ngRadialGauge/src/scripts/controllers/ng-radial-gauge-ctrl.js b/ngRadialGauge/ngRadialGauge/src/scripts/controllers/ng-radial-gauge-ctrl.js