Angularjs $routeProvider 和 $http 不工作

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'
            });
    }
]);

控制器.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>

获取用户.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 个解决方案

解决方案1
0 2015-07-31 14:00:35

Angularjs $routeProvider 和 $http 不工作

问题描述

1 个解决方案

解决方案1 0 2015-07-31 14:00:35

解决方案1
0 2015-07-31 14:00:35