Initial Commit

.jshintrc

@@ -0,0 +1,43 @@
+{
+    "node": true,
+    "browser": true,
+    "esnext": true,
+    "bitwise": true,
+    "camelcase": true,
+    "curly": true,
+    "eqeqeq": true,
+    "immed": true,
+    "indent": 2,
+    "latedef": true,
+    "newcap": true,
+    "noarg": true,
+    "quotmark": "single",
+    "regexp": true,
+    "undef": true,
+    "unused": true,
+    "strict": true,
+    "trailing": true,
+    "smarttabs": true,
+    "globals": {
+        "jQuery": true,
+        "angular": true,
+        "console": true,
+        "$": true,
+        "_": true,
+        "moment": true,
+        "describe": true,
+        "beforeEach": true,
+        "afterEach": true,
+        "module": true,
+        "inject": true,
+        "it": true,
+        "expect": true,
+        "browser": true,
+        "element": true,
+        "by": true,
+        "contentRange": true,
+        "d3":true,
+        "jasmine":true,
+        "typeof": true
+    }
+}

bower.json

@@ -1,5 +1,5 @@
 {
-  "name": "d3boilerplate",
+  "name": "AdvancedAngular",
   "version": "0.0.0",
   "authors": [
     "Joe Pavitt <[email protected]>"
@@ -14,8 +14,9 @@
     "tests"
   ],
   "dependencies": {
-    "d3": "~3.5.5",
+    "d3": "~3.5.6",
     "angular": "~1.4.1",
-    "bootstrap": "~3.3.5"
+    "bootstrap": "~3.3.5",
+    "angular-ui-router": "~0.2.15"
   }
 }

client/app/app.js

