Quiero mostrar 2 componentes, los componentes se llaman teken-view y label-view, entonces en mi pagina principal index.html tiene el siguiente contenido:
<script src="bundle.js"></script>
<body ng-app="app">
<teken-view></teken-view>
<label-view></label-view>
</body>
uso webpack, mi archivo webpack.config.js es:
var path = require('path');
module.exports = {
entry: [
'./node_modules/angular/angular.min.js',
'./public/app/app.js',
'./public/label/labe.js'
],
output: {
path: path.join(__dirname + '/public'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader'
}
]
}
};mi app.js
import angular from 'angular';
class AppCtrl {
constructor() {
this.repo_name = 'inicio de la app';
}
}
var appView = function app() {
return {
templateUrl: 'app/app.html',
controller: 'AppCtrl',
controllerAs: 'app'
}
};
var app = angular.module("app", []);
app.directive("tekenView", appView);
app.controller('AppCtrl', AppCtrl);
el file app.html
<div>
<h2>Hello AngularJS!</h2>
<div class="repo">{{app.repo_name}}</div>
</div>
ahora los archivos del otro componente: labe.js
import angular from 'angular';
class LabelCtrl {
constructor() {
this.repo_name = 'JALAs';
}
}
var labelView = function app() {
return {
templateUrl: 'label/label.html',
controller: 'LabelCtrl',
controllerAs: 'app'
}
};
var app = angular.module("label", []);
app.directive("labelView", labelView);
app.controller('LabelCtrl', LabelCtrl);
file label.html
<div>
<h2>Segundo componente!</h2>
</div>
pero solo muestra el contenido del componente teken-view
- Hello AngularJS!
inicio de la app
mi codigo se encuentra en:https://github.com/x-rw/Angular-components-Express-Webpack