While studying about directives, I keep getting something basic wrong because I simply cannot make one work in order to import something from another html file.

HTML (`index.html`)

```
<!DOCTYPE html>
<html ng-app="myapp">
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><script type="text/javascript" src="app.js"></script></head>
<body>

 <hello-world></hello-world>

</body></html>

```

HTML (`ssth.html` - in the same directory as `index.html`):

```
<h3>hello world</h3>

```

JavaScript (app.js - same dir)

```
(function(){
var app = angular.module('myapp', []);

app.directive('helloWorld', function() {
return {
    restrict: 'AE',
    replace: 'true',
    templateUrl: "ssth.html",
};
});
})();

```

Yet my browser simply won't show the `hello word` message to me. I know there's something basic I'm missing but what?

Error reports from chrome console:

1. > 
> XMLHttpRequest cannot load file:///.../ssth.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 
> 
> 
>
2. > 
> Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///.../ssth.html'. 
> 
> 
>
3. > 
> Error: [$compile:tpload] <http://errors.angularjs.org/1.3.14/>$compile/tpload?p0=ssth.html
> 
> 
>