2014-12-31 16 views
8

Tôi gặp lỗi này. Tôi đã xem qua các câu trả lời được đăng trước đây nhưng tôi vẫn có cùng một vấn đề.Tham chiếu không bắt buộcLỗi: ứng dụng không được xác định trong 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 []; 
    } 
}); 






}); 

Vui lòng kiểm tra mã và cho tôi biết nơi tôi đang làm cho một sai lầm.

+0

Tại sao bạn gói mã app.js của mình bằng chức năng ẩn danh? –

+0

Tôi đọc quá trình của Dan wahlin .... họ đã làm như vậy vì vậy tôi làm theo phương pháp của họ – Prince

+0

Điều đó là không cần thiết. Làm như vậy là giới hạn phạm vi của 'ứng dụng' biến chỉ cho hàm đó và bạn đang cố gắng sử dụng nó trong một tệp khác. Chỉ cần xóa chức năng ẩn danh đó và nó sẽ chạy. –

Trả lời

7

Đây là bài học hay về phạm vi. Bao gói mọi thứ trong các hàm ẩn danh (function(){...}());) sẽ biến được khai báo bên trong hàm đó vô hình đối với những thứ bên ngoài hàm. Tôi sẽ không đi qua tất cả các công cụ phạm vi javascript trong phản ứng này bởi vì nó là tốt documented on many other questions nhưng về cơ bản đây là vấn đề của bạn;

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

Trong remove ngắn anonymous function đó là trong app.js hoặc khai báo biến app bên ngoài hàm.

2

ứng dụng của bạn được xác định bên trong chức năng ẩn danh, do đó ứng dụng có phạm vi bên trong nó. hãy thử tạo biến ứng dụng toàn cầu.

(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

đã giúp, toàn cầu trong index.js. Tôi đang sử dụng trình duyệt, vì vậy không thể loại bỏ bất kỳ chức năng ẩn danh nào. Browserify thêm chúng anyway – moudrick

1

Tháo chức năng ẩn danh từ app.js như:

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

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

Và cũng di chuyển mã số đăng ký startFrom lọc của bạn ra khỏi khối điều khiển. Một điều cuối cùng mà bộ điều khiển của bạn chấp nhận tiêm phụ thuộc cuối cùng: Data không được xác định, vì vậy hãy loại bỏ nó.

Hy vọng điều này sẽ hữu ích!

7

Dường như tất cả các câu trả lời khác là từ những người không có kiến ​​thức về Angular JS và chỉ có Javascript. Tất cả họ đều đưa ra một câu trả lời sai lầm tương tự, điều này có thể làm cho mã hoạt động, nhưng giới thiệu một thực hành không tốt.

Đóng gói mã của bạn trong một chức năng ẩn danh là tốt!

Đây không phải là vấn đề. Vấn đề là bạn đặt bộ điều khiển của bạn trong một tập tin riêng biệt, nhưng quên đặt nó trong một mô-đun riêng biệt là tốt.

loginController.js

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

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

app.js

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

Câu trả lời này được hỗ trợ bởi dự án hạt góc cũng được nhắc đến trong các tài liệu chính thức góc: https://github.com/angular/angular-seed

+0

Đặt bộ điều khiển trong một tệp riêng biệt với cùng một mô-đun là tốt (miễn là chúng có liên quan). Mã được cung cấp bởi OP sẽ tạo một 'Uncaught ReferenceError' vì biến' app' nằm ngoài phạm vi. –

+0

Làm điều này không cần thiết che khuất mã của bạn vì vậy nên được coi là một thực hành không tốt. Cũng không có gì gợi ý rằng đây là một sự lựa chọn thiết kế có chủ tâm của OP. – wvdz

2

Đã có lỗi tương tự. Trong trường hợp của tôi nó là thứ tự của các tập tin javascript.

Tôi phải đảm bảo app.js được khai báo trước tệp service.js (tệp có tham chiếu đến ứng dụng trong đó).

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

Bên cạnh đó, lỗi này ("ứng dụng không được định nghĩa") có thể được gây ra bởi một lỗi cú pháp trong mã javascript của bạn, vì vậy kiểm tra mã javascript của bạn cho các lỗi cú pháp, nếu có một "Lỗi Cú pháp của router" cặp với nó.

Các vấn đề liên quan