javascript - Error: "angular was used before it was defined" but online editors able to output the result

I couldn't get an output from this code when I ran it my local machine but the weird part is online editors able to give me an output:

*Im using Adobe Brackets editor

Here is my HTML code:

    <!DOCTYPE html >
  <html>
    <script src=".3.9/angular.min.js"></script>
    <script src= "app.js"></script>    
    <body ng-app="MyApp">

<div ng-controller="Controller2">
    <button ng-click="add()">Add Object</button>
    <button ng-click="reset()">Reset</button>
    <div remove="remove($index)" ng-repeat="name in names">
        {{name}}
    </div>
</div>

</body>
</html>

Here is my JS code:

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

    myApp.controller('Controller2', function ($scope) {
        $scope.names = [];
    var data = ['Dean', 'Andy', 'Dan', 'Wizek', 'Pete', 'Pawel', 'Chris', 'Misko'];
    $scope.add = function() {
        if (data.length)
            $scope.names.push(data.pop());
    };

        $scope.reset = function(index) {
        data.push($scope.names.splice(index, 1)[0]);
    };
    });

Please help me to figure it out...

I couldn't get an output from this code when I ran it my local machine but the weird part is online editors able to give me an output: http://codepen.io/anon/pen/waXGom

*Im using Adobe Brackets editor

Here is my HTML code:

    <!DOCTYPE html >
  <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src= "app.js"></script>    
    <body ng-app="MyApp">

<div ng-controller="Controller2">
    <button ng-click="add()">Add Object</button>
    <button ng-click="reset()">Reset</button>
    <div remove="remove($index)" ng-repeat="name in names">
        {{name}}
    </div>
</div>

</body>
</html>

Here is my JS code:

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

    myApp.controller('Controller2', function ($scope) {
        $scope.names = [];
    var data = ['Dean', 'Andy', 'Dan', 'Wizek', 'Pete', 'Pawel', 'Chris', 'Misko'];
    $scope.add = function() {
        if (data.length)
            $scope.names.push(data.pop());
    };

        $scope.reset = function(index) {
        data.push($scope.names.splice(index, 1)[0]);
    };
    });

Please help me to figure it out...

Share Improve this question edited Jul 13, 2015 at 18:11 isherwood 61.1k16 gold badges120 silver badges168 bronze badges asked Jul 13, 2015 at 18:08 RAOUL 411 gold badge1 silver badge2 bronze badges

1 check your console error ? – Vineet Commented Jul 13, 2015 at 18:09
Off topic: You're missing head tags. – isherwood Commented Jul 13, 2015 at 18:10
Any 404 errors in the console? – isherwood Commented Jul 13, 2015 at 18:17
@isherwood I even tried this: <head> <script src="angular.min.js"></script> </head> – RAOUL Commented Jul 13, 2015 at 18:22
@VineetI'm getting this error in console: Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.4.2/$injector/……%20at%20Ac.d%20(http%3A%2F%2F127.0.0.1%3A55063%2Fangular.min.js%3A19%3A339) Failed to load resource: the server responded with a status of 404 (Not Found) – RAOUL Commented Jul 13, 2015 at 18:25

| Show 1 more comment

3 Answers 3

Sorted by: Reset to default 20

Do you mean you see the angular used before it was defined error from JSLint? That'd be because you're using angular, a global, in your JavaScript code without letting JSLint know it's in scope first.

JSLint operates on a page-by-page level, and can't tell what's in the global context from outside includes. You've loaded Angular into the global context in another include, but JSLint can't tell that when it looks at this single JavaScript file by itself.

To be clear, then, just this line should already cause JSLint to report the error:

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

You have to add a global directive to let JSLint know what's in the global context.

/*global angular */
var myApp = angular.module('myApp', []);

Now you're golden.

Just for fun, here's a fully JSLinted version of your JavaScript file snippet. Didn't take much. Note that I had to add squiggly brackets around your if block and the jslint directive white:true for what it considers non-standard whitespace. More on all that here.

/*jslint white:true */
/*global angular */
var myApp = angular.module('myApp', []);
myApp.controller('Controller2', function ($scope) {
    "use strict";

    $scope.names = [];
    var data = ['Dean', 'Andy', 'Dan', 'Wizek', 'Pete', 'Pawel', 'Chris', 'Misko'];
    $scope.add = function() {
        if (data.length)
        {
            $scope.names.push(data.pop());
        }
    };

    $scope.reset = function(index) {
        data.push($scope.names.splice(index, 1)[0]);
    };
});

Just above your app declaration, add the following comment...

/* global angular */

It should look like this...

/ * global angular */
var myApp = angular.module('myApp', []);

The comment can contain a comma separated list of variables which lets JSLint know they (can/may have been) be declared in other files.

There is a typo I am getting. In your HTML you're using

<body ng-app="MyApp">

and in controller

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

You should use

<body ng-app="myApp">

You're getting console error because your page had included AngularJS. Its not consider a good practice to load scripts in head or start of the page. You should load all scripts at the bottom of the page or I can say in footer.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Error: "angular was used before it was defined" but online editors able to output the result - St

3 Answers 3

与本文相关的文章

评论列表(0)