javascript - 参数 'meetupsController' 不是函数,出现未定义错误

标签 javascript angularjs

我是 Angular 和 Express 框架的新手。我正在开发一个简单的服务器,它响应给定的路由并显示在 Controller 中声明的变量的值。但是出现了一个错误,例如 Controller 未定义。这里为了方便起见, Controller 存储在 client/js/controllers 文件夹中 整个项目的代码在这里

index.html

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <meta name="description" content="">
    <meta name ="viewport" content ="width=device-width ,initial-scale =0">
</head>
<body>

    <!-- Meetups View -->
    <div ng-controller="meetupsController">
        <h1>There are {{meetupsCount}} meetups</h1>
        <!-- <ul>
            <li ng-repeat="meetup in meetups">
                {{meetup.name}}
            </li>
        </ul> -->
        <!-- <form ng-submit="createMeetup()">
            <input type="text" placeholder="Meetup Name" ng-model="meetupName"></input>
            <button type="submit">Add</button>
        </form> -->
    </div>

    <!-- <a href="">Hello World</a> -->
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script  src="/js/controllers/meetups-controller.js"></script>
</body>
</html>

meetups-controller.js

function meetupsController ($scope) {
    $scope.meetupsCount = 10;

    // $scope.meetups = [
 //     { name : "Meet 1"},
 //     { name : "Meet 2"},
 //     { name : "Meet 3"}
    // ]
    // $scope.createMeetup =  function () {
    //  $scope.meetups.push({ name : $scope.meetupsName});
    //  $scope.meetupsName = '';
    // }
}

main.js

// console.log("Hello from node");

//Express server

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

app.get('/' , function(req ,res) {
    res.sendFile(__dirname + '/client/views/index.html');
});

app.use('/js',express.static(__dirname +'/client/js'));

app.listen(3000 ,function () {
    console.log('Im Listening .... ');
});

错误日志在这里

angular.js:12520 Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=meetupsController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
    at qb (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:131)
    at Qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:218)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:80:210
    at w (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:177)
    at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:61:30)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)

Screenshot here

最佳答案

您尚未定义 Angular 应用 (ng-app=""),也未在 Angular 应用中注册您的 Controller 。

meetups-controller.js(添加在文件底部):

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

index.html(更改):

<html ng-app="myApp">

关于javascript - 参数 'meetupsController' 不是函数,出现未定义错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36821145/

相关文章:

javascript - 如何使用 AngularJS 在浏览器 cookie 中存储身份验证承载 token

javascript - AngularJS Controller 中的重构函数

javascript - AngularJS 中重复范围定义方法

angularjs - 是否可以在Angular属性中使用多条线?

javascript - 查找未使用的组合

javascript - 我无法使用 Express 中的 geofirestore 从我的 firestore 数据库获取数据

javascript - 在 CSS 中,我不知道如何将 "content"添加到 "first-line"或 "first-letter"

javascript - JavaScript 中 onclick 属性的变量范围

javascript - 使用 <a href ="#id"> 时将目标对齐到中间

sql - 如何在 node.js 中使用 Spring MVC