Just starting out with angular and trying to incorporate a templateUrl in an angular directive. However, when attempting to view the local html file in the browser, I encounter the following errors -->
XMLHttpRequest cannot load file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/baseChild1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Error: [$compile:tpload] http://errors.angularjs.org/1.5.0-rc.0/$compile/tpload?p0=baseChild1.html&p1=-1&p2= at Error (native) at file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:6:421 at file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:149:48 at file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:123:217 at m.$eval (file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:137:446) at m.$digest (file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:135:41) at m.$apply (file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:138:236) at file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:20:10 at Object.e [as invoke] (file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:40:477) at c (file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:19:440)
Base.html
<!DOCTYPE html>
<html ng-app="iAXApp">
<head>
<meta charset="utf-8" />
<title>IONOS iAX</title>
<!-- <link rel="stylesheet" type="text/css" href="base.css"> -->
<script src="angular.min.js"></script>
<script src="base.js"></script>
</head>
<body ng-controller="MainCtrl">
<main-directive></main-directive>
</body>
</html>
base.js
var app = angular.module('iAXApp', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Publisher";
});
app.directive("mainDirective", function(){
return{
restrict: 'E',
// tamplate: "<h1>{{name}}</h1>",
templateUrl: "baseChild1.html"
}
});
baseChild1.html
<h1>{{name}}</h1>