admin管理员组

文章数量:1178539

I got this error. I looked through the answers posted previously but still I have the same problem.

index.html

<html lang="en" ng-app="customersApp">
<head>

    <link rel="shortcut icon" href="img/favicon.html">

    <title>Vizavoo</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
     <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!--external css-->
   <link href="css/slidebars.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />


</head>

  <body>

   <div ng-view></div>



    <!-- js placed at the end of the document so the pages load faster -->
       <script src="scripts/angular.js"></script> 
       <script src="scripts/angular-route.js"></script>
         <script src="app/app.js"></script>
         <script src="app/controllers/loginController.js"> </script>
           <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>



  </body>

<!-- Mirrored from thevectorlab/flatlab/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 08 Dec 2014 06:09:06 GMT -->
</html>

app.js

(function(){

var app= angular.module('customersApp',['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
        $routeProvider.
        when('/login', {
            title: 'Login',
            controller: 'loginController',
               templateUrl: 'app/views/loginuser.html'
        })
            .when('/logout', {
                title: 'Logout',
                templateUrl: 'partials/login.html',
                controller: 'loginController'
            })

            .when('/dashboard', {
                title: 'Dashboard',
                templateUrl: 'app/views/dynamic_table.html',
                controller: 'loginController'
            })
            .when('/signup', {
                title: 'Signup',
                templateUrl: 'app/views/registration.html',
                controller: 'loginController'
            })

            .otherwise({
                redirectTo: '/login'
            });
  }]);

}());

loginController.js

app.controller('loginController', function ($scope,$http, Data) {
    //initially set those objects to null to avoid undefined error
    $scope.login = {};
    $scope.signup = {};
    $scope.doLogin = function (customer) {


        $.post(":4002/email_login",
  {

     email : $scope.login.email,
      password : $scope.login.password
  },
  function(data,status){


      data = JSON.parse(data);
      console.log(data);

      if(data.log==1)
      {

          // window.location.href = "dashboard";
           $location.path('dashboard');
      }
      else
      {


         alert("wrong username and password");
      }


  });


    };

    $scope.logout = function () {
        Data.get('logout').then(function (results) {
            Data.toast(results);
            $location.path('login');
        });
    }
    app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});






});

Please check the code and tell me where I am making a mistake.

I got this error. I looked through the answers posted previously but still I have the same problem.

index.html

<html lang="en" ng-app="customersApp">
<head>

    <link rel="shortcut icon" href="img/favicon.html">

    <title>Vizavoo</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
     <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!--external css-->
   <link href="css/slidebars.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />


</head>

  <body>

   <div ng-view></div>



    <!-- js placed at the end of the document so the pages load faster -->
       <script src="scripts/angular.js"></script> 
       <script src="scripts/angular-route.js"></script>
         <script src="app/app.js"></script>
         <script src="app/controllers/loginController.js"> </script>
           <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>



  </body>

<!-- Mirrored from thevectorlab.net/flatlab/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 08 Dec 2014 06:09:06 GMT -->
</html>

app.js

(function(){

var app= angular.module('customersApp',['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
        $routeProvider.
        when('/login', {
            title: 'Login',
            controller: 'loginController',
               templateUrl: 'app/views/loginuser.html'
        })
            .when('/logout', {
                title: 'Logout',
                templateUrl: 'partials/login.html',
                controller: 'loginController'
            })

            .when('/dashboard', {
                title: 'Dashboard',
                templateUrl: 'app/views/dynamic_table.html',
                controller: 'loginController'
            })
            .when('/signup', {
                title: 'Signup',
                templateUrl: 'app/views/registration.html',
                controller: 'loginController'
            })

            .otherwise({
                redirectTo: '/login'
            });
  }]);

}());

loginController.js

app.controller('loginController', function ($scope,$http, Data) {
    //initially set those objects to null to avoid undefined error
    $scope.login = {};
    $scope.signup = {};
    $scope.doLogin = function (customer) {


        $.post("http://dev.miniluxe.com:4002/email_login",
  {

     email : $scope.login.email,
      password : $scope.login.password
  },
  function(data,status){


      data = JSON.parse(data);
      console.log(data);

      if(data.log==1)
      {

          // window.location.href = "dashboard";
           $location.path('dashboard');
      }
      else
      {


         alert("wrong username and password");
      }


  });


    };

    $scope.logout = function () {
        Data.get('logout').then(function (results) {
            Data.toast(results);
            $location.path('login');
        });
    }
    app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});






});

