I was trying to use a href to turn over the html pages.I searched the necessary codes to use,however I am getting the strange link when I click the button.
http://localhost:8080/#%7Bindex%7D
this link has been displayed when I wanted to open index page.However,it is working when I write the link manually like this : http://localhost:8080/index
Here is what I actually tried
HomeController.java
package io.javabrains;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
#Controller
public class HomeController {
#GetMapping("/index")
public String index() {
return "index";
}
#GetMapping("/tables")
public String tables() {
return "tables";
}
}
index.html
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="#{index}">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
Well, you missed the "th:". Use the below code
<a class="nav-link" th:href="#{index}">
Related
<!-- this working fine, load all bootstrap files -->
<li class="nav-item" id="products">
<a class="nav-link" href="/productlist">Products</a>
</li>
<!-- this failed to laod bootstap file when i add one more /string in href -->
<li class="nav-item" id="products">
<a class="nav-link" href="/productlist/id">Products</a>
</li>
#working fine
#RequestMapping(value= "/productlist")
public ModelAndView productlist() {
ModelAndView mv = new ModelAndView();
mv.addObject("categoryList", categoryService.getAllCategory());
mv.setViewName("products");
return mv;
}
#failed to load bootstrap file
#RequestMapping(value= "/productlist/id")
public ModelAndView product() {
ModelAndView mv = new ModelAndView();
mv.addObject("categoryList", categoryService.getAllCategory());
mv.setViewName("products");
return mv;
}
When I put href="/productlist/id", my code is failed to load bootstrap file but it working fine in case of href="productlist"
Failed to load bootstrap file
I changed static file path and add slash before the path.
before
<script src="assets/js/myapp.js"></script>
after
<script src="/assets/js/myapp.js"></script>
This is my Header component
import React from "react";
function Header() {
return (
<div classname = "header">
<nav classname = "navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div classname = "container">
<button classname = "navbar-toggler" data-toggle="collapse" data-target = "#Navbar">
<span classname = "navbar-toggler-icon"></span>
</button>
<h3>Portfolio</h3>
<div classname="btn-group">
<button type="button" classname="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My networking
</button>
<div classname="dropdown-menu">
<a classname="dropdown-item" href="https://docs.google.com/document/d/1iJ1v7HyfodCWvg5OSQIXbUATrBM9mPwdqeIzKuld1qs/edit">Resume</a>
<a classname="dropdown-item" href="https://www.linkedin.com/in/tyler-goodman-39b289195/">LinkedIn</a>
<a classname="dropdown-item" href="https://github.com/KawaiiSlave">Github</a>
</div>
</div>
<div classname = "collapse navbar-collapse" id = "Navbar">
<ul classname = "navbar-nav ml-auto">
<li classname = "nav-item">About Me</li>
<li classname = "nav-item">Skills</li>
<li classname = "nav-item">My Projects</li>
<li classname = "nav-item">My Contact Info</li>
</ul>
</div>
</div>
</nav>
</div>
);
}
export default Header;
Here is my app.js file
import React from 'react';
import './App.css';
import Header from "./components/Header/header";
import About from './components/About/about';
function App() {
return (
<div className="App">
<Header/>
<About/>
</div>
);
}
export default App;
Ive got my stuff to render, but Im confused on where I should put my css. Does it go into the app.css file provided, or is it better off inside the living component, as that components css? If someone could give an example with their own css that would help tremendously. Im just kinda overwhelmed with react starting out. Thank you!
If you want to create specific CSS for your different components, you could use modules. I tend to make 'CSS modules' when I am creating a component I will use often, for instance a card module.
If you have a Card.js component, for instance, you might create a file called card.module.css.
At the top of Card.js, I would then import this using
import style from './card.module.css';
Within Card.js you can then add a className to an element using a JSX expression which accesses the imported style like so
<div className={style.header}>
Within the card.module.css file, you can then write css for .header
.header {
// your CSS here
}
To re-iterate, your Card.js file will access .header through the imported 'style'. If you were to add more CSS in your module, such as
.wrapper {
// your CSS here
}
You could then too access that in your Card.js with
className={style.wrapper}
I am building a site using Angular 6 and have been stuck for a few days now on a problem. I am trying to change text color (list items) on a navbar based on the active page. I have seen examples on how to do this using AngularJS and javascript. I have come across the routerActiveLink library documentation at https://angular.io/api/router/RouterLinkActive library for Angular 5+ which seems to be a simple solution, but it is not working for me. I have tried many different examples I have seen online and none have worked. Am I missing something? Here are some code snippets:
header.component.html
<div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
<li class="main-links" [routerLinkActive]="['active']">
<a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
</li>
<li class="main-links">
<a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
</li>
<li class="main-links">
<a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
</li>
<li class="main-links">
<a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
</li>
<li class="main-links">
<a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
</li>
<li class="main-links">
<a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
</li>
</ul>
This is my declaration for active in header.component.less:
.active {
color: #009fdb;
font-family: font-bold;
}
When I use [routerLinkActive] with the brackets, the page does not load at all, and when I user routerLink and routerLinkActive in the a tag, it does not register at all. Are there some imports I am missing. I have tried importing router, routerlinkactive, and routerlink from #angular/core.
I purposely left both different styles of using routerLinkActive in the code example. It was not like this when I actually ran it.
I have Angular 6, bootstrap 4.1.1, jquery 3, and popperjs installed.
After further review, I have discovered that routerLinkActive works correctly on elements inside the root app-module. I created a new module for my header and footer called UiModule and the functionality is not working inside the header. Any ideas on how to get routerLinkActive to work on this module?
Try importing RouterModule into your UiModule, it won't be able to make use of that imported in your app.module.ts file
import { RouterModule } from '#angular/router';
// some other imports here
#NgModule({
imports: [
RouterModule
],
exports: [
// export UI components
],
declarations: [
// declare UI components
]
})
When I had this issue, I imported everything right. It took me days before I figured the problem was from how I structured my HTML
<li class="nav-list">
<a routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}"
routerLink="/"
href="/">
<i class="material-icons nav-link-icon">person</i>
<span class="nav-link-text">Profile</span>
</a>
</li>
The problem there was that I was watching for the .active class to appear in the li element while it had always been appearing in the anchor element. Just be sure that is not what is happening in your case.
I have an issue with the <a href="#"> in my AngularJS app.
My main issue is on the:
<em class="fa fa-bars"></em>
navigation.html -> this is a template of navigation directive.
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2 bg-faded sidebar-style-1">
<h1 class="site-title"><em class="fa fa-rocket"></em> Brand.name</h1>
<em class="fa fa-bars"></em>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item"><a class="nav-link active" href="index.html"><em class="fa fa-dashboard"></em> Dashboard <span class="sr-only">(current)</span></a></li>
</ul>
<em class="fa fa-power-off"></em> Signout</nav>
index.html
<body ng-app="test" class="body-bg" ng-style="bgimg" ui-view>
</body>
app.js
var app = angular.module("test", ["ui.router");
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
// login route
.state("login", {
url:"/",
controller: "LoginController",
templateUrl: "pages/login/login.html"
})
// admin route
.state("admin", {
url:"/admin",
controller: "AdminController",
templateUrl: "pages/admin/admin.html"
})
And currently I am doing a SPA routing using ui-sref of ui-router.
The problem is everytime I click the button, I get redirected to the default state $urlRouterProvider.otherwise('/');.
How I can do something similar to that HTML href="#" with AngularJS ui-sref?
Or is there other ways?
from the code in the question I can say that, the normal usage of href will result in redirection so you need to use data-target, can you please try this?
<a data-target="#menu-toggle" data-toggle="collapse" class="btn btn-default"><em class="fa fa-bars"></em></a>
JSFiddle: here
if you have jQuery (which you probably do)
inside your head tag...
<script>
$(document).ready(function(){
$('[href="#menu-toggle"]').click(function(event){
event.preventDefault();
})
});
</script>
Basically keeps the link from routing via window navigation.
You can easily test by pasting this code into your browser console..
$('[href="#menu-toggle"]').click(function(event){
event.preventDefault();
})
You can use a combination of href and ng-click to solve your problem.
<em class="fa fa-power-off"></em> Signout</nav>
Where signOut() is a function on your controller.
1.Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it. (or) href="javascript:void(0);"
for your reference: Angular-UI-Router: should i avoid href with ui-router?
So I have this code snippet in spring mvc
<a class="nav-item is-hidden-mobile is-active roboto strong letter-space-1" href="">HOME</a>
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href="about.jsp"> ABOUT </a>
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href=""> CONTACT </a>
But when I click on the ABOUTon my landing page, it won't redirect, instead it displays error code 404. Are there other things to fix before I can redirect there, besides in the html file?
Try to create an endpoint in Controller that will return your about.jsp on some URL like that:
#Controller
public class HelloController {
#RequestMapping("/hello-about")
public String getHelloAbout(ModelMap model) {
return "/WEB-INF/jsp/about.jsp";
}
}
And change your link to point not to the about.jsp file but to the endpoint "/hello-about".
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href="/hello-about"> ABOUT </a>