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' } ] } }; el arbol de mi proyecto es:
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: git x-rw angular-webpack-express
