2014-12-31 15 views
8

Mam ten błąd. Przejrzałem przedstawione wcześniej odpowiedzi, ale nadal mam ten sam problem.Niepowodzenie ReferenceError: aplikacja nie jest zdefiniowana w Angularjs

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 []; 
    } 
}); 






}); 

Proszę sprawdzić kod i powiedz mi gdzie robię błąd.

+0

Dlaczego opakowujesz swój kod app.js w anonimowej funkcji? –

+0

Przeczytałem kurs Dan wahlin .... oni zrobili tak, więc podążam ich metodą – Prince

+0

To nie jest wymagane. Ogranicza to zakres zmiennej 'app' tylko do tej funkcji i próbujesz użyć tego w innym pliku. Po prostu usuń tę anonimową funkcję i uruchomi się. –

Odpowiedz

7

To jest dobra lekcja na temat zakresu. Zawijanie rzeczy w anonimowych funkcjach (function(){...}());) spowoduje, że zmienne zadeklarowane wewnątrz tej funkcji będą niewidoczne dla rzeczy spoza funkcji. W tej odpowiedzi nie przejdę całego zakresu zawartości javascript, ponieważ jest dobrze documented on many other questions, ale zasadniczo jest to twój problem;

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

W krótkim Zdjąć anonimowa funkcja, która jest w twoim app.js lub zadeklarować zmienną app poza funkcją.

2

Twoja aplikacja jest zdefiniowana w anonimowej funkcji, więc aplikacja ma w niej zasięg. spróbuj utworzyć globalną zmienną aplikacji.

(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' 
      }); 
    }]); 

}()); 
+0

helped, global w pliku index.js. Używam trybu przeglądania, więc nie mogę wyeliminować żadnych anonimowych funkcji. Browserify dodaje je mimo to. – moudrick

1

Usuń funkcję anonimową od app.js jak:

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

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

A także przenieść startFrom filtra kod rejestracyjny z bloku sterowania. Ostatnią rzeczą, którą twój kontroler przyjmuje na ostatnią chwilę za pomocą zastrzyku zależności: Data który nie jest zdefiniowany, więc usuń to również.

Mam nadzieję, że to pomoże!

7

Wygląda na to, że wszystkie inne odpowiedzi pochodzą od osób, które nie znają Angular JS i tylko JavaScript. Wszystkie dają tę samą błędną odpowiedź, która może spowodować, że kod zadziała, ale wprowadzi złą praktykę.

Zawijanie kodu w anonimową funkcję jest w porządku!

To nie jest problem. Problem polega na tym, że umieszczasz kontroler w osobnym pliku, ale zapomniałeś umieścić go również w osobnym module.

loginController.js

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

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

app.js

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

Ta odpowiedź jest wspierany przez projekt nasion kątową, która jest również określana w oficjalnych kątowych docs: https://github.com/angular/angular-seed

+0

Umieszczenie kontrolera w osobnym pliku z tym samym modułem jest w porządku (o ile są one powiązane). Kod dostarczony przez OP stworzy "Uncaught ReferenceError", ponieważ zmienna 'app' jest poza zakresem. –

+0

Takie postępowanie niepotrzebnie zaciemnia kod, dlatego należy go traktować jako złą praktykę. Nic nie wskazuje na to, że był to celowy wybór projektu przez OP. – wvdz

2

Miał ten sam błąd. W moim przypadku była to kolejność plików javascript.

Musiałem upewnić się, że app.js został zadeklarowany przed plikiem service.js (plik, który miał odniesienie do aplikacji w nim).

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

Ponadto, ten błąd („aplikacja nie jest zdefiniowana”) może być spowodowane przez błąd składni w kodzie JavaScript, aby sprawdzić swój kod javascript błędów składniowych, jeśli istnieje „Uncaught SyntaxError” sparowane z nim.

Powiązane problemy