ngVue

Hi! I'm Nicolas Payot

Front-End Developer [ Dawex ]

(Disclaimer: I AM NO VUE.JS EXPERT...)

WHAT?

NG component

Vue 2.0 component

WHY?

Gradually migrate from AngularJS to Vue.js

Better Developer eXperience

Use better performances

One-way data-binding

Unobtrusive reactivity system

  • AngularJS module: use Vue 2.0 components in NG apps
    • The `vue-component` directive
    • The `createVueComponent` factory
 npm install --save ngVue

HOW?

AngularJS component

 <body ng-app="app">
   <app>Loading...</app>
 </body>
 import App from './App';

 angular
   .module('app', [])
   .component('app', App);
 export default App = {
   template: `<div>{{$ctrl.hello}}</div>`,
   controller() {
     this.$onInit = () => {
       this.hello = 'Hello, World!';
     };
   }
 };

App.js

AngularJS component

 <body ng-app="app">
   <app>Loading...</app>
 </body>
 import App from './App';

 angular
   .module('app', [])
   .component('app', App);
 export default App = {
   template: `<div>{{$ctrl.hello}}</div>`,
   controller() {
     this.$onInit = () => {
       this.hello = 'Hello, World!';
     };
   }
 };

index.js

AngularJS component

 <body ng-app="app">
   <app>Loading...</app>
 </body>
 import App from './App';

 angular
   .module('app', [])
   .component('app', App);
 export default App = {
   template: `<div>{{$ctrl.hello}}</div>`,
   controller() {
     this.$onInit = () => {
       this.hello = 'Hello, World!';
     };
   }
 };

index.html

Vue 2.0 component

 <template>
   <div>{{hello}}</div>
 </template>

 <script>
 export default {
   data() {
     return { hello: 'Hello, World!' }
   }
 }
 </script>
 <body>
   <div id="app">Loading...</div>
 </body>
 new Vue({
   el: '#app',
   template: '<App/>',
   components: { App }
 })

App.vue

Vue 2.0 component

 <template>
   <div>{{hello}}</div>
 </template>

 <script>
 export default {
   data() {
     return { hello: 'Hello, World!' }
   }
 }
 </script>
 <body>
   <div id="app">Loading...</div>
 </body>
 new Vue({
   el: '#app',
   template: '<App/>',
   components: { App }
 })

main.js

Vue 2.0 component

 <template>
   <div>{{hello}}</div>
 </template>

 <script>
 export default {
   data() {
     return { hello: 'Hello, World!' }
   }
 }
 </script>
 <body>
   <div id="app">Loading...</div>
 </body>
 new Vue({
   el: '#app',
   template: '<App/>',
   components: { App }
 })

index.html

vue-component

 <template>
   <div>Hello {{firstName}} {{lastName}}!</div>
 </template>
 
 <script>
 export default {
   props: {
     firstName: String,
     lastName: String
   }
 }
 </script>

Hello.vue

vue-component

 export const App = {
   template: `
     <vue-component
       name="Hello" vprops="$ctrl.person">
     </vue-component>
   `,
   controller() {
     this.person = { firstName: 'John', lastName: 'Doe' };
   }
 };
 <vue-component
   name="Hello"
   vprops-first-name="$ctrl.person.firstName"
   vprops-last-name="$ctrl.person.lastName">
 </vue-component>

App.js

OR

App.js HTML template v2

vue-component

 import angular from 'angular';
 import Vue from 'vue';
 import ngVue from 'ngVue';

 import App from './App';         // AngularJS component
 import Hello from './Hello.vue'; // Vue component

 angular
   .module('ngVueApp', ['ngVue'])
   .component('app', App)
   .value('Hello', Vue.component('Hello', Hello));

index.js

Use of AngularJS `$injector` service to get `Hello` component

createVueComponent

 export const App = {
   template: `
     <hello vprops="$ctrl.person"></hello>
   `,
   controller() {
     this.person = { firstName: 'John', lastName: 'Doe' }     
   }
 };
 
 <hello
   vprops-first-name="$ctrl.person.firstName"
   vprops-last-name="$ctrl.person.lastName">
 </hello>

OR

App.js

App.js HTML template v2

createVueComponent

 import angular from 'angular';
 import Vue from 'vue';
 import ngVue from 'ngVue';

 import App from './App';         // AngularJS component
 import Hello from './Hello.vue'; // Vue component

 angular
   .module('ngVueApp', ['ngVue'])
   .component('app', App)
   .directive('hello', createVueComponent =>
     createVueComponent(Vue.component('Hello', Hello)));

index.js

DEMO

THANK YOU ALL

ng-vue

By Nicolas Payot