1

I am getting this error in browser "

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector>/modulerr?

My Script app.js 

    var sampleApp = angular.module('myApp',[]).config(function($routeProvider){
    $routeProvider.
        when('/AddNewOrder',{
             templateUrl:'view/add_order.html',
             controller:'addOrderController'
    }).
        when('/ShowOrders',{
            templateUrl:'view/show_order.html',
             controller:'addOrderController'
    }).
            otherwise({redirectTo:'/AddNewOrder'
    });
});


`SampleApp.controller('myCtrl',function($scope,$location){
       $scope.setRoute = function(route){
           $location.path(route);
});`

And HTML code is 

    <!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
  <head>

    <title>AngularJS Routing example</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
          padding-top: 10px;
          background-color: #F5F5F5;
        }
    </style>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body data-ng-controller="myCtrl">

    <div class="container">
        <div class="row">
        <div class="col-md-3">
           <ul class="nav">
                <li><a data-ng-click="setRoute('AddNewOrder')"> Add New Order </a></li>
                <li><a data-ng-click="setRoute('ShowOrders')"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div data-ng-view></div>
        </div>

        </div>

    </div><!-- /.container -->

    <script src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/route.min.js"></script>
    <script src="app.js"></script>

  </body>
</html>

Dont no why this error is comming. Needs your suggestion to solve this.

Jorawar Singh
  • 6,727
  • 3
  • 24
  • 39
Abhishek Kumar
  • 295
  • 1
  • 3
  • 10

1 Answers1

2

Update

I looked at your stacktrace, It seems like you're loading you JavaScript files from folder path directly where it asking for a file using file protocol. To fic this issue you have to host you files/folder on some server like IIS,Lamp, Wamp,etc(any server) & then access html from hosted link ( http://localhost:8080/index.html )

Though if you don't want to host files you could enable direct file access you can refer [this answer]( How to launch html using Chrome at "--allow-file-access-from-files" mode?)

You should be injecting ngRoute module in myApp module, because the routing API doesn't come up with out of the box with angular.js. It has been there in angular-route.js which keep its API in ngRoute module. Basically whenever you wanted to use Routeing API you should be injecting ngRoute in your application module. The other thing I want to make sure is, angular-route-min.js(I guess you have it in js/route.min.js by renaming it) loaded correctly or not.

var sampleApp = angular.module('myApp',['ngRoute'])
Community
  • 1
  • 1
Pankaj Parkar
  • 127,691
  • 20
  • 213
  • 279