각도 조절기가 작동하지 않는 것 같습니다.

저는 서버 기반 응용 프로그램에 저장된 데이터를 검색하는 AngularJs와 함께 간단한 Sigle Page Application을 구축하고 있습니다.
각도 조절기가 작동하지 않는 것 같습니다.

index.html을 :

<!DOCTYPE html> 
<html ng-app="Js-Users-App"> 

<head> 
    <meta charset="utf-8"> 
    <title>Js Users</title> 
    <!-- Compiled and minified CSS --> 
    <link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css"> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> 

</head> 
<body> 
    <nav class="white" role="navigation"> 
     <div class="nav-wrapper container"> 
      <a id="logo-container" href="#/" class="brand-logo">Js Users</a> 
      <ul class="right hide-on-med-and-down"> 
       <li><a href="#/add">Add</a></li> 
      </ul> 

      <ul id="nav-mobile" class="side-nav"> 
       <li><a href="#/add">Add</a></li> 
      </ul> 
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 
     </div> 
    </nav> 

    <div class="container"> 
     <div ng-view></div> 
    </div> 



    <script src="node_modules/angular/angular.min.js"></script> 
    <script src="node_modules/angular-route/angular-route.min.js"></script> 
    <script src="node_modules/jquery/dist/jquery.min.js"></script> 
    <script src="node_modules/materialize-css/dist/js/materialize.min.js"></script> 

    <script type="text/javascript" src="app/app.js"></script> 
    <script type="text/javascript" src="app/main/main.js"></script> 
    <script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script> 

</body> 
</html>

main.html :

<div class="page-header"> 
    <h2 id="tables">Pagination in Angular Js</h2> 
</div> 
<div ng-controller="UsersList"> 
    <table class="table striped"> 
     <thead> 
      <tr> 
       <th>Last Name</th> 
       <th>First Name</th> 
       <th>Created At</th> 
       <th>Status</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="user in users"> 
       <td>{{user.last_name}}</td> 
       <td>{{user.first_name}}</td> 
       <td>{{user.created_at}}</td> 
       <td>{{user.status}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

main.js :

다음은 내가 사용하는 파일입니다

angular.module('Js-Users-App', []).controller('UsersList', UsersList); 

function UsersList($scope){ 
    $scope.users = []; 

    userDataFactory.userList().then(function(response) { 
     $scope.users = response.data; 
    }); 
}

사용자 데이터 factory.js :

angular.module('Js-Users-App').factory('userDataFactory', userDataFactory); 

function userDataFactory($http) { 
    return { 
     userList: userList 
    }; 

    function userList() { 
     return $http.get("users.json").then(complete).catch(failed); 
    } 

    function complete(response) { 
     return response; 
    } 

    function failed(error) { 
     console.log(error.statusText); 
    } 
}

가 app.js :

var app = angular.module("Js-Users-App", ["ngRoute"]).config(config); 

function config($routeProvider) { 

    $routeProvider 
    .when("/", { 
     templateUrl: "app/main/main.html" 
    }) 
    .when("/add", { 
     templateUrl: "app/addUser/addUser.html" 
    }) 
    .otherwise({ 
     redirectTo: "/" 
    }); 
}

나는 서버를 시작하지만, 응용 프로그램없이 목적으로 만 탐색 모음을 보여주고있다 탁자. 또한 콘솔을 점검했지만 오류나 경고를 표시하지 않습니다. 또한, 일부 메시지를 console.log으로 인쇄하려고 시도했지만 메시지가 표시되지 않습니다. 응용 프로그램은 python -m SimpleHTTPServer으로 시작하는 간단한 웹 서버에서 실행됩니다. 어디에서나 확인했지만 오타가있는 것은 아닙니다. 또한 파일의 경로가 올바른 것처럼 보입니다. 당신은 어디에 문제가 있다고 생각합니까? 저는 아직 AngularJs에 익숙하지 않으므로 아마도 제대로 디버깅 할 수 없습니다. 감사.

출처

2017-12-05 DamianFox

main.js에서 모듈을 사용하는 대신 다시 정의합니다. angular.module ('Js-Users-App', [])을 angular.module ('Js-Users-App')으로 대체합니다. 또한 컨트롤러에 팩토리를 삽입하지 않으므로 문제가 될 수 있습니다. – yadejo

'userDataFactory'가 의존성으로로드 된 것이 확실치 않습니다. 컨트롤러에서 메소드를 호출하는 방법은 무엇입니까? –

그게 문제였습니다. 나는'[]'를 제거함으로써 그것을 고치고'userDataFactory'를 의존성으로서로드했습니다. – DamianFox

의견에 언급했듯이 userDataFactory을 컨트롤러에 종속시켜 삽입해야합니다.

그리고 나서 $ inject으로 종속성을 주입하는 것을 잊지 마십시오.

추가적으로 모듈 사용에 의존성 삽입 배열을 지정할 필요가 없습니다. angular.module('Js-Users-App', [])은 angular.module('Js-Users-App')이됩니다.

angular.module('Js-Users-App').controller('UsersList', UsersList); 

UsersList.$inject = ['$scope', 'userDataFactory']; 

function UsersList($scope, userDataFactory){ 
    $scope.users = []; 

    userDataFactory.userList().then(function(response) { 
     $scope.users = response.data; 
    }); 
}

출처

2017-12-05 15:38:48 Zooly

각도 조절기가 작동하지 않는 것 같습니다.

답변

관련 문제