elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  mostrar varios componentes con angular
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: mostrar varios componentes con angular  (Leído 1,439 veces)
bengy


Desconectado Desconectado

Mensajes: 501


mis virtudes y defectos son inseparables


Ver Perfil WWW
mostrar varios componentes con angular
« en: 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:
<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:
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:
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:
<div>
    <h2>Hello AngularJS!</h2>
    <div class="repo">{{app.repo_name}}</div>
</div>
ahora los archivos del otro componente: labe.js

Código:
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:
<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


« Última modificación: 29 Enero 2018, 05:11 am por .rn3w. » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como mostrar entre varios paneles
Java
jclaurian 1 2,852 Último mensaje 17 Abril 2008, 00:49 am
por Lu15_CL4
redireccionar en angular JS
Desarrollo Web
landerzx 0 3,429 Último mensaje 23 Agosto 2013, 16:23 pm
por landerzx
JTable: Seleccionar Fila Y Mostrar Los Datos En Componentes JTextField
Java
Skar.2007 1 3,289 Último mensaje 10 Abril 2015, 21:03 pm
por Usuario Invitado
Angular JS (Angular Material)
Desarrollo Web
carwen 3 3,698 Último mensaje 20 Junio 2016, 21:46 pm
por daniela Vega
Ayuda! ¿Cómo mostrar los datos de varios archivos en java?
Dudas Generales
cris4537 0 2,977 Último mensaje 12 Septiembre 2016, 02:20 am
por cris4537
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines