0

Buenos días. Estoy trabajando en un proyecto de una página web en el que uso Angularjs.
El caso es que mandaron hacer un controller donde use un .component y el template y no tengo ni idea de como se hace, empecé hacer algo mirando en internet pero no me funciona asi. La cosa es que cuando abro mi pagina me aparece una barra encima de todo donde sale una opcion que se llama 'informacion', cuando pincho en 'informacion me tendria mostrar lo que haga supuestamente con el .component.

Os dejo aqui todo el código que estoy usando.

El java script donde intento usar el component:

    angular.module('formApp', ['ui.router']);

    angular.module('formApp').config(function ($stateProvider) {
    $stateProvider
        .state('informacion', {
            url: 'informacion',
            controller: 'InfoAppCtrl as form',
            templateUrl: '/scripts/templates/info.html'

         .component('AppForm', {
             template: '<div class="container text-center" style="padding-top:60px;" ui-view></div>'

         })
        })

});

Aqui os dejo el controlador que hice aparte del principal para crear el template:

angular.module('formApp').controller('AppRespCtrl', function ($scope, $http) {

    var validarResp = this;
    validarResp.name = 'respuesta';
});

El HTML:

<h1>Template respuesta {{AppForm.name}}</h1>

Y el Layout donde situo el div para que se me muestre lo que os comente antes:

<div class="container body-content">
        @RenderBody()
        @RenderSection("SPAViews", required: false)
        <hr />
        <footer>

            <div class="container text-center" style="padding-top:20px;" ui-view></div>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

        </footer>
    </div>
4
  • 1
    cual es el error que recibes?
    – sioesi
    Commented el 9 nov. 2016 a las 12:19
  • 1
    Pues me dice que formApp no es válido cuando antes de hacer lo del component me iba todo perfectamente, y muchos mas errores de este estilo Commented el 9 nov. 2016 a las 12:23
  • youtube.com/… ve este link y te enseñan a declarar correctamente un component!
    – sioesi
    Commented el 9 nov. 2016 a las 12:29
  • vale gracias : ) Commented el 9 nov. 2016 a las 12:30

1 respuesta 1

0

Pero este código que pones está mal:

   angular.module('formApp', ['ui.router']);

    angular.module('formApp').config(function ($stateProvider) {
    $stateProvider
        .state('informacion', {
            url: 'informacion',
            controller: 'InfoAppCtrl as form',
            templateUrl: '/scripts/templates/info.html'

         .component('AppForm', {
             template: '<div class="container text-center" style="padding-top:60px;" ui-view></div>'

         })
        })

});

Tendría que ser algo como esto:

angular.module('formApp')
    .config(function($stateProvider) {
    $stateProvider
      .state('informacion', {
        url: 'informacion',
        controller: 'InfoAppCtrl as form',
        templateUrl: '/scripts/templates/info.html'
      });
  })
  .component('AppForm', {
    template: '<div class="container text-center" style="padding-top:60px;" ui-view></div>'
  });

Por lo demás los componentes son casi iguales que las directivas de siempre, pero con un par de peculiaridades. Todd Motto escribió un artículo bastante claro sobre los componentes, y la documentación está bastante bien

Te paso un jsfiddle para que veas lo sencillo que es:

https://jsfiddle.net/zevane/x0dcfe49/

1
  • si, al final el error era que cambiaba el nombre del modulo y solo debia cambiar el nombre de los controladores. Gracias de todas formas por la respuesta que tambien me ha sido util! ;) Commented el 18 nov. 2016 a las 9:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.