@@ -1,76 +1,55 @@
-/* The array here should detail the App's dependencies, even if
-there aren't any, this should remain an empty array, since this
-is also the trigger to create a new module.*/
-
-angular.module('App', [])
-
-// Controller - this could/should be separated into it's own app.controller.js,
-// but given that this is the only controller in this module, it has been left here for simplicity
-.controller("AppCtrl", ['$scope', 'myService',
-    function($scope, /*Inject myService*/ myService ) {
-        $scope.showtab = 1;
-        $scope.showcolor = 'red';
-        $scope.bytes = 1234;
-        $scope.arrayOfPeople = [{
-            "name" : "Joe Pavitt",
-            "number" : 123
-        },{
-            "name" : "John Bufe",
-            "number" : 456
-        },{
-            "name" : "Andy Stoneberg",
-            "number" : 789
-        }];
-
-        $scope.randomiseNumbers = function(){
-            $scope.arrayOfPeople.forEach(function(d,i){
-                $scope.arrayOfPeople[i].number = Math.random()*1000;
-            });
-        };
-
-        /* Write functions using $scope that use myService - assigning them to
-        scope makes them accessible from the HTML */
-
-        // demonstrate a HTTP get request
-        $scope.getStuff = function () {
-            myService.get().then(/*define what to do next*/ function(data) {
-                console.log('Successful Response of:');
-                console.log(data);
-            }, /*define what to do if there is an error*/ function (error) {
-                console.log('Error in GET, with the following response:');
-                console.log(error);
-            });
-        };
-
-        $scope.postDevice = function (name) {
-            // I am compiling the device object here, but you could equally
-            // send just a device name and create the JSON in the service's function
-            var dvcObject = {
-                'device' : name
-            };
-            // call the local function 'postData'
-            postData(dvcObject);
-        };
-
-        /* Demonstrate a 'bad request' - posting the wrong data such that the rest api returns a 400 error */
-        $scope.postDeviceBadRequest = function (name) {
-            // the object should use the 'device' key, so the 'device-name' key
-            // should trigger a 'bad request' - this behaviour is defined by the REST API in sample.controller.js
-            var dvcObject = {
-                'device-name' : name
-            };
-            // call the local function 'postData'
-            postData(dvcObject);
-        };
-
-        function postData(dvcObject) {
-            myService.postDevice(dvcObject).then(/*define what to do next*/ function(data) {
-                console.log('Successful Response of:');
-                console.log(data);
-            }, /*define what to do if there is an error*/ function (error) {
-                console.log('Error in POST, with the following response:');
-                console.log(error);
-            });
-        }
+'use strict';
+
+angular.module('advanced-angular-app', ['ui.router'])
+
+.config(function($urlRouterProvider, $stateProvider, $locationProvider) {
+    $locationProvider.html5Mode({
+        enabled: true
+    });
+
+    $urlRouterProvider
+        .otherwise('tutorial');
+
+    $stateProvider
+        .state('main', {
+            url: '/',
+			abstract: true,
+            /*templateUrl: 'app/overall.html',*/
+            controller: 'AppCtrl'
+        })
+		.state('tutorial', {
+            url: '/tutorial',
+            templateUrl: 'app/tutorial/tutorial.html'
+            /*controller: 'TutorialCtrl'*/
+        })
+		.state('directives', {
+            url: '/directives',
+            templateUrl: 'app/directive-scope-examples/directive-scope-examples.html',
+            controller: 'DirectiveScopeExamplesCtrl'
+        })
+		.state('data', {
+            url: '/data',
+			abstract: true,
+            templateUrl: 'app/data/data.html',
+            controller: 'DataCtrl'
+        })
+		.state('data.table', {
+            url: '',
+            templateUrl: 'app/data/data.table.html'
+        })
+		.state('data.cards', {
+            url: '',
+            templateUrl: 'app/data/data.cards.html',
+            controller: 'CardsController',
+			params: {
+				cards : null
+			}
+        });
+})
+
+.controller('AppCtrl', ['$scope',
+    function($scope) {
+		$scope.hello = 'Hello Controller';
+        console.log($scope.hello);
     }
 ]);

client/app/data/data.cards.controller.js

@@ -0,0 +1,15 @@
+'use strict';
+
+angular.module('advanced-angular-app')
+.controller('CardsController', ['$scope', '$state', '$stateParams',
+    function($scope, $state, $stateParams) {
+
+		console.log($stateParams);
+		$scope.cards = $stateParams.cards;
+
+		$scope.currentCard = 1;
+		$scope.slideCards = function (increment) {
+			$scope.currentCard += increment;
+		};
+    }
+]);

client/app/data/data.cards.html

@@ -0,0 +1,13 @@
+<div class="col-xs-4 col-xs-offset-4">
+	<div reusable-carousel-container>
+		<div reusable-carousel active-panel="{{ currentCard }}">
+			<div reusable-carousel-panel ng-repeat="card in cards">
+				{{ card }}
+			</div>
+		</div>
+	</div>
+</div>
+<div class="col-xs-12" style="margin-top: 10px">
+	<button ng-click="slideCards(-1)" class="col-xs-6">Left</button>
+	<button ng-click="slideCards(1)" class="col-xs-6">Right</button>
+</div>

client/app/data/data.controller.js

@@ -0,0 +1,33 @@
+'use strict';
+
+angular.module('advanced-angular-app')
+
+.controller('DataCtrl', ['$scope',
+    function($scope) {
+		$scope.data = {
+			'cols' : [{
+				'key' : 'col1',
+				'text' : 'Column 1 Heading'
+			}, {
+				'key' : 'col2',
+				'text' : 'Column 2 Heading'
+			}, {
+				'key' : 'col3',
+				'text' : 'Column 3 Heading'
+			}],
+			'rows' : [{
+				'col1' : 1,
+				'col2' : 2,
+				'col3' : 3
+			}, {
+				'col1' : 5,
+				'col2' : 3,
+				'col3' : 10
+			}, {
+				'col1' : 2,
+				'col2' : 3,
+				'col3' : 7
+			}]
+		};
+    }
+]);

client/app/data/data.html

@@ -0,0 +1,2 @@
+<h2>Here's some data</h2>
+<div ui-view=""></div>

client/app/data/data.table.html

@@ -0,0 +1,2 @@
+<button ui-sref="data.cards({cards: data})">Show Cards</button>
+<reusable-table table-data="data"></reusable-table>

client/app/directive-scope-examples/directive-scope-controlled.html

@@ -0,0 +1,25 @@
+<div class="row" style="margin: 0px">
+	<div class="black-border small-padding row">
+		<input class="col-xs-12" ng-model="isolatedVariable">
+		<p style="margin-top:10px;" class="col-xs-12">{{ isolatedVariable }}</p>
+	</div>
+	<div class="black-border small-padding small-margin--top row">
+		<div reusable-carousel-container style="width:100%; border:none">
+			<div reusable-carousel active-panel="{{ activePanel }}">
+				<div reusable-carousel-panel class="img-container">
+					<img src="../../assets/images/directives-scope-controlled-1.png">
+					<p>An explanation about the first image</p>
+				</div>
+				<!--
+				-->
+				<div reusable-carousel-panel class="img-container">
+					<img src="../../assets/images/directives-scope-controlled-2.png">
+				</div>
+			</div>
+		</div>
+		<div>
+			<button class="col-xs-6 btn btn-primary" ng-click="shiftActivePanel(-1)" ng-disabled="activePanel === 0">Left</button>
+			<button class="col-xs-6 btn btn-primary" ng-click="shiftActivePanel(1)" ng-disabled="activePanel === 1">Right</button>
+		</div>
+	</div>
+</div>

client/app/directive-scope-examples/directive-scope-examples.css

@@ -0,0 +1,26 @@
+.directive-container {
+	padding: 5px 10px;
+}
+
+.directive-container img {
+	width: 100%;
+	max-width: 200px;
+}
+
+.directive-container .img-container {
+	width: 100%;
+	text-align: center;
+}
+
+.black-border {
+	border: 1px solid black;
+}
+.small-padding {
+	padding:5px;
+}
+.no-margin {
+	margin: 0px;
+}
+.small-margin--top {
+	margin-top: 5px;
+}

client/app/directive-scope-examples/directive-scope-examples.directives.js

@@ -0,0 +1,63 @@
+'use strict';
+
+angular.module('advanced-angular-app')
+	.controller('DirectiveScopeExamplesCtrl', ['$scope', function ($scope) {
+		$scope.parentVariable = 'Hello World';
+	}])
+
+
+
+
+.directive('directiveScopeFalse', function () {
+		return {
+			restrict: 'E',
+			replace: true,
+			templateUrl: 'app/directive-scope-examples/directive-scope-false.html',
+			controller: ['$scope', function ($scope) {
+				$scope.activePanel = 0;
+				$scope.shiftActivePanel = function(increment) {
+					var newPanel = $scope.activePanel + increment;
+					if (newPanel >= 0 && newPanel < 2) {
+						$scope.activePanel += increment;
+					}
+				};
+			}],
+			scope: false
+		};
+	})
+	.directive('directiveScopeTrue', function () {
+		return {
+			restrict: 'E',
+			replace: true,
+			templateUrl: 'app/directive-scope-examples/directive-scope-true.html',
+			controller: ['$scope', function ($scope) {
+				$scope.activePanel = 0;
+				$scope.shiftActivePanel = function(increment) {
+					var newPanel = $scope.activePanel + increment;
+					if (newPanel >= 0 && newPanel < 2) {
+						$scope.activePanel += increment;
+					}
+				};
+			}],
+			scope: true
+		};
+	})
+	.directive('directiveScopeControlled', function () {
+		return {
+			restrict: 'E',
+			replace: true,
+			templateUrl: 'app/directive-scope-examples/directive-scope-controlled.html',
+			controller: ['$scope', function ($scope) {
+				$scope.activePanel = 0;
+				$scope.shiftActivePanel = function(increment) {
+					var newPanel = $scope.activePanel + increment;
+					if (newPanel >= 0 && newPanel < 2) {
+						$scope.activePanel += increment;
+					}
+				};
+			}],
+			scope: {
+				isolatedVariable: '='
+			}
+		};
+	});