Angular 控制器似乎不工作

Question

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

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: "/"
    });
}

我已经启动了服务器，但应用程序只显示导航栏，没有 table。我也检查了控制台，但它没有显示任何错误或警告。此外，我尝试使用 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;
    });
}

Angular 控制器似乎不工作

Angular Controller doesn't seem to work

angularjs

angularjs-scope

ngroute