加载模块在AngularJS中失败

Question

I used Chrome to open the index.html page and the error is cannot find right modules. 我使用Chrome打开index.html页面，错误是找不到正确的模块。

Uncaught SyntaxError: Unexpected token < angular.js:1
Uncaught SyntaxError: Unexpected token < controller.js:1
Uncaught SyntaxError: Unexpected token < service.js:1
Uncaught SyntaxError: Unexpected token < main.js:1

I used Firefox and got the following similar errors 我使用Firefox并遇到以下类似错误

SyntaxError: expected expression, got '<'


<html ng-app="todo">

angular.js (line 1)
SyntaxError: expected expression, got '<'


<html ng-app="todo">

controller.js (line 1)
SyntaxError: expected expression, got '<'


<html ng-app="todo">

service.js (line 1)
SyntaxError: expected expression, got '<'


<html ng-app="todo">

main.js (line 1)

I have been finding out where I made mistakes for a while, but still no clues. 我一直在寻找错误的地方，但是仍然没有任何线索。 I copied and pasted the code here and thanks in advance for pointing me out. 我在此处复制并粘贴了代码，并在此先感谢您向我指出。 Code is as bellow shows: 如下所示，代码如下：

service.js file service.js文件

var service = angular.module("service",[]);

service.factory("todoFactory", ["$http",
    function($http){
        return {
            get: function(){
                return $http.get('/todo');
            },
            create: function(newtodo){
                return $http.post('/todo', newtodo);
            },
            delete: function(id){
                return $http.delete('/todo:' + id);
            }
        }
}]);

controller.js file controller.js文件

var ctrl = angular.module("controller", []);
ctrl.controller("mainController", ['$http', '$scope', 'todoFactory', function($scope, $http, todoFactory){
    $scope.formData = {};


    todoFactory.get().success(function(data){
        $scope.todoitems = data;
    });


    if(!$scope.formData.title && !$scope.formData.content){
        //var newtodoData = {
        //    "title":$scope.formData.title,
        //    "content" : $scope.formData.content
        //}
        todoFactory.create($scope.formData)
                   .success(function(data){
                        //return the updated todoitems
                        $scope.todoitems = data;
                        //clear form data for next time use
                        $scope.formData = {};
                    });
    }

}]);

main.js file main.js文件

angular.module("todo", ["controller", "service"]);

index.html index.html

<html ng-app="todo">
    <head>
        <script src="frontend/angular.js"></script>
        <script src="frontend/controller.js"></script>
        <script src="frontend/service.js"></script>
        <script src="frontend/main.js"></script>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    </head>

    <body ng-controller="mainController">
        <form class="form-inline" ng-submit="submitForm()">
            <div class="form-group">
                Title:
                <input class="form-control col-md-4" type="text" ng-model="formData.title"><br>
            </div>
            <div class="form-group">
                Content:
                <input class="form-control col-md-6" type="text" ng-model="formData.content"><br>
            </div>
            <button class="btn btn-primary" type="submit">Add</button>
        </form>

        <div>
            <p>Here is your todo list:</p>
                <div ng-repeat="item in todoitems"></div>
                <div class="col-md-3">{{item.title}}</div>
                <div class="col-md-6">{{item.content}}</div>
        </div>

    </body>

</html>

Following is my server side code 以下是我的服务器端代码

server.js server.js

//set up all the modules needed
var express = require("express");
var bodyParser = require("body-parser");
var morgan = require("morgan");

var app = express();
var todoModel = require('./model.js');

//use part for middle layers
app.use(morgan('dev'));                                          
app.use(bodyParser.urlencoded({'extended':'true'}));             
app.use(bodyParser.json());                                      
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));

var port = process.env.PORT || 9000;
require('./route.js')(app);

app.listen(port, function() {
    console.log("Listening on " + port);
});

Route.js in backend 后端中的Route.js

var todoModel = require('./model.js');


function getAllTodos(res){
    todoModel.find(function(err, alltododata){
        if(err)
            res.send(err);
        res.json(alltododata);
    });
}

module.exports = function(app){

    //render the view page
    app.get('*', function(req, res) {
        res.sendfile('B:\\node\\ToDo\\NodeTODOMongo\\index.html'); // load the single view file (angular will handle the page changes on the front-end)
    });


    //get all todos return json data
    app.get('/todo', function(req, res){
        getAllTodos(res);
    });


    //create items and send back all todos after creation
    app.post('/todo', function(req, res){
        todoModel.create({
            title : req.body.title,
            content: req.body.content
        }, function(err, todo){
            if(err){
                res.send(err);
            }
            getAllTodos(res);
        });
    });


    app.delete('/todo:id', function(req, res){
        todoModel.remove({
                _id : req.params.id
            }, //what is the alltodo here?
            function(err, todo){
                if(err)
                    res.send(err);
                getAllTodos(res);
            });
    });
}

model.js model.js

var mongoose = require('mongoose');

//connect to localhost default test db
mongoose.connect('mongodb://localhost/test');

var db = mongoose.connection;

//let me know if the connection errors out
db.on('error', console.error.bind(console, 'connection error:'));


db.once('open', function callback () {
  console.log("h");
});

//define schema of the todo model
var schema = new mongoose.Schema({
    title: String,
    content: String,
    createDate: {type: Date, default:Date.now}
});

var model = mongoose.model("todo", schema);

module.exports = mongoose.model("todo", schema);

Answer 1

The line app.get('*', function(req, res) { in your node server is the problem here. Basically, you have told the server that no matter what request comes in, it should return res.sendfile('B:\\\\node\\\\ToDo\\\\NodeTODOMongo\\\\index.html'); . This results in requests for your .js files causing the server to return index.html instead of the actual file requested. 节点服务器中的app.get('*', function(req, res) {是这里的问题。基本上，您已经告诉服务器，无论res.sendfile('B:\\\\node\\\\ToDo\\\\NodeTODOMongo\\\\index.html');什么请求，它都应返回res.sendfile('B:\\\\node\\\\ToDo\\\\NodeTODOMongo\\\\index.html');这会导致对您的.js文件的请求，导致服务器返回index.html而不是所请求的实际文件。

You can add app.use('/frontend', express.static(__dirname + '/frontend')); 您可以添加app.use('/frontend', express.static(__dirname + '/frontend')); before your app.get to enable a static request pipeline for the /frontend directory, which appears to be where your .js files are stored. 在app.get之前为/frontend目录启用静态请求管道，该目录似乎是.js文件的存储位置。

As pointed out by @GregL, you will also have issues with the other routes you have defined after the app.get('*',... . 正如@GregL指出的那样，在app.get('*',...之后，您定义的其他路由也会遇到问题。

I would recommend Bran Ford's blog post on correctly configuring angular + express. 我会推荐Bran Ford的博客文章，介绍如何正确配置angular + express。

加载模块在AngularJS中失败

问题描述

Following is my server side code 以下是我的服务器端代码

1 个解决方案

解决方案1
2 已采纳 2015-03-29 22:29:03

加载模块在AngularJS中失败

问题描述

Following is my server side code 以下是我的服务器端代码

1 个解决方案

解决方案1 2 已采纳 2015-03-29 22:29:03

解决方案1
2 已采纳 2015-03-29 22:29:03