Angularjs $routeProvider 和 $http 不工作

Question

I started working on AngularJS recently and now I am stuck and I can't seem to find the solution.我最近开始研究 AngularJS，现在我被困住了，我似乎找不到解决方案。 I think I am not understanding the basics of $routeProvider and $http.我想我不了解 $routeProvider 和 $http 的基础知识。 Here is my code and any help will be appreciated.这是我的代码，任何帮助将不胜感激。

My app.js我的 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控制器.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;
    })
}]);

And my index.html还有我的 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获取用户.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>

Any suggestions?有什么建议？

Answer 1

This code is fine.这段代码没问题。

First, go to /getUsers from your browser, check the HTML source and see if getUsers.html is loaded into ng-view .首先，从浏览器转到/getUsers ，检查 HTML 源代码并查看getUsers.html是否已加载到ng-view 。 If it is, then $routeProvider works.如果是，则$routeProvider起作用。

Secondly, change your $http request as follows:其次，按如下方式更改您的$http请求：

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

Then open browser Console, go to /getUsers , check the console and see what is logged there.然后打开浏览器控制台，转到/getUsers ，检查控制台并查看那里记录的内容。 It must be an array of users, otherwise it won't work.它必须是一个用户数组，否则将无法工作。

If nothing is logged, then switch to a Network tab where you can see all AJAX requests made so far.如果没有记录任何内容，则切换到网络选项卡，您可以在其中查看迄今为止发出的所有 AJAX 请求。 See if ../webservices/getUsers.php is there, and it returns status code 200. You can also check the request and the response headers, types etc.查看../webservices/getUsers.php是否存在，它返回状态代码 200。您还可以检查请求和响应标头、类型等。

Note: this whole guideline assumes you have no errors in browser console (I know one problem in your code, but you need to learn how to debug your code so I'll let you find it yourself.)注意：整个指南假定您在浏览器控制台中没有错误（我知道您的代码中存在一个问题，但您需要学习如何调试代码，所以我会让您自己找到它。）

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