I am having trouble getting my routes to work in my Angular application. It is properly displaying the main template, but when I click on the link for the other template, nothing happens. Here's my code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Node, NPM and Bower</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="app">
<nav>
<h3>Angular App</h3>
Home
About
</nav>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="./app/app.js"></script>
</body>
</html>
APP.JS
angular.module("app", ["ngRoute"]).
config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Home</h1>"
})
.when("/about", {
template : "<h1>About</h1>"
});
});
Also, is there a reason that Bootstrap and Angular don't work at all when I try to use a localhost with Express and Node? for instance, if I pull up index.html in my browser the text is sans-serif, etc., but if I pull it up using localhost, it's still the default serif font.
SERVER.JS
var express = require('express');
var app = express();
var path = require('path');
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function() {
console.log('app started');
});
Angular 1.5
So with basic 1.5 routing you need to use:
About
To hit the route. See Plunker for more info
Angular 1.6
If you are using angular 1.6 it's:
About
Look at AngularJS: ngRoute Not Working for other options.
Bootstrap problem
There shouldn't be any problem, it's properly caching.
I figured out the answer. You need to tell the server to route your static files from their directories like so:
app.use(express.static(__dirname + '/views'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/public', express.static(__dirname + '/public'));
Related
I cant get my index.html in express to show the styles.
This is my folder structure:
And then on server js I have this:
app.use(express.static(path.join(__dirname, '/public')));
app.use(useragent.express());
app.get('/', function(req, res){
console.log('Listening on port ' + port)
let isMobile = req.useragent.isMobile ? 'mobile' : 'desktop';
console.log({isMobile})
res.sendFile(path.resolve(__dirname + `/${isMobile}/index.html`));
});
And I just add the link tag on my html inside the head on the index.html like this:
<link href="styles.css" rel="stylesheet" type="text/css">
The index I serve can be either inside the desktop or mobile folder
But it doesnt get the styles... any idea whats the issue?
Thanks.
server.js
app.use(express.static(path.join(__dirname, 'server/public')
index.html
<link href="/styles.css" rel="stylesheet" type="text/css">
I try to made another route for my 'web-educational-only' it works when the route is '/' but when i try to linked in with 'about' page, it's show 'Cannot Get /about'
here's the code for app.js:
const express = require('express');
const app = express();
app.set('views','./view');
app.use(express.static('assets'));
app.get('/', (req, res) => {
res.render('index.ejs');
});
app.get('/about', (req, res) => {
res.render('about.ejs');
});
app.listen(3000);
and here's for about.ejs (the file is in view folder):
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<script src="/send_url.js"></script>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<h1>It's About the Page</h1>
<p class="alert">made for educational only</p>
</body>
</html>
can you see what's the problem there? thank you
if you make any change in any file of your project then restart your server every time
use nodemon package in your project so that after making any changes in file you won't have to manually restart the server, nodemon will detect changes and restart your server every time you make any change
I need help with routing using ui.router.
My folder structure looks like this:
In my app.js under javascripts looks like this:
var app = angular.module('testing', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html'
})
.state('client_form', {
url: '/request',
templateUrl: '/client.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
My index.ejs looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/app.js"></script>
</head>
<body ng-app="testing">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</body>
</html>
home.ejs:
<div class="page-header text-center" style="font-size:45px">
Hacker List
</div>
<div class="text-center">
<a href="worker.html">
<button type="submit" class="btn btn-primary btnBig">Worker</button>
</a>
<br />
<a href="Client.html">
<button type="submit" class="btn btn-primary btnBig">Client</button>
</a>
</div>
When I do npm start and go to the website, I get an infinite loop of it not finding home.html.
I can make the code in home.ejs appear if I make it inline inside index.ejs using <script type="text/ng-template" id="/home.html">HOME_CODE_HERE</script>; however, I don't want to do that.
I'm not sure how to fix this.
The ui.router is AngularJS, not NodeJS.
Probably the infinite loop problem is in your front-end, not in NodeJS routes.
Out of the AngularJS problem, I would say that Express routes are in the back-end, so after a request (from Angular, browser, link, redirection etc) the responsibility and configuration needed to work is in NodeJS + Express + EJS.
Let's say you make a request to your /index.html. Once the request gets in the back-end, NodeJS will assume how to handle it.
So, to make sure you don't have a problem in NodeJS, check your app.js (used in node - probably in the root of your project). It could have the routing config similar with this:
var express = require('express');
var app = express();
// EJS template config
app.set('views','./views');
app.set('view engine','ejs');
app.use(bodyParser.urlencoded({ extended: true })); //support x-www-form-urlencoded
app.use(bodyParser.json());
// This is your routes
app.get('/', function(req, res) {
// Your code for index
res.render('views/index', { param : "This is a EJS test" });
});
app.get('/index.html', function(req, res) {
// Your code for index
res.render('views/index', { param : "This is a EJS test" });
});
app.get('/anotherPage.html', function(req, res) {
// Your code for another page: can include validations here
res.render('views/anotherPage', { param : "This is a EJS test" });
});
Now you would have your route set in NodeJS, then you could set your EJS files. Your home.ejs can be exactly the same.
The index.ejs file would be a little different. Maybe you could write it like this (I removed AngularJS from it for testing purposes):
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
This is a parameter from the back-end: <%= param %>
This is the index of EJS template. Below the snipped inserted:
<div class="col-md-6 col-md-offset-3">
<% include home.ejs %>
</div>
</body>
</html>
There are some good examples about routes and EJS in Express github page:
https://github.com/expressjs/express/tree/master/examples
I think that eliminating the problem with NodeJS can help you to fix the problem that seems to be in AngularJS.
Hope it's somehow helpful.
I created a simple Node JS program. I have index.html in the same folder that app.jsis located and external css and js files within public/stylesheets/style.css and /public/javascripts/script.js directories. When i open the index.html directly form the browser, css file is syccessfully linked to the html file. But when i run node app.js and navigate to http://localhost:3000, the index.html is displayed but any style didn't have effected to it. How can i solve it?
app.js file is this
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
server.listen(3000);
app.get('/', function(req, res){
res.sendfile(__dirname + '/index.html');
});
index.html file is this
<html>
<head>
<title>Sanitizor</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="public/javascripts/script.js"></script>
<link rel="stylesheet" type="text/css" href="public/stylesheets/style.css">
</head>
<body>
<h3>hello</h3>
<div id="chat"></div>
<form id="sent-message">
<input size="35" id="message"></input>
<input type="submit"></input>
</form>
</body>
</html>
You need to enable static serving :
app.use(express.static(path.join(__dirname, 'public'))); //this line enables the static serving in the public directory
your public directory could be the following :
public
|_css
|_js
|_images
|_logo.png
Then, if you want to get an image :
http://localhost:3000/images/logo.png
And if you want to show it in your html page :
<img id="logo" src="/images/logo.png"/>
In your case, replace the following line
<script src="public/javascripts/script.js"></script>
by
<script src="/javascripts/script.js"></script>
Same goes with the css
Like Cristy already stated in her comment, you need to enable static serving of your resource files. In order to do so you use express.static. Express has good documentation and guides about routing or middleware etc, so check it out.
Consider a file structure like:
/app
/public/index.html
/stylesheets/style.css
/javascripts/script.js
Your app folder contains the app.js and the rest is ordered like discribed.
Your app.js:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
app.use(express.static(__dirname + '/public'));
var io = require('socket.io').listen(server);
server.listen(3000);
app.get('/', function(req, res){
res.sendfile(__dirname + '/public/index.html');
});
Most of the time the order is important so you need to be carefull. In order to configure express you can use app.configure(function() {...}); and put all you app.use(...) commands in there.
Your index.html now should look like:
<html>
<head>
<title>Sanitizor</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/script.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
<h3>hello</h3>
<div id="chat"></div>
<form id="sent-message">
<input size="35" id="message"></input>
<input type="submit"></input>
</form>
</body>
</html>
My server using angular for routing. My server sending to the browser a HTML file that contains js file with routing (using angular js).
my server code (send to browser check.html contains the routing file main.js) :
var express = require("express");
var app = express(); // express.createServer();
app.use(express.static(__dirname + '/public'));
app.get("/*", function(request, response) {
response.sendFile(__dirname + '/public/check.html');
});
app.listen(8080);
check.html code:
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>
after the browser gets the check.html file he doesnt redirect it to main.js in order to use the routing. I tried to debug it but the browser is stuck without doing nothing. my app is local and the url im trying to connect to is:
http://localhost:8080/stations
and all the files are loaded correctly without any errors on the console.
main.js code:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'HomeController',
templateUrl: 'menu.html'
})
.when('/stations',
{
controller: 'StationsController',
templateUrl: 'check2.html'
})
.when('/',
{
controller: 'HomeController',
templateUrl: 'menu.html'
})
.otherwise({redirectTo: '/'});
});
myApp.controller('StationsController', function($scope){
$scope.check = {name:"ELAD!!"};
});
check2.html code:
<html>
<head>
</head>
<body>
<div>
<p>{{check.name}}</p>
</div>
</body>
</html>
Ok let's start fresh on angular..
Angular 101
You may know angular is essential for Single Page Application so what happens is you supply the first page that is check.html in your case but you should name it index.html it's a convention. khair.. what happens is when a route transition occurs in the your angular code that is something after # an it's purely client end or a soft redirection. so angular fires an AJAX request to retrieve the resource matching your templateUrl from router. then plugs it inside the <div ng-view></div> thus the redirection. notice the ng-view.
Well bellow is the proposed solution
the link should be http://localhost:8080/#stations as the angular matches handles the routes after #. Other routes like the link you provided are handed to the server.
your check.html should look like this.
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and your check2.html should be in your public directory and have the code like
<div>
<p>{{check.name}}</p>
</div>