0

every one i am very new to angular js so , i want to use angular concepts like routing using ngRoute in order to achieve my requirement .

here is my js code

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'StudentController' 
        })
        .when('/viewStudents', {
            templateUrl: 'viewStudents.html',
            controller: 'StudentController'
        })
        .otherwise({
            redirectTo: '/home'
        });
});

mainApp.controller('StudentController', function($scope) {
    $scope.students = [
        {name: 'Mark Waugh', city:'New York'},
        {name: 'Steve Jonathan', city:'London'},
        {name: 'John Marcus', city:'Paris'}
    ];

    $scope.message = "Click on the hyper link to view the students list.";
});

here is my index.html 

**<!DOCTYPE html>
<html>
    <head lang="en">
      <meta charset="utf-8">
      <title>AngularJS Routing</title>
    </head>
    <body>
      <div ng-app="mainApp">
        <ng-view></ng-view>
      </div>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
      <script type="text/javascript" src="main.js"></script>
    </body>
</html>

here is home.html

<div class="container">
    <h2> Welcome </h2>
    <p>{{message}}</p>
    <a href="#/viewStudents"> View Students List</a>
</div>

when i open index.html in browser it has to load home.html as mentioned in the js code.

but i am getting following error in the console

angular.js:8632 Access to XMLHttpRequest at 'file:///E:/battleField/angular/WebContent/WEB-INF/home.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

whats wrong with my code and way of running page . please help me to get out of this i referred following tutorial to get it https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider

there its working fine. thank you.

bharath varma
  • 61
  • 1
  • 7

1 Answers1

1

This error is happening because you are just opening html documents directly from the browser. To fix this you will need to call your page from a webserver and access it on localhost. Use Wamp Server or Apache or if you have nodejs setup then use http-server

p u
  • 1,395
  • 1
  • 17
  • 30
  • i am running it on tomcat server this is my path `http://localhost:8088/angular/WEB-INF/index.html` but i am getting 404 error – bharath varma Jan 04 '19 at 10:30
  • @bharathvarma but error is for file:///E:/battleField/angular/WebContent/WEB-INF/home.html your localhost setup is not working otherwise it would have given error at http://localhost:8088/angular/WEB-INF/home.html – p u Jan 04 '19 at 10:36
  • yes sorry for misleading now i am not getting error in the console when running on localhost but i am not getting index page in browser its 404 error – bharath varma Jan 04 '19 at 10:40
  • i didn't find a route for index page – p u Jan 04 '19 at 10:54
  • this error was due to web server problem..which is solved now...and if you see the question for which this is marked duplicate also stats the same answer as me..so can you just mark it correct? because it did solve your issue @bharathvarma – p u Jan 04 '19 at 10:58
  • its working thank you. – bharath varma Jan 04 '19 at 11:00