using vuex

Author: arcadeJHS

README.md

@@ -6,16 +6,25 @@
 			'<div class="app-Search">' +
 			'	<input type="text" placeholder="search" ng-model="$ctrl.searchInput" />' +
 			'	<button ng-disabled="!$ctrl.searchInput" ng-click="$ctrl.search($ctrl.searchInput)">Search</button>' +
+			'	(results count: {{$ctrl.resultsCount()}})' +
 			'</div>',
-		controller: ['searchService', function (searchService) {
+		controller: ['$scope', 'searchService', 'VuexStore', 'utilities', 'VueAngularEventBus', function ($scope, searchService, VuexStore, utilities, VueAngularEventBus) {
+			var render = utilities.safeApply.bind($scope);
 
 			angular.extend(this, {
 				searchInput: '',
 				search: function (searchParam) {
-					searchService.query(searchParam);
+					searchService.query(searchParam).then(render);
+				},
+				resultsCount: function () { 
+					return VuexStore.getters['resultsCount'];
 				},
 				$onInit: function () {
 					console.log('Component "search" ready');
+					VueAngularEventBus.$on('result-added', render);
+				},
+				$onDestroy() {
+					VueAngularEventBus.$off('result-added', render);
 				}
 			});
 

code/angularApp/components/search.js

@@ -4,7 +4,10 @@ import 'ngVue';
 import 'ngVue/build/plugins.js';
 import VueAppContainer from '@/vueCode/components/VueAppContainer';
 import { SearchService } from '@/ngVueBridgeCode/services/searchService';
+import { Utilities } from '@/ngVueBridgeCode/services/utilities';
 import { router } from '@/vueCode/router';
+import store from '@/vueCode/store';
+import { VueAngularEventBus } from '@/ngVueBridgeCode/utilities/VueAngularEventBus.js';
 
 
 const ngVueComponentsModule = angular.module('ngVueComponents', ['ngVue', 'ngVue.plugins']);
@@ -20,16 +23,28 @@ ngVueComponentsModule.directive('vueAppContainer',
 // global vue plugins
 ngVueComponentsModule.config(($ngVueProvider) => {
 	$ngVueProvider.setRootVueInstanceProps({ router: router });
+	$ngVueProvider.setRootVueInstanceProps({ store: store });
 });
 
 
 
 // services
 ngVueComponentsModule.service('searchService', SearchService);
+ngVueComponentsModule.service('utilities', Utilities);
 export let searchService;
 ngVueComponentsModule.run($injector => {
 	searchService = $injector.get('searchService');
 });
 
 
+
+// enable access to Vuex from angular code
+ngVueComponentsModule.factory('VuexStore', [() => store]);
+
+
+
+// create an angular factory for vue-angular communication event bus
+ngVueComponentsModule.factory('VueAngularEventBus', [() => VueAngularEventBus]);
+
+
 export default ngVueComponentsModule;

code/vueApp/dist/js/appVueLib.js

@@ -1,24 +1,18 @@
 export class SearchService {
 	/** @ngInject */
-	constructor($timeout) {
+	constructor($timeout, VuexStore) {
 		this.$timeout = $timeout;
 		this.store = {
 			searching: false,
 			searchParam: '',
 			searchResults: [],
 			currentDetail: null
 		};
+		this.VuexStore = VuexStore;
 	}
 
-	executeQuery (searchParam) {
-		return this.$timeout(function () {
-			// mock data
-			return [
-				{ id: 1, name: 'Result One', value: "We're all mad here. I'm mad. You're mad.", more: "What do you hear? Nothin' but the rain, sir. Grab your gun and bring the cat in." },
-				{ id: 2, name: 'Result Two', value: 'Are you Alive? Yes. Prove it.', more: "Sometimes I've believed as many as six impossible things before breakfast." },
-				{ id: 3, name: 'Result Three', value: 'Do you have any idea why a raven is like a writing desk?', more: "She’s right, Gaius. The end times are approaching. Humanity’s final chapters are about to be written. And you - you will be its author." }
-			];
-		}, 2000);
+	executeQuery(searchParam) {
+		return this.VuexStore.dispatch('getResults', searchParam);
 	}
 
 	resolveQuery(results) {

code/vueApp/dist/js/appVueLib_NgVueBridge.js

@@ -0,0 +1,8 @@
+import SafeApply from '@/ngVueBridgeCode/utilities/SafeApply';
+
+export class Utilities {
+	/** @ngInject */
+	constructor() {
+		this.safeApply = SafeApply;
+	}
+};

code/vueApp/dist/js/appVueLib_VendorsDependencies.js

@@ -0,0 +1,10 @@
+export default function (fn) {
+	var phase = this.$root.$$phase;
+	if (phase == '$apply' || phase == '$digest') {
+		if (fn && (typeof (fn) === 'function')) {
+			fn();
+		}
+	} else {
+		this.$apply(fn);
+	}
+};

code/vueApp/src/ngVueBridgeCode/ngVueComponentsModule.js

@@ -0,0 +1,15 @@
+/* 
+ * 	Event bus to share events between Vue e Angular 
+ *
+ *	= Use in Vue =
+ *	import { VueAngularEventBus } from './vueAngularEventBus.js';
+ *	VueAngularEventBus.$emit('custom-event-name', params);
+ *
+ *	= Use in Angular =
+ *	You can use it exactly as in Vue (see above) or you can wrap it into an angular factory and take advantage of dependency injection:
+ *	import { VueAngularEventBus } from './vueAngularEventBus.js';
+ *	ngVueComponentsModule.factory('VueAngularEventBus', [() => VueAngularEventBus]);
+ */
+
+import Vue from 'vue';
+export const VueAngularEventBus = new Vue();