mostrar varios componentes con angular

.rn3w. · 29 Enero 2018, 05:08 AM

Quiero mostrar 2 componentes, los componentes se llaman teken-view y label-view, entonces en mi pagina principal index.html tiene el siguiente contenido:

Código [Seleccionar]

<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:

Código [Seleccionar]

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

Código [Seleccionar]

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

Código [Seleccionar]

<div>
    <h2>Hello AngularJS!</h2>
    <div class="repo">{{app.repo_name}}</div>
</div>

ahora los archivos del otro componente: labe.js

Código [Seleccionar]

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

Código [Seleccionar]

<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

Test Foro de elhacker.net SMF 2.1

mostrar varios componentes con angular

.rn3w.