Javascript Angularjs$routeProvider和$http不工作_Javascript_Angularjs

Javascript Angularjs$routeProvider和$http不工作

javascript angularjs

Javascript Angularjs$routeProvider和$http不工作,javascript,angularjs,Javascript,Angularjs,我最近开始研究AngularJS，现在我陷入困境，似乎找不到解决方案。我想我还不了解$routeProvider和$http的基本知识。这是我的代码，任何帮助都将不胜感激我的app.js var bullTank = angular.module('bullTank',[ 'ngRoute', 'btController' ]); bullTank.config(['$routeProvider', function ($routeProvider) {

我最近开始研究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>


身份证件
名字
姓氏
用户名
剖面图
封面视频
私有的
电子邮件
编辑
{{user.id}

有什么建议吗？

这段代码很好

首先，从浏览器转到

/getUsers

，检查HTML源代码，查看

getUsers.HTML

是否加载到

ng视图中。如果是，则$routeProvider
工作
其次，按如下方式更改$http
请求：
$http.get('../webservices/getUsers.php').success(function(data){
    console.log(data);
    $scope.users = data;
});

然后打开浏览器控制台，转到/getUsers
，检查控制台并查看那里记录了什么。它必须是一个用户数组，否则将无法工作
如果没有记录任何内容，则切换到网络选项卡，在那里可以看到迄今为止发出的所有AJAX请求。查看是否存在。/webservices/getUsers.php
，并返回状态代码200。您还可以检查请求和响应头、类型等
注意：本指南假设您在浏览器控制台中没有错误（我知道您的代码中有一个问题，但您需要学习如何调试代码，以便让您自己查找。）
哪里是getUsers.html
？好了，添加了！实际问题是什么？n视图中没有加载任何内容。它正在重定向到“getUsers”，但未发生任何情况检查此Plnkr:。至少这些路线正在运作$http被替换为警报。否则，路由配置也会更改。