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
ng-vue
- 5,419