0

I am trying to run an angularjs routing example but unable to run. The below is the code snippet. // Main.html

        <body ng-app="myApp">

        <p><a href="#/">Main</a></p>

        <a href="#london">City 1</a>
        <a href="#paris">City 2</a>

        <p>Click on the links to read about London and Paris.</p>

        <div ng-view></div>

        <script>
        var app = angular.module("myApp", ["ngRoute"]);
        app.config(function($routeProvider) {
            $routeProvider
            .when("/", {
                templateUrl : "main.html"
            })
            .when("/london", {
                templateUrl : "london.html"
            })
            .when("/paris", {
                templateUrl : "paris.html"
            });
        });
        </script>

        </body>
        </html>

london.html

        <h1>London</h1>
        <h3>London is the capital city of England.</h3>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        <p>{{msg}}</p>

paris.html 

    <h1>Paris</h1>
    <h3>Paris is the capital city of France.</h3>
    <p>Th`enter code here`e Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
    <p>{{msg}}</p>

Please help me to run this example.

Thanks in advance.

Ankit Kumar Gupta
  • 1,256
  • 1
  • 10
  • 23
NageswaraRao .K
  • 53
  • 1
  • 1
  • 8
  • are you getting any error in your console? – Sujithrao Mar 06 '17 at 12:29
  • yes sujith ji, error like this XMLHttpRequest cannot load file:///C:/nageswar_test/paris.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. – NageswaraRao .K Mar 06 '17 at 12:47
  • You have three 'when' states, can you also add in an 'otherwise' state, just in case? That might solve some problems you're having. – rrd Mar 06 '17 at 12:52
  • templateUrl might not be finding the given html route check it once – Sujithrao Mar 06 '17 at 12:52

2 Answers2

0

Observing your comments, I believe that this post may solve your problem:

Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

By the way, make sure that you are loading the ngRoute script after angularJs script.

Community
  • 1
  • 1
William
  • 502
  • 1
  • 9
  • 27
0

Make sure you obtain Angular routing js and add a reference to it, in your index.html

<script src="scripts/angular-route.js"></script>
Nitesh Goyal
  • 586
  • 5
  • 11