current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I am new to angular.js and just trying to get my head around the basics and hopefully this is something simple, but I am having trouble loading in a templateUrl.

My index.html is as follows:

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>AngularJS Tutorials</title>
</head>
<body>
  <div ng-app="app">
    <h1>Introduction to Angular.JS</h1>
    <div ui-view></div>
  </div>



  <!-- Scripts -->
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script src="js/angular-ui-router.min.js"></script> 
  <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

My app.js is:

angular
    .module('app', [
        'ui.router'
    ])
    .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'templates/home.html'
            })
    }])

My home.html is: <h1>home template</h1>

So I dont know why this isn't working, but the error is:

XMLHttpRequest cannot load file:///Users/code/Desktop/angular/templates/home.html. Cross origin requests are only supported for HTTP.

Thanks in advance, Gab

share|improve this question
up vote 0 down vote

This error comes due to a security restriction put by the browser. You can try below steps:

  • Try to run your code in some other browsers

  • Add the templates inside index.html itself by placing the content inside script tag. These script elememts should appear after ng-app. (ref link)

    <script type="text/ng-template" id="home.html"> Content of the template goes here </script>

share|improve this answer
up vote 0 down vote

First thing you use <ng-view> </ng-view> for loading your templates. and second is use <script type="text/ng-template" id="home.html"> for you each partial view. third thing is not mandatory but use otherwise at last that makes sense. Here is fiddle for you check it out fiddle

share|improve this answer
    
He is using uiRouter. He must use <ui-view>, not <ng-view>. – Kryz Feb 10 at 13:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.