Javascript 角度js模板问题
我发现angular的模板加载错误，我在遵循一个指南。我不确定我做错了什么，因为这是我第一次尝试模板制作 目录结构Javascript 角度js模板问题,javascript,html,angularjs,Javascript,Html,Angularjs,我发现angular的模板加载错误，我在遵循一个指南。我不确定我做错了什么，因为这是我第一次尝试模板制作 目录结构 index.html app.js home/home.view.html home/home.controller.js login/login.view.html login/login.controller.js register/register.view.html register/register.controller.js 以下是我使用的指南： https://gi
index.html
app.js
home/home.view.html
home/home.controller.js
login/login.view.html
login/login.controller.js
register/register.view.html
register/register.controller.js
https://github.com/cornflourblue/angular-registration-login-example
XMLHttpRequest cannot load file:///C:/login/login.view.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.b @ angular.js:10661q @ angular.js:10480d.$get.g @ angular.js:10187(anonymous function) @ angular.js:14634a.$get.m.$eval @ angular.js:15878a.$get.m.$digest @ angular.js:15689a.$get.m.$apply @ angular.js:15986(anonymous function) @ angular.js:1658e @ angular.js:4473d @ angular.js:1656yc @ angular.js:1676Zd @ angular.js:1570(anonymous function) @ angular.js:28683n.Callbacks.j @ jquery.min.js:2n.Callbacks.k.fireWith @ jquery.min.js:2n.extend.ready @ jquery.min.js:2I @ jquery.min.js:2
angular.js:12416Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/login/login.view.html'.
at Error (native)
at b (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:93:116)
at q (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:89:65)
at d.$get.g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:86:221)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:118:217
at m.a.$get.m.$eval (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:132:358)
at m.a.$get.m.$digest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:129:365)
at m.a.$get.m.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:133:113)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:19:479
at Object.e [as invoke] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:39:96)(anonymous function) @ angular.js:12416b.$get @ angular.js:9203(anonymous function) @ angular.js:14642a.$get.m.$eval @ angular.js:15878a.$get.m.$digest @ angular.js:15689a.$get.m.$apply @ angular.js:15986(anonymous function) @ angular.js:1658e @ angular.js:4473d @ angular.js:1656yc @ angular.js:1676Zd @ angular.js:1570(anonymous function) @ angular.js:28683n.Callbacks.j @ jquery.min.js:2n.Callbacks.k.fireWith @ jquery.min.js:2n.extend.ready @ jquery.min.js:2I @ jquery.min.js:2
angular.js:12416Error: [$compile:tpload] http://errors.angularjs.org/1.4.5/$compile/tpload?p0=%2Flogin%2Flogin.view.html&p1=undefined&p2=undefined
at Error (native)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:6:416
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:143:420
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:118:217
at m.a.$get.m.$eval (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:132:358)
at m.a.$get.m.$digest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:129:365)
at m.a.$get.m.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:133:113)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:19:479
at Object.e [as invoke] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:39:96)
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js:19:400)
(function () {
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home/home.view.html',
controllerAs: 'vm'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'login/login.view.html',
controllerAs: 'vm'
})
.when('/register', {
controller: 'RegisterController',
templateUrl: 'register/register.view.html',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/login' });
}
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {};
if ($rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
}
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
var loggedIn = $rootScope.globals.currentUser;
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
}
})();
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<div ng-show="vm.error" class="alert alert-danger">{{vm.error}}</div>
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
<a href="#/register" class="btn btn-link">Register</a>
</div>
</form>
</div>
</center>
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Classfied</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,500' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">San</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar" id='leftMenu'>
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Grants Room! <span class="sr-only">(current)</span></a></li>
<li><a href="#">create room</a></li>
<li><a href="#">join room</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal">drop spoi</a></li>
<li><a href="#/register" data-toggle="modal" data-target="#register">register</a></li>
<li><a href="#" data-toggle="modal" data-target="#login">login</a></li>
<li><a href="#">add friends</a></li>
<li><a href="#">public rooms</a></li>
<li><a href="#">friends</a></li>
</ul>
<ul class="nav nav-sidebar">
<h4 style='color:#f9eefc;margin-left:10px;'>Grants Room Users</h4>
<li><a href="#"><img src='static/img/user.png' style='width:35px;height:35px;margin-right:10px;align:left;'>grant zukel tracking:
<input type="checkbox" checked data-toggle="toggle">
<img src='static/img/offline.png' style='width:26px;height:26px;margin-left:10px;align:left;'></a>
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id='heightMap'>
<div class="row placeholders">
<div id='chatWindow' class="col-xs-6 col-sm-6 placeholder" style="background-color:#fdf4ff;">
<br>
<center>
<div ng-view></div>
</div>
<div class="col-xs-6 col-sm-6 placeholder" >
<div id="map" class='map' style="width:400px;height:850px;float:right;" ></div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">spoi - "social point of intrest"</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">name</label>
<input type="text" id="name" class="form-control" id="exampleInputEmail1" placeholder="Name">
</div>
<div class="form-group">
<label for="spoidesc">social point of interest description</label>
<input type="text" id="spoidesc" class="form-control" id="spoidesc" placeholder="Description">
</div>
<div class="form-group">
<label for="spoidesc">date </label>
<input type="text" id="DD" class="form-control2" style="width:50px;" id="spoidesc" placeholder="DD">/
<input type="text" id="MM" class="form-control2" style="width:50px;" id="spoidesc" placeholder="MM">/
<input type="text" id="YY" class="form-control2" style="width:50px;" id="spoidesc" placeholder="YY">
<label> time </label>
<input type="text" id="HR" class="form-control2" style="width:50px;" id="spoidesc" placeholder="HR">:
<input type="text" id="MIN" class="form-control2" style="width:60px;" id="spoidesc" placeholder="MIN">
<select id='daynight'>
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onClick="dropMarker();" data-dismiss="modal" >Save changes</button>
</div>
</div>
</div>
</div>
</body>
<link rel="stylesheet" href="static/css/chat.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<script>
//set dynamic element height to help out with mobile layout
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
chatwindowWidth = $('#chatWindow').innerWidth();
windowWidth = $(window).innerWidth();
leftwindowWidth = $('#leftWindow').innerWidth();
leftoverspace = windowWidth - leftwindowWidth;
leftoverspace = leftoverspace / 2
$('#chatBox').css('min-width', leftoverspace - 300);
$('#chatinputbox').css('min-width', leftoverspace - 300);
$('#map').css('min-width', leftoverspace-150);
$('#inputChat').css('top', windowHeight-100);
$('#map').css('min-height', windowHeight-50);
//$('#map').css('min-height', windowHeight-50);
$('#chatWindow').css('min-height', windowHeight-50);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
//define map to use
var map = L.map('map').setView([0,0], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoienVrZXJ1IiwiYSI6ImNpZWtzOXA4cjAwM2Jyd200eG1mNnVtZWsifQ.sOcXd9L2Nw2p-s0DOWvoRw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery � <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
var popup = L.popup();
var dropMarkerBool = "False";
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
var options = {timeout:60000, enableHighAccuracy: true};
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
}
else {
console.log('Geolocation is not supported for this Browser/OS version yet.');
}
//L.marker([51.5, -0.09]).addTo(map)
// .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
//L.circle([51.508, -0.11], 500, {
// color: 'red',
// fillColor: '#f03',
// fillOpacity: 0.5
//}).addTo(map).bindPopup("I am a circle.");
//L.polygon([
// [51.509, -0.08],
// [51.503, -0.06],
// [51.51, -0.047]
//]).addTo(map).bindPopup("I am a polygon.");
function dropMarker(){
dropMarkerBool = "True";
return dropMarkerBool
}
function onMapClick(e) {
if (dropMarkerBool == "False"){
//do nothing for now
}
else{
var name = $('#name').val();
var spoidesc = $('#spoidesc').val();
var dd = $('#DD').val();
var mm = $('#MM').val();
var yy = $('#YY').val();
var hr = $('#HR').val();
var min = $('#MIN').val();
var ampm = $('#daynight').val();
var spoi_html = "<div style='background-color:#492a52;color:#f8dbff;border-radius:15px;padding:15px;'>Name: " + name +
"<br>description: "+ spoidesc +
"<br> date & time: " + dd+"/"+mm+"/"+yy+ " "+hr+":"+min+" "+ampm +
"</div>";
L.marker(e.latlng).addTo(map).bindPopup(spoi_html).openPopup();
dropMarkerBool = "False";
}
}
map.on('click', onMapClick);
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
locationMarker = L.marker([latitude, longitude]).addTo(map).bindPopup("My Location").openPopup();
L.circle([latitude, longitude], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup("acceptable error");
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
}
else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-cookies.js"></script>
<script src="app.js"></script>
<script src="app-services/authentication.service.js"></script>
<script src="app-services/flash.service.js"></script>
<!-- Real user service that uses an api -->
<!-- <script src="app-services/user.service.js"></script> -->
<script src="app-services/user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>
<script src="login/login.controller.js"></script>
<script src="register/register.controller.js"></script>
</html>
您应该通过web服务器访问应用程序。npm是一个简单的替代方案。发生这种情况的原因是，任何仅路径URL都以原始文档的默认主机和架构作为前缀。这是标准的HTTP行为，但您不应该相信我的话。在您的情况下，这是文件：//，并且没有为文件：//定义CORS 看看这个：
您可以尝试在模板前面加上./as in./template/foo/bar.htmahh我知道了，是的，我不知道我在调用时使用了python api服务器，所以这就是为什么我只是在本地运行index.html不知道这一点，非常感谢。