Please check the code and tell me where I am making a mistake.

Share Improve this question edited Oct 6, 2017 at 11:51 halfer 20.4k19 gold badges108 silver badges201 bronze badges asked Dec 31, 2014 at 9:08 PrincePrince 4011 gold badge8 silver badges34 bronze badges 5
  • Why are you wrapping your app.js code in an anonymous function? – Shashank Agrawal Commented Dec 31, 2014 at 9:10
  • I read the course of Dan wahlin....they have done like that so i follow their method – Prince Commented Dec 31, 2014 at 9:14
  • That isn't required. Doing that is limiting scope of variable app only to that function and you are trying to use that in another file. Just remove that anonymous function and it will run. – Shashank Agrawal Commented Dec 31, 2014 at 9:16
  • thanks, problem was solved but shows an another Error: [$injector:unpr] Unknown provider: DataProvider <- Data – Prince Commented Dec 31, 2014 at 9:25
  • I've given that in my answer below, please remove Data dependency from your controller dependency injections. There are more things to fix in your code. So look at my answer. – Shashank Agrawal Commented Dec 31, 2014 at 9:28
Add a comment  | 

5 Answers 5

Reset to default 12

It looks like all other answers are from people with no knowledge of Angular JS, and only of Javascript. They all give the same erroneous answer, which may cause the code to work, but introduce a bad practice.

Wrapping your code in an anonymous function is fine!

This is not the problem. The problem is that you put your controller in a separate file, but forgot to put it in a separate module as well.

loginController.js

angular.module('customersApp.loginController',[])

.controller('loginController', function ($scope,$http, Data) {
  ...
});

app.js

var app= angular.module('customersApp',['ngRoute','customersApp.loginController']);

This answer is backed up by the angular seed project that is also referred to in the official angular docs: https://github.com/angular/angular-seed

This is a good lesson on scope. Wrapping things in anonymous functions (function(){...}());) will make variables declared inside that function invisible to things outside the function. I wont go over all the javascript scope stuff in this response because it is well documented on many other questions but essentially this is your problem;

(function(){
    var hello = "world";
}());
console.log(hello); // no good, hello is not declared in this scope

In short remove the anonymous function that's in your app.js or declare the app variable outside the function.

Had the same error. In my case it was the order of the javascript files.

I had to make sure app.js was declared before the service.js file (the file that had a reference to app in it).

<script src="app.js"></script>
<script src="/Scripts/Service.js"></script>

In addition, this error ("app is not defined") could be caused by a syntax error in your javascript code, so check your javascript code for syntax errors, if there is a "Uncaught SyntaxError" paired up with it.

your app is defined inside anonymous function , so app has the scope within it. try creating a global app variable.

(function(){

 app= angular.module('customersApp',['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
        $routeProvider.
        when('/login', {
            title: 'Login',
            controller: 'loginController',
               templateUrl: 'app/views/loginuser.html'
        })
            .when('/logout', {
                title: 'Logout',
                templateUrl: 'partials/login.html',
                controller: 'loginController'
            })

            .when('/dashboard', {
                title: 'Dashboard',
                templateUrl: 'app/views/dynamic_table.html',
                controller: 'loginController'
            })
            .when('/signup', {
                title: 'Signup',
                templateUrl: 'app/views/registration.html',
                controller: 'loginController'
            })

            .otherwise({
                redirectTo: '/login'
            });
  }]);

}());

Remove the anonymous function from app.js like:

var app= angular.module('customersApp',['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
        // rest of the code
  }]);

And also move your startFrom filter registration code out of the controller block. One last thing that your controller is accepting an dependency injection at very last: Data which is not defined, so remove that also.

Hope this helps!

本文标签: javascriptUncaught ReferenceError app is not defined in AngularjsStack Overflow