0

I am doing angular routing and getting this error.

This is my html file 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/angular-route.min.js"></script>
    <script src="../Scripts/test.js"></script>

    <script src="../Controllers/about.js"></script>
    <script src="../Controllers/contact.js"></script>
    <script src="../Controllers/home.js"></script>
  </head>
  <div ng-app="MyApp">
    <body>
      <div class="navbar-header">
        <nav>
          <ul>
            <li><a href="#!/">Home</a></li>
            <li><a href="#!/about">About Us</a></li>
            <li><a href="#!/contact">Contact Us</a></li>
          </ul>         
        </nav>
      </div>

      <div ng-view>
      </div>

    </body>
  </div>
</html>

This is my js file.

var myapp= angular.module('MyApp',['ngRoute']);
myapp.config(function($routeProvider) {

  $routeProvider
  .when('/',{
    templateUrl: 'home.html',
    controller: 'mainController'
  })
  .when('/about',{
    templateUrl: 'about.html',
    controller: 'aboutController'
  })  
  .when('/contact',{
    templateUrl: 'contact.html',
    controller: 'contactController'
  });

});
Pop-A-Stash
  • 6,572
  • 5
  • 28
  • 54
Priyanka Taneja
  • 515
  • 1
  • 5
  • 21
  • 3
    Possible duplicate of [AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https](https://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes) – Dinesh undefined Jun 27 '17 at 15:46

1 Answers1

0

try to check the below code. i hope this will help you.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>

<div ng-app="MyApp">

      <div class="navbar-header">
        <nav>
          <ul>
            <li><a href="#!/">Home</a></li>
            <li><a href="#!about">About Us</a></li>
            <li><a href="#!contact">Contact Us</a></li>
          </ul>         
        </nav>
      </div>

      <div ng-view>
      </div>

 </div>

<script>
var myapp= angular.module('MyApp',['ngRoute']);
myapp.config(function($routeProvider) {

  $routeProvider
  .when('/',{
    template: 'home page',
   // controller: 'mainController'
  })
  .when('/about',{
    template: 'about page',
   // controller: 'aboutController'
  })  
  .when('/contact',{
    template: 'contact page',
    //controller: 'contactController'
  });

});
</script>

<p>You can write the date in many different formats.</p>

</body>
</html>
Arun
  • 450
  • 3
  • 8