script src not loading javascript for angular

Question

HTML

    <!DOCTYPE html>
<html ng-app="dropApp">
<head>
    <meta charset="utf-8" />
    <title>DropBox</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body ng-controller="mainctrl">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>


    <div class="jumbotron">
        <div class="container">
            <div class="col-sm-8 col-sm-offset-2">
                <a id="btn-login" ng-click="login()" ng-model="logbut" ng-show="logbut" class="btn btn-success">Login  </a>
                <div ng-include="template"></div>
            </div>
        </div>
    </div>
    <div class="credits text-center">
        <p>
            Amey Totawar
        </p>
    </div>
    <script src="angularsrc.js"></script>

</body>
</html>

Javascript File

var dropApp = angular.module("dropApp",[]);
var path = require('path');

dropApp.controller("mainctrl", function($scope) {
    $scope.logbut = true;
    $scope.login = function() {
        $scope.logbut = false;
        $scope.template = {
            name: 'login.html',
            url: path.join(__dirname,'views','login.html')
        };
    }
});

Getting Error: GET http://localhost:8600/angularsrc.js net::ERR_ABORTED and hence angular module not found. I tried including min.jquery earlier. I also tried changing angularsrc.js location, but nothing is working. Please help!!

Radhe Sham · Accepted Answer · 2017-11-18 08:17:04Z

2

<!DOCTYPE html>
<html ng-app="dropApp">
<head>
    <meta charset="utf-8" />
    <title>DropBox</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
    <script src="angularsrc.js"></script>
</head>
<body ng-controller="mainctrl">
    <div class="jumbotron">
        <div class="container">
            <div class="col-sm-8 col-sm-offset-2">
                <a id="btn-login" ng-click="login()" ng-model="logbut" ng-show="logbut" class="btn btn-success">Login  </a>
                <div ng-include="template"></div>
            </div>
        </div>
    </div>
    <div class="credits text-center">
        <p>
            Amey Totawar
        </p>
    </div>

</body>
</html>

and your js is same

var dropApp = angular.module("dropApp", []);
var path = require('path');

dropApp.controller("mainctrl", function ($scope) {
    $scope.logbut = true;
    $scope.login = function () {
        $scope.logbut = false;
        $scope.template = {
            name: 'login.html',
            url: path.join(__dirname, 'views', 'login.html')
        };
    }
});

This is what you exactly looking for

edited Nov 18, 2017 at 8:17

answered Nov 18, 2017 at 8:06

Radhe Sham

15111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Karan Desai Over a year ago

If this is part of your previous answer, why not merge them?

Amey Totawar Over a year ago

The approach is good...but why can't I include external js file??

Radhe Sham Over a year ago

You can include. let me edit my post the way you were doing.

Amey Totawar Over a year ago

Still not working for external js file...works fine for js included in script tag(internal).

Radhe Sham · Accepted Answer · 2017-11-18 07:28:43Z

1

Your references should be inside head like

<html ng-app="dropApp">
<head>
    <meta charset="utf-8" />
    <title>DropBox</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
    <script src="angularsrc.js"></script>
</head>
<body ng-controller="mainctrl">
    {{your code or logic goes here}}
</body>
</html>

answered Nov 18, 2017 at 7:28

Radhe Sham

15111 bronze badges

4 Comments

Radhe Sham Over a year ago

try to remove ng-app from html tag something like this <body ng-app="dropApp"> <div ng-controller="mainctrl"> {{your code or logic goes here}} </div> </body>

Amey Totawar Over a year ago

I don't think that ng-app in body tag or html tag would make any difference, still I tried and it did not work out.

Radhe Sham Over a year ago

sometime they make difference if we don't reference the way dom reads. it will be more clear if you put some extra code to understand the problem

Radhe Sham Over a year ago

See my comment. your reference error is gone away. please resolve other points where it break

Collectives™ on Stack Overflow

script src not loading javascript for angular

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related