Sidebar AngularJS

eu tenho um controller SideBar que gerencia as páginas do meu site e ao clicar em um link vamos para a página.inserir a descrição da imagem aqui

Segue o código que define o controller:

(function () { 'use strict'; angular.module('centric').controller('SidebarCtrl', ['$  scope', '$  uibModal', 'AuthFactory', 'RequestFactory', function ($  scope, $  uibModal, AuthFactory, RequestFactory) {      $  scope.options = [         {             name: 'Dashboard',             href: '#/app/dashboard'         },{             name: 'Clientes',             href: '#/app/clients'         },         {             name: 'Compras',             href: '#/app/compras'         }     ];  }]); })(); 

Então, o terceiro botão da sidebar, Compras, não consegue me redirecionar para a página compras.html, apenas me redireciona para Dashboard de novo.

Compras.html tem a mesma estrutura que clientes.html, pois irei usar de base e fazer as alterações necessárias. Daí criei um compras.html na pasta app/view e colei o conteúdo de clientes.html… o que estou fazendo de errado?

Visualizar uma foto usando o html no Angularjs [pendente]

Bom dia! Tenho pouca experiência no Angular e preciso da ajuda dos senhores.

Tenho uma tela de Registro de funcionário e preciso apresentar a foto do funcionário na tela.

Já gravei a foto no banco Mysql no formato “MEDIUMBLOB”.

Implementei a rotina abaixo mas não consigo visualizar a imagem na tela. Algém poderia me ajudar?

No backend: Campo: CONTEUDO – tipo: MEDIUMBLOB L.CONTEUDO AS ‘FOTOS.CONTEUDO’

No Frontend

Foto

Resultado na tela: [object Object]

What is an easy way to format datetime in angularjs?

I’ve been around for hours to find out how to format datetime in angularjs, but there’s no easy way, too complicated. I wonder if there is.

So, I have a datetime string like 2019-06-14 12:15:00. I want to format it to 14 Jun 2019 12:15:00. I tried this in the view:

{{ 2019-06-14 12:15:00 | date : 'dd MMM yyyy hh:mm:ss' }} 

No, it’s not working. I wonder if there’s a simple way to do it. May be there’s a built-in function in angular or javascript?

AngularJS 1.8 – templateUrl displays url in view instead of the template


Summary

I’m trying to convert my angularjs components/directives over to TypeScript. Unfortunately, the templateUrl property doesn’t display the template that’s passed to it. Instead, it literally displays a partial path the template.

Code

class JumpPagerController { ...     } }  JumpPagerController.$  inject = ['$  timeout']; export const jumpPagerComponent = {     templateUrl: './jump-pager.component.html',     controller: JumpPagerController,     bindings: {         pagerPlaceholder: '@?',         pagerCurrentPage: '=',         pagerItemsPerPage: '=',         pagerTotalItems: '=',         pagerChange: '&'     } }; 

Expected

enter image description here

Actual

enter image description here

