Question

我最近开始研究AngularJS，现在我陷入困境，我似乎无法找到解决方案。我想我不理解$ routeProvider和$ http的基础知识。这是我的代码，任何帮助将不胜感激。

我的app.js

var bullTank = angular.module('bullTank',[
    'ngRoute',
    'btController'
]);

bullTank.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/getUsers',{
            templateUrl: 'getUsers.html',
            controller : 'btListController'
        }).
        otherwise({
                redirectTo: '/getUsers'
            });
    }
]);

controller.js

var btController = angular.module('btController',[]);

btController.controller('btListController', ['$scope','$http',  function($scope,$http){
    $http.get('../webservices/getUsers.php').success(function(data){
        $scope.users = data;
    })
}]);

我的index.html

<!DOCTYPE html>
<html lang="en" ng-app="bullTank">
<head>
    <meta charset="UTF-8">
    <title>Bulltank admin</title>

    <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
</head>
<body>

<header class="navbar navbar-bright navbar-fixed-top" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/" class="navbar-brand">BullTank</a>
        </div>
        <nav class="collapse navbar-collapse" role="navigation">
        </nav>
    </div>
</header>

<div id="masthead">
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <h1><img src="img/bulltank.png" id="logo">
                    <!--<p class="lead">The easiest way to apply Bootstrap</p>-->
                </h1>
            </div>

        </div>
    </div><!-- /cont -->
</div>

<!-- Begin Body -->
<div class="container">
    <div class="row">
        <div class="col-md-3" id="leftCol">

            <ul class="nav nav-stacked" id="sidebar">
                <li><a href="#/getUsers">Manage App Users</a></li>
                <li><a href="#sec1">Add/Remove Users</a></li>
                <li><a href="#sec2">Manage Banner Advertisement Manager</a></li>
                <li><a href="#sec3">Content Management</a></li>
            </ul>

        </div>
        <div ng-view></div>

    </div>
</div>



</body>
</html>

getUsers.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <!--Sidebar content-->


        </div>
        <div class="col-md-10">
            <!--Body content-->


            <table class="table-striped">
                <thead>
                <tr>
                    <th></th>
                    <th>id</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Username</th>
                    <th>Profilepic</th>
                    <th>Cover Video</th>
                    <th>Private</th>
                    <th>Email</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="user in users">
                    <td>
                        <button class="btn" ng-click="editUser(user.id)">
                        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
                        </button>
                    </td>
                    <td>{{user.id}}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>

有什么建议吗？

Answer 1

此代码没问题。

首先，从浏览器转到/getUsers，检查HTML源代码并查看getUsers.html是否已加载到ng-view。如果是，则$routeProvider有效。

其次，按如下方式更改$http请求：

$http.get('../webservices/getUsers.php').success(function(data){
    console.log(data);
    $scope.users = data;
});

然后打开浏览器控制台，转到/getUsers，检查控制台并查看其中记录的内容。它必须是一组用户，否则它将无法工作。

如果没有记录任何内容，则切换到“网络”选项卡，您可以在其中查看到目前为止所做的所有AJAX请求。查看是否存在../webservices/getUsers.php，并返回状态代码200.您还可以检查请求和响应标头，类型等。

注意：整个指南假定您在浏览器控制台中没有错误（我知道您的代码中存在一个问题，但您需要了解如何调试代码，以便我自己找到它。）

Angularjs $ routeProvider和$ http无效

1 个答案: