无法从控制器查看虚拟数据

时间：2017-03-23 18:37:57

标签： javascript angularjs html5 express

我是指新的堆栈实现。我试图从控制器查看数据。但它没有用。 web浏览器的控制台当时发出了此错误消息。

Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl
Stack trace:
M/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:6:425
wf/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:93:395
ba@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:76:290
n@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:68:1
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:496
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
ca/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:119
Pc/c/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:4
Mf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:176
Mf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:400
Pc/c/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:469
h/<.invoke@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:44:169
Pc/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:390
Pc@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:179
ue@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:20:379
@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:332:117
b@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:38:36

以下文件是server.js，index.html和controller.js文件。如何解决这个问题。

server.js 

var express = require('express');
var app = express();


app.use(express.static(__dirname + "/public"));

app.listen(3000);
console.log("Server is running");

的index.html 

<!DOCTYPE>
<html ng-app>
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <title>Contact app list</title>
</head>
<body>
    <div class="container" ng-controller = "AppCtrl">
        <h1>Contact List</h1>

        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Number </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="content in contactlist">
                    <td>{{contact.name}}</td>
                    <td>{{contact.email}}</td>
                    <td>{{contact.number}}</td>
                </tr>
            </tbody>
        </table>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

<script src="controllers/controller.js"></script>
</body>
</html>

controller.js 

function AppCtrl($scope){
    console.log("Hello controller");

    person1 ={
        name:'Hello',
        email: '123',
        number:'1'
    };

    person2 ={
        name:'gello',
        email: '456123',
        number:'31'
    };

    person3 ={
        name:'33Hello',
        email: '33123',
        number:'31'
    };

    var contactlist = [person1, person2 , person3];
    $scope.contactlist = contactlist;
}

4 个答案:

答案 0 :(得分：0)

这是由于控制器未在您的应用程序中注册而导致的错误。不调用AppCtrl函数。尝试像这样注册控制器

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

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

如有任何疑问，请查看controller

的文档示例

如果我误解或错过了什么，请告诉我。

希望这有帮助。谢谢。

答案 1 :(得分：0)

＆＃13;
＆＃13; 
     var AppCtrlfn = function ($scope){   

    person1 ={
        name:'Hello',
        email: '123',
        number:'1'
    };

    person2 ={
        name:'gello',
        email: '456123',
        number:'31'
    };

    person3 ={
        name:'33Hello',
        email: '33123',
        number:'31'
    };

    var contactlist = [person1, person2 , person3];
    $scope.contactlist = contactlist;
}
    angular.module('app', [])
  .controller('AppCtrl',AppCtrlfn)
＆＃13; 
<html  ng-app="app">
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <title>Contact app list</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
</head>
<body>
    <div class="container" ng-controller = "AppCtrl">
        <h1>Contact List</h1>
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Number </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="content in contactlist">
                    <td>{{content.name}}</td>
                    <td>{{content.email}}</td>
                    <td>{{content.number}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

从@ yashwanth_t的评论中扩展并从您的代码中修改

试试这个

你的app.js 

var myApp = angular.module('myApp',[]);
myApp.controller('ContactCtrl', ['$scope', function($scope) {
  var person1 ={
      name:'Hello',
      email: '123',
      number:'1'
  };

    var person2 ={
      name:'gello',
      email: '456123',
      number:'31'
  };

  var person3 ={
      name:'33Hello',
      email: '33123',
      number:'31'
  };
  $scope.contactList = [];
  $scope.contactList.push(person1);
  $scope.contactList.push(person2);
  $scope.contactList.push(person3);
  console.log($scope.contactList)
}]);
index.html中的

<div class="container" ng-app="myApp">
    <h1>Contact List</h1>

    <table class="table" ng-controller="ContactCtrl">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Number </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contactList">
                <td>{{contact.name}}</td>
                <td>{{contact.email}}</td>
                <td>{{contact.number}}</td>
            </tr>
        </tbody>
    </table>
</div>

答案 3 :(得分：0)

谢谢大家试图帮助我的人.. 我必须更改index.html和controller.html文件来解决该问题。

<强>的index.html 

<!DOCTYPE>
<html ng-app="myapp">
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <title>Contact app list</title>
</head>
<body>
    <div class="container" ng-controller = "AppCtrl">
        <h1>Contact List</h1>

        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Number </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="content in contactlist">
                    <td>{{content.name}}</td>
                    <td>{{content.email}}</td>
                    <td>{{content.number}}</td>
                </tr>
            </tbody>
        </table>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

<script src="controllers/controller.js"></script>
</body>
</html>

<强> controller.js 

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


app.controller ('AppCtrl', function($scope){
    console.log("Hello controller");

    person1 ={
        name:'Hello',
        email: '123',
        number:'1'
    };
    person2 ={
        name:'gello',
        email: '456123',
        number:'31'
    };

    person3 ={
        name:'33Hello',
        email: '33123',
        number:'31'
    };

    var contactlist = [person1, person2 , person3];
    console.log(contactlist);
    $scope.contactlist = contactlist;
});
相关问题
最新问题