Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uncaught ReferenceError: app is not defined in Angularjs

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.

like image 603
Prince Avatar asked Dec 31 '14 09:12

Prince


2 Answers

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

like image 75
wvdz Avatar answered Nov 03 '22 22:11

wvdz


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.

like image 20
ug_ Avatar answered Nov 03 '22 21:11

ug_