Question

我使用AngularJs构建一个简单的Sigle Page应用程序，它检索存储在基于服务器的应用程序上的数据。以下是我使用的文件：

的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 打印一些消息，但是没有显示消息。该应用程序在一个简单的Web服务器上运行，以python -m SimpleHTTPServer开头。我到处检查过，但似乎没有任何拼写错误。此外，文件的路径似乎是正确的。你认为这是什么问题？我还是AngularJs的新手，所以，我可能无法正常调试。感谢。

Answer 1

如评论中所述，您需要在控制器中注入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;
    });
}

角度控制器似乎无法工作

1 个答案: