Hi i try to create simple web app. Firstly i created my first page and when i loaded it on my computer without node everything was fine. The problem appeared when i put it into node server(on localhost on the same machine), the site is loading fine and angular scripts also, but the problem is with external script which is responsible for making nice looking validation. In the browser console script is downloading with code 200 so everything should be fine but it doesnt work. Do you know maybe why it happens. The line with that script is
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
Here is my html code:
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app='app' ng-controller="ApplicationLoginCtrl">
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js"></script>
<script src="loginModule.js"></script>
</body>
</html>
Here is the view which is loading by angular script:
<div>
<div class='container-fluid'>
<div class="row justify-content-start">
<p class='mainPromoText insideLoginDivText'>zyciakjgjdfhg</p>
<p class='mainAppName insideLoginDivText'>Apka</p>
</div>
</div>
<div class='container-fluid col-sm-offset-3 col-sm-6 firstPageLogin insideLoginDivText'>
<div class="row-justify-content-start">
<form class='loginForm insideLoginDivText' data-toggle="validator" onsubmit="#">
<div class='form form-group row'>
<div class='col-sm-offset-2 col-sm-8'>
<p class='helloText insideLoginDivText'>Welcome Log in</p>
<label for="inputLogin" class="control-label"></label>
<input type="email" id='inputLogin' class='form-control input-md firstPageLoginInput' placeholder="Email" data-error="Email address is invalid" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
</div>
<div class='form-group row'>
<div class="col-sm-offset-2 col-sm-8">
<label for="inputPassword" class="control-label"></label>
<input type="password" class='form-control input-md form-control-warning firstPageLoginInput' id='password' placeholder="Password" data-error="Password is required" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
</div>
<div class='form-group row'>
<div class="col-sm-offset-2 col-sm-4 LoginButton">
<button type='button' class="btn btn-primary btn-block LoginActionButton" data-toggle='modal' data-target='#registerModal' data-backdrop="true">Register</button>
</div>
<div class="col-sm-4 LoginButton">
<button type='submit' class="btn btn-primary btn-block LoginActionButton">Log In</button>
</div>
</div>
<div class="form-group row optionLoginDiv">
<div class="col-sm-offset-2 col-sm-4 optionLoginDiv1">
<a class="insideLoginDivText" href='#' data-toggle='modal' data-target='#forgotPasswordModal' data-backdrop="true">Forgot your password?</a>
</div>
<div class="col-sm-4">
<input class='insideLoginDivText form-check-input input-xs' type='checkbox' value=''>Remember me
</div>
</div>
</form>
</div>
</div>
<div class='modal fade registerModal' id='registerModal' tabindex="-1" role='dialog' aria-labelledby='registerModal'>
<div class='modal-dialog' role='document'>
<div class="modal-content">
<div class='modal-header registerModalHeader'>
<h1 class='modal-title registerModalH5' id='exampleModalH5'>Join the fun!</h1>
<button type='button' class='close closeLoginModal' data-dismiss='modal' aria-label='Close'>
<span aria-hidden="true">×</span>
</button>
</div>
<div class='modal-body'>
<form class="" data-toggle='validator' onsubmit="#">
<div class="form-group">
<label for="inputName" class="control-label"></label>
<input type="text" id='inputName' class='form-control input-md' placeholder="Login" data-error="Login is invalid" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmail1" class="control-label"></label>
<input type="email" id='inputEmail1' class='form-control input-md' placeholder="Email" data-error="Email address is invalid" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmail2" class="control-label"></label>
<input type="email" id='inputEmail2' class='form-control input-md' placeholder="Repeat email" data-error="Repeat your email" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
<div class="form-group">
<label for="registrationPassword1" class="control-label"></label>
<input type="password" id='registrationPassword1' class='form-control input-md' placeholder="Password" data-error="Password is required" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
<div class="form-group">
<label for="registrationPassword2" class="control-label"></label>
<input type="password" id='registrationPassword2' class='form-control input-md' placeholder="Repeat password" data-error="Repeat your password" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputSecurityLogin" id='inputSecurityLoginLabel' class="control-label"></label>
<input type="text" id='inputSecurityLogin' class='form-control input-md' placeholder="Enter the result in words" data-error="Result is invalid" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
<button type='submit' class="btn btn-primary btn-block modalRegistrationButton">Create an account</button>
</form>
</div>
</div>
</div>
</div>
<div class='modal fade registerModal' id='forgotPasswordModal' tabindex="-1" role='dialog' aria-labelledby='forgotPasswordModal'>
<div class='modal-dialog' role='document'>
<div class="modal-content">
<div class="modal-header registerModalHeader" id='forgotPasswordModalHeader'>
<h1 class="modal-title registerModalH5" id='forgotPasswordModalH5'>Please add all fields</h1>
<button type='button' class="close closeLoginModal" data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class="modal-body">
<form class="" data-toggle='validator' onsubmit="#">
<div class="form-group">
<label for="inputLoginRemember" class="control-label"></label>
<input type="text" id='inputLoginRemember' class='form-control input-md' placeholder="Login" data-error="Login is invalid" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmailRemember" class="control-label"></label>
<input type="email" id='inputEmailRemember' class='form-control input-md' placeholder="Email" data-error="Email is invalid" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputSecurityRemember" id='inputSecurityRememberLabel' class="control-label"></label>
<input type="text" id='inputSecurityRemember' class='form-control input-md' placeholder="Enter the result in words" data-error="Result is invalid" required>
<div class="invalidLogin help-block with-errors"></div>
</div>
</form>
<button type="submit" class='btn btn-primary btn-block modalRegistrationButton'>Reset Password</button>
</div>
</div>
</div>
</div>
<div class='appInfoDiv container-fluid col-sm-offset-3 col-sm-6'>
<div class="row">
<div class='col-sm-4'>
<p class='insideLoginDivText insideLoginDivTextLeft'>2017@AppName</p>
</div>
<div class="col-sm-8">
<div class='col-sm-offset-3 col-sm-3 footerDiv'>
<a href="#" class='insideLoginDivText insideLoginDivTextRight'>About</a>
</div>
<div class='col-sm-3 footerDiv'>
<a href="#" class='insideLoginDivText insideLoginDivTextRight'>Privacy</a>
</div>
<div class='col-sm-3 footerDiv'>
<a href="#" class='insideLoginDivTextRight insideLoginDivText'>Contact</a>
</div>
</div>
</div>
</div>
</div>
Here is Angular script:
var app = angular.module('app', ['ngRoute'])
.config(function($locationProvider, $routeProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {controller:'ApplicationLoginCtrl', templateUrl: 'login.html'});
})
.run(function($location){
$location.path('/');
})
.controller('ApplicationLoginCtrl', function($scope){
});
Here is my node.js code on server:
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use('/', require('./controllers/static'));
var server = app.listen(3000, function(){
console.log('server is listening on 3000');
});
and here is script for server site to load static content:
var path = require('path');
var express = require('express');
var router = express.Router();
router.use(express.static(path.join(__dirname + '/../templates')));
router.use(express.static(path.join(__dirname + '/../style')));
router.use(express.static(path.join(__dirname + '/../ng')));
router.get('/', function(req, res){
res.sendFile(path.join(__dirname + '/../layouts/moj2.html'));
});
module.exports = router;
Thanks fo help
via Maciek
No comments:
Post a Comment