Started transfer to angularjs

@@ -5,6 +5,8 @@
     "insert-css": "^0.2.0"
     "insert-css": "^0.2.0"
   },
   },
   "dependencies": {
   "dependencies": {
+    "angular": "^1.5.0-rc.0",
+    "angular-resource": "^1.5.0-rc.0",
     "babel-runtime": "^5.8.29",
     "babel-runtime": "^5.8.29",
     "bootstrap-sass": "^3.0.0",
     "bootstrap-sass": "^3.0.0",
     "dropzone": "^4.0.1",
     "dropzone": "^4.0.1",

+<div class="toggle-switch" ng-click="switch()" ng-class="{'active': isActive}">
+    <input type="hidden" ng-attr-name="{{name}}" ng-attr-value="{{value}}"/>
+    <div class="switch-handle"></div>
+</div>
\ No newline at end of file

-
-<template>
-    <div class="toggle-switch" @click="switch" :class="{'active': isActive}">
-        <input type="hidden" :name="name" :value="value"/>
-        <div class="switch-handle"></div>
-    </div>
-</template>
-
-
-<script>
-    module.exports = {
-        props: ['name', 'value'],
-        data: function() {
-            return {
-                isActive: this.value == true && this.value != 'false'
-            }
-        },
-        ready: function() {
-            this.value = (this.value == true && this.value != 'false') ? 'true' : 'false';
-        },
-        methods: {
-            switch: function() {
-                this.isActive = !this.isActive;
-                this.value = this.isActive ? 'true' : 'false';
-            }
-        }
-    };
-</script>
\ No newline at end of file

+
+var toggleSwitchTemplate = require('./components/toggle-switch.html');
+
+module.exports = function(ngApp) {
+
+    /**
+     * Toggle Switches
+     * Have basic on/off functionality.
+     * Use string values of 'true' & 'false' to dictate the current state.
+     */
+    ngApp.directive('toggleSwitch', function() {
+        return {
+            restrict: 'E',
+            template: toggleSwitchTemplate,
+            scope: true,
+            link: function(scope, element, attrs) {
+                scope.name = attrs.name;
+                scope.value = attrs.value;
+                scope.isActive = scope.value == true && scope.value != 'false';
+                scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
+
+                scope.switch = function() {
+                    scope.isActive = !scope.isActive;
+                    scope.value = scope.isActive ? 'true' : 'false';
+                }
+
+            }
+        };
+    });
+
+
+};
\ No newline at end of file

+// Configure ZeroClipboard
 window.ZeroClipboard = require('zeroclipboard');
 window.ZeroClipboard = require('zeroclipboard');
 window.ZeroClipboard.config({
 window.ZeroClipboard.config({
     swfPath: '/ZeroClipboard.swf'
     swfPath: '/ZeroClipboard.swf'
 });
 });
 
 
+// AngularJS - Create application and load components
+var angular = require('angular');
+var angularResource = require('angular-resource');
+var app = angular.module('bookStack', ['ngResource']);
+var directives = require('./directives')(app);
+
 // Global jQuery Elements
 // Global jQuery Elements
 $(function () {
 $(function () {
 
 
@@ -23,32 +30,8 @@ $(function () {
 
 
 });
 });
 
 
-function elemExists(selector) {
-    return document.querySelector(selector) !== null;
-}
-
 // TinyMCE editor
 // TinyMCE editor
 if(elemExists('#html-editor')) {
 if(elemExists('#html-editor')) {
     var tinyMceOptions = require('./pages/page-form');
     var tinyMceOptions = require('./pages/page-form');
     tinymce.init(tinyMceOptions);
     tinymce.init(tinyMceOptions);
 }
 }
\ No newline at end of file
-
-// Vue JS elements
-var Vue = require('vue');
-Vue.use(require('vue-resource'));
-
-// Vue Components
-Vue.component('image-manager', require('./components/image-manager.vue'));
-Vue.component('image-picker', require('./components/image-picker.vue'));
-Vue.component('toggle-switch', require('./components/toggle-switch.vue'));
-
-// Vue Controllers
-if(elemExists('#book-dashboard')) {
-    new Vue(require('./pages/book-show'));
-}
-
-// Global Vue Instance
-// Needs to be loaded after all components we want to use.
-var app = new Vue({
-    el: '#app'
-});
\ No newline at end of file

@@ -19,7 +19,7 @@
 
 
     @yield('head')
     @yield('head')
 </head>
 </head>
-<body class="@yield('body-class')" id="app">
+<body class="@yield('body-class')" ng-app="bookStack">
 
 
     @include('partials/notifications')
     @include('partials/notifications')