0

I'm getting template load errors with angular and im following a guide. I'm not sure what I'm doing wrong as this is my first attempt at templating.

directory structure

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

Here is the guide I'm using:

https://github.com/cornflourblue/angular-registration-login-example

the errors im getting:

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)

app.js

(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');
            }
        });
    }

})();

login.view.html

            <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>

index.html

<!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">&times;</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 &copy; <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>
Grant Zukel
  • 1,153
  • 2
  • 24
  • 48

1 Answers1

0

You should access your app through a web-server. The npm http-server is a simple alternative. This happens because any path-only URL are prefixed with the default host and schema for the original document. This is standard HTTP behavior, but you should not take my word for it. In your case this is file://, and CORS is not defined for file://.

look at this: AngularJS routing without a web server

You could try prefixing your templates with ./ as in ./template/foo/bar.htm

Community
  • 1
  • 1
Ярослав Рахматуллин
  • 7,599
  • 1
  • 41
  • 60
  • ahh i see yea i didn't know that Im using a python api server for my calls so thats why im just running the index.html locally didn't know that thanks so much. – Grant Zukel Sep 20 '15 at 16:37