What I’ve Tried

  • Passing in the baseUrl (didn’t have high hopes here:
    • templateUrl: `$ {baseUrl}/jump-pager.component.html`
    • templateUrl: localhost:8080/jump-pager.component.html
  • template: require('...') works, but would require me to reconfigure webpack and then modify all other cases of templateUrl in .js files. This isn’t an option
  • I’ve reviewed similar questions but no one else seems to be having quite the same issue. They’re all either using JavaScript instead of TypeScript, or they’re only having an issue with the template not rendering and don’t seem to be getting the weird problem with the template path being displayed.

Recap

So you can see that I’m at a loss. What is the correct way to use templateUrl on an angularjs component using typescript and webpack?

How to let VSCode snippets suggest angularjs directives only as atributes?

My snippets are suggesting angularjs directives everywhere, not only in html tags as attributes.

I have this snippet now.

{     "ng-app": {         "prefix": "data-ng-app",         "body": "data-ng-app=\"app\"$  0"     },     "ng-bind": {         "prefix": "data-ng-bind",         "body": "data-ng-bind=\"$  1\"$  0"     },     "ng-bind-html": {         "prefix": "data-ng-bind-html",         "body": "data-ng-bind-html=\"$  1\"$  0"     },     "ng-bind-template": {         "prefix": "data-ng-bind-template",         "body": "data-ng-bind-template=\"$  1\"$  0"     },     "ng-controller": {         "prefix": "data-ng-controller",         "body": "data-ng-controller=\"$  1\"$  0"     },     "ng-model": {         "prefix": "data-ng-model",         "body": "data-ng-model=\"$  1\"$  0"     },     "ng-view": {         "prefix": "data-ng-view",         "body": "data-ng-view=\"\"$  0"     } } 

Expected: suggest only if cursor is at this position

“|” = cursor

Current: Suggest everywhere

angularJS failed redirect

I have created a login page. After login validation, i want it to redirect to a path defined in the controller. '/home'

It redirects to http://localhost:8082/#/home

But I want it be redirected to

http://localhost:8082/home

@Controller public class HomeController {     @RequestMapping("/home")     public String home() {       return "index";     } }  angular.module('myApp', []).controller('myController',     [ '$  scope', '$  http', '$  location', function($  scope, $  http, $  location) {         var username = "";         var password = "";         $  scope.add = function() {             username = $  scope.valuea;             password = $  scope.valueb;              username = 'eve.holt@reqres.in';             password = 'cityslicka';             $  http.post('https://reqres.in/api/login', {                 email : username,                 password : password             }).success(function(response) {                 console.log('response:', response);                 // $  window.location.href = '/index.html';                 //$  location.path('/home');                 console.log('login in successful. Redirect to path /home');                 $  scope.redirectToDraftPage = function() {                     console.log('redirecting to /home');                     $  location.path('/home');                  };              });          }     } ]); 

Detectar error al cargar pantalla en angularjs

no se si soy a la única que le ha ocurrido, pero tengo un proyecto en angularjs, que en ocasiones (normalmente cuando le creo nuevas directivas, cuando le agrego mas contenido al archivo de lenguajes o simplemente agrego algún cambio a un controlador) arroja un error como que no esta bien definido el modulo de esta forma

“Uncaught TypeError: angular.module(…).directive(…) is not a function”

Esto causa que se muestren las etiquetas de forma directa, por ejemplo como escribo a continuación

{{nombreBoton}} //en vez de “Botón de inicio” que es lo que contiene la variable

Pero estoy completamente segura que no hay error en lo que haya escrito, y pues voy detengo todo con el típico “Ctrl + C” ¿Desea terminar el trabajo por lotes (S/N)? y vuelvo a levantarlo con el “npm run dev” y pues al ejecutarse ya todo me aparece correctamente.

Ahora bien, como puedo evitar que esto me ocurra? pues me trae problemas al momento de mostrar una vista para iniciar sesión, pues si le ingreso los datos de usuario y clave estos mismos se reflejan en la barra de dirección (Esto solo al momento en que me muestra mal las variables en la pantalla)

Como pudiera saber que no cargo bien el front y poder por ejemplo dejar activo el ng-disable del botón de inicio?

En resumen, solo a veces me sucede que levanto el front y me muestra mal las etiquetas, esto se soluciona solo con bajar y volver a levantar el front. pero quisiera evitar que se pueda activar el botón o que pueda detectar que no cargó bien el front y poder invalidar el botón.

AngularJS repeat filter strings ending with the letter G

I have an AngularJS app, and need to display object properties that end with a G on one line, and ones without the G on another:

<div class="col"><strong>Grass</strong>   <span ng-repeat="(key, value) in player.ranking" ng-    filter="value.endsWith('G') = true">   <span class="text-success">{{key.replace('Pool', '')}} {{value}}<span ng-    if="!$  last">, &nbsp;</span></span></span> </div> <div class="col"><strong>Beach:</strong>   <span ng-repeat="(key, value) in player.ranking" ng-    filter="!value.endsWith('G')">   <span class="text-warning">{{key.replace('Pool', '')}} {{value}}<span ng-    if="!$  last">,&nbsp; </span></span>   </span> </div> 

What I have isn’t working. Can someone please help me?

Erro na execução AngularJS

estou aprendendo o AngularJS e estou com um problema ao iniciar a aplicação, está resultando dois erros no console onde já fiz várias revisão no código e não estou conseguindo resolver.

Por este motivo venho pedir uma ajuda

Erro 1 app.js:12 Uncaught SyntaxError: Unexpected token

Erro 2 angular.js:138 Uncaught Error: [$ injector:modulerr] Failed to instantiate module myApp due to:

var vApp = angular.module('myApp', []);  vApp.controller('myController', ['$  scope', function($  scope){  	$  scope.removejogador = function(jogador){ 		var removejogador = $  scope.jogadores.indexOf(jogador); 		$  scope.jogadores.splice(removejogador, 1); 	};  	$  scope.addjogador = function(){ 		$  scope.jogadores.push([ 			name: $  scope.novojogador.name, 			color: $  scope.novojogador.color, 			rate: parseInt($  scope.novojogador.rate), 			available: true 			]);  		$  scope.novojogador.name=""; 		$  scope.novojogador.color=""; 		$  scope.novojogador.rate =""; 	};  	 	$  scope.jogadores = [ 		{ 			name: "Ana", 			color: "green", 			rate: 50, 			available: true 		}, 		{ 			name: "Paula", 			color: "purple", 			rate: 30, 			available: true 		}, 		{ 			name: "Pedro", 			color: "orange", 			rate: 10, 			available: true 		}, 		{ 			name: "Mario", 			color: "black", 			rate: 1000, 			available: true 		} 	];  }]);
body{   font-family: Helvetica;   margin: 0; }  h1,h2,h3{   margin: 0; }  .cor{   padding: 5px 10px;   border-radius: 10px;   margin-left: 5px;   color: #fff;   font-size: 15px;   text-transform: uppercase; }  #menu-bar{   background: crimson;   color: #fff;   padding: 10px; }  #menu-bar h1{   font-size: 24px;   font-weight: normal;   display: inline-block; }  #menu-bar ul{   float: right;   list-style-type: none;   padding: 0;   margin: 6px 0; }  #menu-bar li{   float: right;   margin-left: 20px; }  #menu-bar a{   color: #fff }  main{   background: #eee;   width: 80%;   margin: 30px auto;   border-radius: 10px; }  .content{   padding: 20px; }  .content button, .content input[type="submit"]{   background: #fff;   padding: 10px;   border-radius: 10px;   cursor: pointer;   color: #777;   border: 0;   box-shadow: 2px 2px 2px rgba(20,20,20,0.1);   font-size: 16px; }  .content button:nth-child(2){   float: right; }  .content ul{   padding: 0;   list-style-type: none;   margin: 30px 0; }  .content li{   padding: 15px 0;   border-top: 1px solid #e2e2e2;   color: #444; }  .content li span{   float: right; }  .content li h3{   display: inline-block;   font-weight: normal;   font-size: 22px; }  .content input{   width: 90%;   padding: 10px 5%;   border-radius: 10px;   border: 2px solid #ddd;   margin: 10px 0; }  .content input[type="submit"]:last-child{   width: 150px;   display: block;   margin: 15px auto; }  .remove{   float: right;   padding: 5px;   background: #fff;   width: 18px;   text-align: center;   border-radius: 20px;   color: crimson;   cursor: pointer;   margin-left: 10px; }
<!DOCTYPE html> <html ng-app="myApp"> <head> 	<title>Angular js - ng-submit directive</title> 	<link rel="stylesheet" type="text/css" href="css\styles.css"> 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.js"></script> 	<script type="text/javascript" src="app\app.js"></script> </head> <body> 	<div id="menu-bar"> 		<h1>Diretorio de Jogadores</h1> 		<ul> 			<li><a href="">Inicio</a></li> 			<li><a href="">Lista de Jogadores</a></li> 		</ul> 	</div> 	 	<div class="content"> 		<div ng-controller="myController"> 			<button ng-click="vorder = 'name'">Ordenar por nome</button> 			<button ng-click="vorder = 'color'">Ordenar por cor</button> 			<input type="text" ng-model="search" placeholder="Digite o nome"> 			<ul> 				<li ng-repeat="jogador in jogadores | orderBy: vorder | filter: search" ng-show="jogador.available"> 					<h3>{{jogador.name}} - {{jogador.rate | currency:'$  '}}</h3> 					<div class="remove" ng-click="removejogador(jogador)">x</div> 					<span class="cor" style="background: {{jogador.color}}"> cor {{jogador.color}} </span> 				</li> 			</ul> 			 			<form ng-submit="addjogador()"> 				<input type="text" placeholder="name" ng-model="novojogador.name"> 				<input type="text" placeholder="color" ng-model="novojogador.color"> 				<input type="text" placeholder="rate" ng-model="novojogador.rate"> 				<input type="submit" value="Adicionar"> 			</form> 		 		</div>	 	</div> </body> </html>