I'm using ng-route to show a page called "london.htm" (in the same directory of my principal page) into this principal page, such this example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/">Main</a></p>
<a href="#london">City 1</a>
<a href="#paris">City 2</a>
<p>Click on the links to read about London and Paris.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
</script>
</body>
</html>
This is my principal page, when I call <div ng-view></div> to show "london.htm" page:
<!DOCTYPE html>
<!-- saved from url=(0069)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="images/puzzle.png" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="styles/angular-bootstrap-datepicker.css" />
<link rel="stylesheet" href="styles/mainBoot.css">
<link rel="stylesheet" href="styles/scrollbar.css">
<link rel="stylesheet" href="styles/noscroll_numberfield.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> -->
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="scripts/deployeePanel.js"></script>
<script src="scripts/rest-services.js"></script>
<script src="scripts/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<!-- <script src="scripts/emailchecker.js"></script> -->
<script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script>
<!-- <script src="scripts/number-directive.js"></script> -->
<script type="application/javascript"></script>
<title>Pannello dipendenti</title>
<!-- Bootstrap core CSS -->
<link href="./styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./styles/dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style id="holderjs-style" type="text/css"></style></head>
<body ng-app="StaffManagement" ng-controller="StaffController" background="images/sfondoblu3.png">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">FDDispenser</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Pannello Dipendenti</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Settings</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Profile</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="edit_employee.html">Aggiungi/Modifica Dipendente</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Reports</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Analytics</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Nav item</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Nav item again</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">One more nav</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Another nav item</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Nav item again</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">One more nav</a></li>
<li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-view></div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script src="./Dashboard Template for Bootstrap_files/jquery.min.js.download"></script> -->
<script src="./scripts/bootstrap.min.js.download"></script>
<script src="./scripts/docs.min.js.download"></script>
</body></html>This is my js page when I make call ng-route:
var app = angular.module("StaffManagement", ['ng-bootstrap-datepicker','ngRoute']);
//Controller Part
app.controller("StaffController", function($scope, $filter, $http, restService) {
$scope.staffs = [];
$scope.staffLast = [];
$scope.staffForm = {
idstaff : -1,
staffType: {
idstaffType: 2,
type: "Dipendente"
},
name: "",
surname: "",
birthDate: "",
phone: "",
gender: true,
working: true,
staffLogin: {
idstaffLogin: -1,
email: "",
// pass: "",
}
};
$scope.staffLoginForm = {
idstaffLogin: -1,
email: "",
// pass: ""
};
$scope.selectg = [
{name:'uomo', type: true},
{name:'donna', type: false}
];
$scope.dateold = {
getdateold: ""
};
$scope.datepickerOptions = {
format: 'yyyy/mm/dd',
language: 'it',
startDate: "01/01/1900",
endDate: new Date(),
autoclose: true,
weekStart: 1
};
/*
$scope.emailcheck = function () {
$scope.answer = EmailChecker.emailc($scope.staffForm.staffLogin.email);
}
*/
//////////////////per il number controller
$scope.wks = {number: 1, name: 'testing'};
/////////////////////////////////////////
console.log($scope.staffForm.gender);
//Now load the data from server
_refreshStaffData();
//HTTP POST/PUT methods for add/edit country
// with the help of id, we are going to find out whether it is put or post operation
$scope.submitStaff = function() {
console.log($scope.staffForm);
if($scope.staffForm.name == "" || $scope.staffForm.surname == "" || $scope.staffForm.staffLogin.email == "" || $scope.staffForm.birthDate == "" || $scope.staffForm.phone == "" || $scope.staffForm.gender == null || $scope.staffForm.idstaff == null)
_showSBNoField();
else if(!_emailCheck($scope.staffForm.staffLogin.email))
_showSBInvalid();
/* else if(!angular._isDate($scope.staffForm.birthDate))
console.log("no date"); */
else{
if ($scope.staffForm.idstaff == -1) {
console.log("StaffLogin");
console.log($scope.staffForm.staffLogin);
console.log($scope.staffForm);
//Id is absent in form data, it is create new country operation
$scope.staffForm.birthDate = $filter('date')(new Date($scope.staffForm.birthDate), "yyyy-MM-dd");
console.log( $scope.staffForm.birthDate);
restService.insertstaff($scope.staffForm, _giveLast, _error);
/* $http({
method : 'POST',
url : 'http://localhost:8080/FoodDrinkDispener/rest/staff',
data : angular.toJson($scope.staffForm),
headers : {
'Content-Type' : 'application/json'
}
}).then( _giveLast, _error ); */
// console.log("StaffLogin");
} else {
//Id is present in form data, it is edit country operation
//var dateformat = new String($scope.staffForm.birthDate);
// $scope.getdateold.getdateold = $scope.staffForm.birthDate;
$scope.staffForm.birthDate = $filter('date')(new Date($scope.staffForm.birthDate), "yyyy-MM-dd");
console.log( $scope.staffForm.birthDate);
// $scope.staffForm.phone = $scope.staffForm.phone.toString();
// console.log( $scope.staffForm.phone);
// console.log( new Date($scope.staffForm.birthDate));
restService.updatestaff($scope.staffForm, _putStaffLogin, _error);
/* $http({
method : 'PUT',
url : 'http://localhost:8080/FoodDrinkDispener/rest/staff',
data : angular.toJson($scope.staffForm),
headers : {
'Content-Type' : 'application/json'
}
}).then( _putStaffLogin, _error ); */
}
console.log("HTTP: ");
console.log($http);
console.log($scope.staffForm.gender);
console.log($scope.staffForm.idstaff);
}
};
//HTTP DELETE- delete country by Id
/* $scope.deleteStaff = function(staff) {
$http({
method : 'DELETE',
url : 'http://localhost:8080/FoodDrinkDispener/rest/staff/' + staff.idstaff
}).then(_success, _error);
}; */
$scope.deleteStaff = function(staff) {
$scope.staffForm.name = staff.name;
$scope.staffForm.idstaff = staff.idstaff;
$scope.staffForm.surname = staff.surname;
$scope.staffForm.birthDate = staff.birthDate;
$scope.staffForm.phone = staff.phone;
// $scope.staffForm.gender = staff.gender;
$scope.selectg.type = staff.gender;
//$scope.staffForm.staffLogin.idstaffLogin = staff.staffLogin.idstaff;
$scope.staffForm.staffLogin.email = staff.staffLogin.email;
$scope.staffForm.staffLogin.staff = "";
$scope.staffForm.working = false;
// $scope.staffForm.pass = "prova";
console.log(staff.staffLogin.email);
restService.deletestaff($scope.staffForm, _success, _error);
}
// In case of edit, populate form fields and assign form.id with country id
$scope.editStaff = function(staff) {
console.log(staff.phone);
$scope.staffForm.name = staff.name;
$scope.staffForm.idstaff = staff.idstaff;
$scope.staffForm.surname = staff.surname;
// String a = staff.birthDate;
console.log(staff.birthDate);
// $scope.staffForm.birthDate = $filter('date')(staff.birthDate, "mm/dd/yyyy");
$scope.staffForm.birthDate = staff.birthDate;
console.log($scope.staffForm.birthDate);
$scope.staffForm.phone = parseInt(staff.phone, 10); // parseInt with radix;
$scope.staffForm.gender = staff.gender;
$scope.selectg.type = staff.gender;
//$scope.staffForm.staffLogin.idstaffLogin = staff.staffLogin.idstaff;
$scope.staffForm.staffLogin.email = staff.staffLogin.email;
$scope.staffForm.staffLogin.staff = "";
// $scope.staffForm.pass = "prova";
console.log(staff.staffLogin.email);
};
function _refreshStaffData() {
restService.allstaffworking(_getstaff, _timeout, _error);
}
function _getstaff(response){
if (response.data == ""){
console.log("Accesso non autorizzato")
}
$scope.staffs = response.data;
}
function _success(response) {
// console.log(staff.name);
console.log("successo");
_refreshStaffData();
_clearFormData();
_showSB();
console.log("cleared");
}
function _timeout() {
// console.log(staff.name);
console.log("timeout token");
_showSBtimeout();
}
function _error(response) {
console.log("qualcosa è andata male");
console.log(response.statusText);
}
//Clear the form
function _clearFormData() {
$scope.staffForm.idstaff = -1;
$scope.staffForm.name = "";
$scope.staffForm.surname = "";
$scope.staffForm.birthDate = "";
$scope.staffForm.phone = "";
$scope.staffForm.gender = true;
$scope.staffForm.staffLogin.idstaffLogin = -1;
$scope.staffForm.staffLogin.email = "";
// $scope.staffForm.staffLogin.pass = "";
$scope.staffForm.staffType.idstaffType=2;
$scope.staffForm.working= true;
};
function _giveLast(){
console.log("yes");
console.log($scope.staffForm);
// $scope.staffLast = restService.laststaff;
restService.laststaff(_postStaffLogin);
// _postStaffLogin();
}
function _postStaffLogin(response){
$scope.staffLast = response.data;
console.log($scope.staffForm.staffLogin.email);
console.log($scope.staffLast.idstaff);
//console.log($scope.staffForm.staffLogin.idstafflogin);
//$scope.staffForm.staffLogin.staff = $scope.staffLast;
//$scope.staffLoginForm.staff = $scope.staffLast;
$scope.staffForm.staffLogin.email;
// $scope.staffLoginForm.pass = $scope.staffForm.staffLogin.pass;
console.log($scope.staffLoginForm.idstaffLogin);
console.log($scope.staffLoginForm.email);
// console.log($scope.staffLoginForm.pass);
restService.insertstafflogin($scope.staffLoginForm, _success, _error);
}
function _putStaffLogin(){
console.log("CIAOOOO");
$scope.staffLoginForm.idstaffLogin = $scope.staffForm.idstaff;
$scope.staffLoginForm.email = $scope.staffForm.staffLogin.email;
// $scope.staffLoginForm.pass = "ab";
console.log($scope.staffLoginForm.idstaffLogin);
console.log($scope.staffLoginForm.email);
// console.log($scope.staffLoginForm.pass);
restService.updatestafflogin($scope.staffLoginForm, _success, _error);
x.className = "show";
// After 3 seconds, remove the show class from DIV
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
function _showSBNoField() {
// Get the snackbar DIV
var x = document.getElementById("snackbar_nofield")
// Add the "show" class to DIV
x.className = "show";
// After 3 seconds, remove the show class from DIV
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
function _showSBInvalid() {
// Get the snackbar DIV
var x = document.getElementById("snackbar_invalid")
// Add the "show" class to DIV
x.className = "show";
// After 3 seconds, remove the show class from DIV
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
function _showSBtimeout() {
// Get the snackbar DIV
var x = document.getElementById("snackbar_timeout")
// Add the "show" class to DIV
x.className = "show";
// After 3 seconds, remove the show class from DIV
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
function _isDate(value) {
return toString.call(value) === '[object Date]';
}
function _emailCheck(emailStr) {
var emailPat = /^(.+)@(.+)$/;
var specialChars = "\\(\\)<>@,;:\\\\\\\"\\.\\[\\]";
var validChars = "[^\\s" + specialChars + "]";
var quotedUser = "(\"[^\"]*\")";
var ipDomainPat = /^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
var atom = validChars + "+";
var word = "(" + atom + "|" + quotedUser + ")";
var userPat = new RegExp("^" + word + "(\\." + word + ")*$");
var domainPat = new RegExp("^" + atom + "(\\." + atom + ")*$");
var matchArray = emailStr.match(emailPat);
if (matchArray == null) {
alert("L'email sembra essere sbagliata: (controlla @ e .)");
return false;
}
var user = matchArray[1];
var domain = matchArray[2];
if (user.match(userPat) == null) {
alert("La parte dell'email prima di '@' non sembra essere valida!");
return false;
}
var IPArray = domain.match(ipDomainPat);
if (IPArray != null) {
for (var i = 1; i <= 4; i++) {
if (IPArray[i] > 255) {
alert("L'IP di destinazione non è valido!");
return false;
}
}
return true;
}
var domainArray = domain.match(domainPat);
if (domainArray == null) {
alert("La parte dell'email dopo '@' non sembra essere valida!");
return false;
}
var atomPat = new RegExp(atom, "g");
var domArr = domain.match(atomPat);
var len = domArr.length;
if (domArr[domArr.length - 1].length < 2 ||
domArr[domArr.length - 1].length > 6) {
alert("Il dominio di primo livello (es: .com e .it) non sembra essere valido!");
return false;
}
if (len < 2) {
var errStr = "L'indirizzo manca del dominio!";
alert(errStr);
return false;
}
return true;
}
});
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/editEmployee', {
templateUrl: 'london.htm',
});
}]); Where I have added appconfig for ng-route:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/editEmployee', {
templateUrl: 'london.htm',
});
}]);
And this is the page that I want to show when I called the url: file:///C:/Users/Giacomo%20B/Desktop/progetto%20mainetti/prove%20angular/fddWebapp/edit_employee.html#/editEmployee , called "london.htm", a simple page to try it:
<!-- saved from url=(0043)http://www.w3schools.com/angular/london.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></head><body><h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p></body></html>In this way, it should works..but It doesn't work!!!
There are these errors:
angular.js:10765 XMLHttpRequest cannot load file:///C:/Users/Giacomo%20B/Desktop/progetto%20mainetti/prove%20angular/fddWebapp/london.htm. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
angular.js:12520 Error: [$compile:tpload] Failed to load template: london.htm (HTTP status: -1 )
http://errors.angularjs.org/1.4.8/$compile/tpload?p0=london.htm&p1=-1&p2=