CODEWITHSUNDEEP
javascriptangularjs
Hardyanto Putra Antony. K
Hardyanto Putra Antony. K

Reputation: 577

0x800a1391 - JavaScript runtime error: 'angular' is undefined

my controller.js has the following code:

  var myController = angular.module('myApp.controllers', [])

My Services.js has the following code:

  angular.module('myApp.services', [])

When I run my application, the code "var myController = angular.module('myApp.controllers', [])" gives me the following exception: 0x800a1391 - JavaScript runtime error: 'angular' is undefined.

Can anyone please tell me what goes wrong? Your help will be appreciated :)

Btw, here is the html code of my web app

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PathFinding.js</title>
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./lib/themes/jquery.ui.all.css" />
    <script src="./js/angular.js"></script>
    <script type="text/javascript" src="path/to/bower_components/pathfinding/pathfinding-browser.min.js"></script>
    <script type="text/javascript" src="./lib/raphael-min.js"></script>
    <script type="text/javascript" src="./lib/es5-shim.min.js"></script>
    <script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="./lib/state-machine.min.js"></script>
    <script type="text/javascript" src="./lib/async.min.js"></script>
    <script type="text/javascript" src="./lib/ui/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="./lib/ui/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="./lib/ui/jquery.ui.mouse.min.js"></script>
    <script type="text/javascript" src="./lib/ui/jquery.ui.draggable.min.js"></script>
    <script type="text/javascript" src="./lib/ui/jquery.ui.accordion.min.js"></script>
    <script type="text/javascript" src="./lib/ui/jquery.ui.slider.min.js"></script>
    <script type="text/javascript" src="./lib/pathfinding-browser.min.js"></script>
    <script type="text/javascript" src="./js/view.js"></script>
    <script type="text/javascript" src="./js/controller.js"></script>
    <script type="text/javascript" src="./js/Services.js"></script>
    <script type="text/javascript" src="./js/mainApp.js"></script>
    
    <script type="text/javascript" src="./js/panel.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>


</head>
<body>
    <ion-modal-view>
        <ion-content>
            <ion-scroll zooming="true" overflow-scroll="false" direction="xy" style="width: 100%; height:100%;"
                        scrollbar-x="false" scrollbar-y="false">

                <div class="scroll-container" id="draw_area" style="width: 100%; height:100%; background: url('PathFindingMap.png') no-repeat ">
  
                </div>
            </ion-scroll>
        </ion-content>
    </ion-modal-view>

    <button style="margin-bottom:10px;margin-left:30px;margin-right:30px;" id="button1" class="control_button" type="button">Search!</button>

    <div style="visibility: hidden;" id="algorithm_panel" class="panel right_panel">

        <div class="accordion">

            <h3 id="astar_header"></h3>

            <div id="astar_section" class="finder_section">

            </div>
        </div>
    </div>
    <div style="visibility: hidden;" id="play_panel" class="panel right_panel">

    </div>
    <div id="stats"></div>

</body>
</html>

Upvotes: 0

Views: 3253

Answers (2)

tyne
tyne

Reputation: 115

On your controller.js try to reference the angular.js script.

Simply drag the angular.js to you controller.js file. You code will look like this.

/// <reference path="../../../scripts/angular.js" />

On your html code. Include the angular.js and put it into first hierarchy then add your controller.js or else your code will not work.

<script src="scripts/angular.js"></script>
<script src="scripts/controller.js"></script>

Upvotes: 0

Parshuram Kalvikatte
Parshuram Kalvikatte

Reputation: 1646

Wrong approach of building your angular app This is how you need to define your module

var app = angular.module('myApp',[])

This is how you need to add your controller in your controller.js As you have already define your module,no need to give dependency

    var app = angular.module('myApp')
app.controller('myController',function(){
// Here is your controller content
})

Here is how you need to add your service in service.js

var app = angular.module('myApp')
app.service('myService',function(){
// Here is your service content  (this.method);
})

Your code gives you error because you have defined your module 2 times, ie defining its dependency []

Upvotes: 2

Related Questions