I am trying to understand how to remove #! from the url in angularjs using ng-route .
Can please someone help me with the exact steps I need to follow in order to remove #!.
Here is the code
index.html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="a02.js"></script>
</head>
<body ng-app="testApp">
Hello there
<hr>
Click Me
<div ng-view></div>
</body>
</html>
a02.js
var app = angular.module("testApp", ['ngRoute']);
app.config(["$routeProvider",function($routeProvider){
$routeProvider.when('/test',{
template:"<strong>It's routing template</strong>"
})
}]);
My requirement is when click on click me link it should display
It's routing template.
But when browser loads index.html the url is coming as
http://localhost:3000/index.html#!/
and when I click on Click Me link the url is coming as
http://localhost:3000/index.html#!/#test
I want this url and link to be work without #!.
in your js router file you need to add:
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
and in your index html file (head tag) you need to add:
<base href="/">
Related
Would pure angular and css/html work in a local machine?
In my case, I'm not getting any errors, but at the same time the messages won't show any output. Any idea why?
Some of the code:
<head>
<link rel="stylesheet" type="text/css" href="/C:somethinghere\style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="/C:somethinghere\app.js"></script>
</head>
<body class="parent" ng-app="myApp">
{{ messages }}
</div>
app:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.messages = "hello";
$scope.ratings = [{test: 22},{test: 99}];
}]);
NOTE: the links are correct, i just changed the links to now show my username.
The answer is: Yes, angular works on a local machine.
The problem in your code is that you are not assigning the controller to the view, you are missing the ng-controller="GreetingController" inside your view.
So to fix that, just enclose {{ messages }} inside a div tag with ng-controller attribute.
A solution might look like that:
<body class="parent" ng-app="myApp">
<div ng-controller="GreetingController">
{{ messages }}
</div>
</body>
Also, please notice that in your HTML, you opened a <body> tag but you closed it with </div> tag. You missed the </body> enclosing tag and you missed a <div> opening tag.
Another small tip:
Try to use relative paths instead of absolute paths when you load CSS/JS files.
Just write <link href='styles/style.css'> instead of <link href='c:/.../styles/style.css'>. This path assumes that you have a styles folder in the same folder that your HTML file exists.
So, I have a server.js file which loads an index.html file.
The question is, is there any way to import another html file in index.html.
To simplify, let's say I have an html file named footer.html and I want to import it in my index.html. How can I do it?
you can inline send your html, or use 'fs' module to read html file and send it.
but it is better to use template engine, like ejs, handlebar, etc.
see this tutorial for more info
https://scotch.io/tutorials/use-ejs-to-template-your-node-application
You can use jquery to accomplish this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includedContent").load("index.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.
I was wondering how to add a header (or just any html file) into another html file. I tried using iframes, but it just redirected what was inside of the iframe. Once I finish my website, I will probably have a lot of pages, so it will be very useful to just be able to add a header that can be updated by only changing one file, instead of having to change it on all of the pages. Does anyone know how to do this? Thanks in advance.
With jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
With JavaScript without jQuery:
<html>
<body>
<script src="b.js"></script>
</body>
</html>
b.js:
document.write('\
\
<h1>This is my include file</h1>\
\
');
With PHP:
<?php include('b.html');?>
For this to work you may have to modify the .htaccess file on your web server so php may be interpreted within .html files. You should see, or add, this within your .htaccess file:
RemoveHandler.html
AddType application/x-httpd-php .php .html
With Service Side Includes (SSI):
<!--#include virtual="a.html" -->
With HTML5:
<object name="foo" type="text/html" data="foo.inc"></object>
Alternatively:
<embed type="text/html" src="foo.inc">
I have searched for no javascript way but I couldn't make it work. Here is the simplest way of including HTML
you can create html files for header, footer, content, anything you want to have in a separate file and all you need to do is:
1.put this in your page
<script src="https://www.w3schools.com/lib/w3.js"></script>
you could also download the w3.js and upload it to your server files
<script src="/lib/w3.js"></script>
2.then where ever you want your html code, from the separate file, to be included to your page:
<div w3-include-html="header.html"></div>
for example
Google
<div w3-include-html="footer.html"></div>
<h1>Title of current page</h1>
<div w3-include-html="content.html"></div>
include the next code anywhere after the previous "include" codes
<script>w3.includeHTML();</script>
source w3schools.com How TO - Include HTML
so this is how it can look
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div w3-include-html="header.html"></div>
<script>w3.includeHTML();</script>
<html>
<head>
</head>
<body>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'abc.html' );
});
});
</script>
<div id="content">
<p>Here comes some content</p>
</div>
<div>Link</div>
</body>
</html>
In the code, i want to load abc.html content inside with id="content" when link inside is clicked.
This code does not work. Can anyone please help me..
I think your syntax is fine... This is probably a path issue. Remember that using "abc.html" as the path means that you are looking for a file called "abc.html" in the current directory.
For confirmations sake, check that abc.html is not empty, then make sure it is in the same folder as the calling file (or specify the correct path to the file). If that then works, then I suggest reading up on Absolute vs. Relative paths/URLs.