将节点.js应用程序从 JavaScript 转换为咖啡脚本时出现无效字符和模块

Invalid characters and modules when translating a node.js app from javascript to coffee script

本文关键字：无效字符模块脚本咖啡应用程序 js 节点 JavaScript 转换更新时间：2023-09-26

所以基本上我正在尝试遵循此处列出的教程，除了使用咖啡脚本而不是javascript。我在网站上收到两个错误，
1。关于 core.coffee （# public/core.coffee）第一行中的"#"字符的语法错误
2. 一个错误，显示没有模块：苏格兰威士忌。
在实际页面上，它没有显示待办事项的数量和每个待办事项，而是说 {{ todos.length }} and {{ todo.text }} .

这是我的核心咖啡：

# public/core.coffee
scotchTodo = angular.module 'scotchTodo', []
mainController = ($scope, $http) ->
    $scope.formData = {}
    # when landing on the page, get all todos and show them
    $http.get '/api/todos'
        .success((data) ->
            $scope.todos = data
            console.log data
        ).error((data) ->
            console.log 'Error: ' + data
        )
    # when submitting the add form, send the text to the node API
    $scope.createTodo = ->
        $http.post '/api/todos', $scope.formData
            .success((data) ->
                $scope.formData = {} # clear the form so our user is ready to enter another
                $scope.todos = data
                console.log data
            ).error((data) ->
                console.log 'Error: ' + data
            )
    # delete a todo after checking it
    $scope.deleteTodo = (id) ->
        $http.delete '/api/todos/' + id
            .success((data) ->
                $scope.todos = data
                console.log data
            ).error((data) ->
                console.log 'Error: ' + data
            )

这是我的索引.html：

<!-- index.html -->
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
    <title>Todo App</title>
    <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
        #todo-list              { margin-bottom:30px; }
    </style>
    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
    <script src="core.coffee"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
    <div class="container">
        <!-- HEADER AND TODO COUNT -->
        <div class="jumbotron text-center">
            <h1>I'm a Todo-aholic <span class="label label-info">{{ todos.length }}</span></h1>
        </div>
        <!-- TODO LIST -->
        <div id="todo-list" class="row">
            <div class="col-sm-4 col-sm-offset-4">
                <!-- LOOP OVER THE TODOS IN $scope.todos -->
                <div class="checkbox" ng-repeat="todo in todos">
                    <label>
                        <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                    </label>
                </div>
            </div>
        </div>
        <!-- FORM TO CREATE TODOS -->
        <div id="todo-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">
                        <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                        <input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
                    </div>
                    <!-- createToDo() WILL CREATE NEW TODOS -->
                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

如果您需要我提供任何其他信息，请告诉我，真的想了解发生了什么。谢谢！

您似乎正在尝试在浏览器中使用CoffeeScript：

<script src="core.coffee"></script>

您需要先编译它，或者将编译器附加到浏览器代码中，以便可以即时编译它。后者通常不是一个好主意，因此您应该添加一个使用 CoffeeScript 编译器将您的core.coffee转换为core.js的构建步骤，然后将该脚本包含在您的index.html中。

从终端看起来有点像 coffee -c core.coffee ，但还有更多选项，可以在这里看到。