3

Estoy viendo un tutorial de AngularJS sigo todos los pasos que veo en el video pero en la etiqueta <div> cuando pongo ng-v no me aparece en las opciones el ng-view, de todas maneras yo lo completo de forma manual pero cuando voy a la página no me carga nada y tampoco me sale error. ¿Cómo puedo solucionar esto?
Estoy usando la última versión del AngularJS (1.7.2) y en el tutorial utilizan la versión 1.4.0

Este es mi index HTML

<!doctype html>
<html ng-app="CustomDirective">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./autocomplete-jquery-ui.structure.css">
    <link rel="stylesheet" href="./style.css">
    <title>Directiva con AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-route.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="./autocomplete-jquery-ui.js"></script>
    <script src="./app.js"></script>
    <script src="./directives.js"></script>
    <script src="./controllers.js"></script>
  </head>
  <body>
      <div ng-view></div>
  </body>
</html>

Este es mi JS

angular.module("CustomDirective", ["ngRoute"])
.config(function($routeProvider){
    $routeProvider
        .when("/",{
            controller: "ReposController",
            templateurl: "templates/home.html"
        })
        .when("/repo/:name",{
            controller: "RepoController",
            templateurl: "templates/repo.html"
        })
        .otherwise("/");
});

Y este es mi home HTML

<input type="text" my-autocomplete="repos" placeholder="Buscar repositorio">
    <ul class="no-list">
        <li ng-repeat="repo in posts" ng-hide="main_repo && main_repo != repo.name">
            <a href="#/repo/{{repo.name}}">
                <div class="circular" back-img="{{repo.owner.avatar_url}}"></div>
                <h1 class="inline-block">{{repo.full_name}}</h1>
            </a>
        </li>  
    </ul>
<a id="limpiar" ng-show="main_repo" ng-click="clean()">Limpiar</a>

6
  • A qué te referís con que "no te aparecen las opciones al escribir ng-v"?
    – Kleith
    Commented el 9 ago. 2018 a las 15:07
  • Hola @Kleith creo que hace referencia al momento en que estamos en el editor de texto, y este autocompleta de acuerdo al atributo o directiva que queramos usar.
    – jecorrales
    Commented el 9 ago. 2018 a las 15:11
  • Hola @Kleith cuando yo escribo ng-v me aparecen varias opciones para autocompletar, me aparecen por ejemplo: ng-value, ng-mouseover, ng-class-even, pero en esas opciones no aparece ng-view Commented el 9 ago. 2018 a las 15:15
  • Eso pertenece al editor de texto, no es un problema de angular. Igualmente estaría bueno que también compartas el archivo app.js. Tengo la sensación de que no estás agregando el módulo al main.
    – Kleith
    Commented el 9 ago. 2018 a las 15:16
  • 1
    @JackNavaRow según la documentación no, puede ser de ambas maneras.
    – Kleith
    Commented el 9 ago. 2018 a las 15:18

2 respuestas 2

1

Lo que comúnmente realizo para mostrar las plantillas que tengo para mis aplicaciones en Angular es utilizar la directiva ui-view de AngularJS. Como lo muestro a continuación:

Link de UI-Router: Router

Documento HTML

   <!doctype html>
    <html ng-app="appOperario">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./style.css">
        <title>Directiva con AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="js/appOperarioEmpresa.js"></script>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
      </head>
      <body>
         <!--Clase contenedora que se encarga de cargar las plantillas de AngularJS-->
        <div class="container" >
          <ui-view></ui-view>
        </div>
      </body>
    </html>

Documento Angular

var app = angular.module('appOperario', ['ui.router' , 'ngPagination'])
//Establecer los componentes de vistas que alimentan la app.
.config(function($stateProvider, $urlRouterProvider)
{
  //Declarar estado panelDeControl
  $stateProvider
  .state('panelDeControl',
  {
      url: "/panelDeControl",
      templateUrl: "views/operarioPanelControl.html"
  })

  //Declarar los empleados
  .state('empleadosEmpresa',
  {
      url: "/empleadosEmpresa",
      templateUrl: "views/operarioEmpleados.html"
  });

  //Declaracion de direccion diferente, para redireccionar a la vista por defecto
  $urlRouterProvider.otherwise('/panelDeControl');
});

Además, para direccionar de acuerdo a la plantilla que quieras ver:

<a ui-sref="empleadosEmpresa">Empleados</a>

Y por ultimo cuando haces referencia a lo siguiente:

Estoy viendo un tutorial de AngularJS sigo todos los pasos que veo en el video pero en la etiqueta cuando pongo ng-v no me aparece en las opciones el ng-view, de todas maneras yo lo completo de forma manual

Las distintas opciones se autocompletan de acuerdo a los plugins o extensiones de tu editor de texto, así que por ende no te va a mostrar error alguno, porque depende es de lo mencionado con anterioridad y no del framework de programación.

6
  • Hola @jecorrales no he probado con ui.router, me podrias hacer el favor de pasarme el link donde puedo descargar la libreria. Commented el 9 ago. 2018 a las 15:28
  • Hola @JuanAlzate te he dejado el link en la respuesta. Además te recomiendo que comiences con las ultimas versiones de Angular, dado que es completamente diferente, tiene ciertas facilidades para programar,al principio será complejo pero puedes hacerlo.
    – jecorrales
    Commented el 9 ago. 2018 a las 15:31
  • en esta línea .state('panelDeControl', el panelDeControl hace referencia al nombre del controller? Commented el 9 ago. 2018 a las 15:47
  • No, es el Identificador que se le da a la plantilla, por lo que esta aparecerá en la URL del navegador, no seria como tal mipagina.com/plantillaPanelControl.html sino que sería mipagina.com/panelDeControl, además es a la que le haces referencia para decirle a ui.routes a cual ruta apuntar, por ello usamos <a ui-sref="panelDeControl ">Panel</a> como ejemplo
    – jecorrales
    Commented el 9 ago. 2018 a las 15:49
  • 1
    si me funcionó, muchas gracias! Commented el 9 ago. 2018 a las 19:18
0
<a href="#/repo/{{repo.name}}">

En angular 1.7.x en lugar de / se utiliza ! por tanto quedaría:

<a href="#!repo/{{repo.name}}">

Con eso debería funcionar

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.