admin管理员组

文章数量:1399966

I'm new to Angular JS , trying to develop little application on Calculations . My Code is as follows"

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>
</head>
<body>
    <div ng-app="Calculator">
        <div ng-controller="Operations">
            <div>
                Number 1 : <input type="number" ng-model="Number1" />
                Number 2: <input type="number" ng-model="Number2" />
                <p>
                    The addition of above two numbers is {{Number1+Number2}}
                </p>
            </div>

        </div>
    </div>
    <script>
        var module = angular.module('Calculator', []);
        module.controller('Operations', function ($scope) {
            $scope.Number1 = 1;
            $scope.Number2 = 10;
        });
    </script>
</body>
</html>

I have the Javascripts files available in My project, When I run the app, the browser console indicates that the JS are not being loaded. Don't know why ! The Expression {{Number1+Number2}} is the same in browser . It is not executing the expression

The Browser console has following errors:

Failed to load resource:"Path to the Script file" the server responded with a status of 404 (Not Found)

Failed to load resource:"Path to the Script file" the server responded with a status of 404 (Not Found)

Uncaught ReferenceError: angular is not defined

I'm new to Angular JS , trying to develop little application on Calculations . My Code is as follows"

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>
</head>
<body>
    <div ng-app="Calculator">
        <div ng-controller="Operations">
            <div>
                Number 1 : <input type="number" ng-model="Number1" />
                Number 2: <input type="number" ng-model="Number2" />
                <p>
                    The addition of above two numbers is {{Number1+Number2}}
                </p>
            </div>

        </div>
    </div>
    <script>
        var module = angular.module('Calculator', []);
        module.controller('Operations', function ($scope) {
            $scope.Number1 = 1;
            $scope.Number2 = 10;
        });
    </script>
</body>
</html>

I have the Javascripts files available in My project, When I run the app, the browser console indicates that the JS are not being loaded. Don't know why ! The Expression {{Number1+Number2}} is the same in browser . It is not executing the expression

The Browser console has following errors:

Failed to load resource:"Path to the Script file" the server responded with a status of 404 (Not Found)

Failed to load resource:"Path to the Script file" the server responded with a status of 404 (Not Found)

Uncaught ReferenceError: angular is not defined

  • javascript
  • angularjs
  • http-status-code-404
Share Improve this question edited May 10, 2016 at 19:49 Syed Ekram Uddin 3,1012 gold badges30 silver badges33 bronze badges asked May 10, 2016 at 18:29 sujay kodamalasujay kodamala 3172 gold badges5 silver badges17 bronze badges 4
  • 5 That means the path is wrong. Make sure you have a "scripts" folder in the same folder as your HTML file that has "angular.js" and "angular-route.js". – Mike Cluck Commented May 10, 2016 at 18:31
  • what is the path the error shows? that's where its looking... – omarjmh Commented May 10, 2016 at 18:31
  • Hey @MikeC, You're right. I dragged the files onto my htmlpage . But the auto generated path of the script files is wrong. I add "/" before the path which fixed the error. Thanks – sujay kodamala Commented May 10, 2016 at 18:33
  • to make it (relative path) clear and to be confident linking any web resource in future, spend 2 - 5 minute here css-tricks./quick-reminder-about-file-paths – Syed Ekram Uddin Commented May 10, 2016 at 18:52
Add a ment  | 

3 Answers 3

Reset to default 4 
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>

You are not loading angular.js and angular-route.js properly, check your paths.

Your project structure has to look like

index.html
scripts
    |---angular.js
    |---angular-route.js

If you use

<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>

<script src="/scripts/angular.js"></script>
<script src="/scripts/angular-route.js"></script>

Please note , you might need to disable adblocks if necessary. Drag and drop in visual studio doesn't work if you are using HTML pages but it does work for mvc ,aspwebforms. I figured this after one hour

本文标签： angularjsJavascript files are not loadingStack Overflow

版权声明：本文标题：angularjs - Javascript files are not loading - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744167189a2593604.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。