Fatal编程技术网
  • javascript/
  • Javascript 加载模块在AngularJS中失败

Javascript 加载模块在AngularJS中失败

javascript html angularjs

Javascript 加载模块在AngularJS中失败,javascript,html,angularjs,Javascript,Html,Angularjs,我使用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 &

我使用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
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文件

angular.module("todo", ["controller", "service"]);
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>
后端中的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

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);
节点服务器中的
app.get（'*'，function（req，res）{
这一行就是问题所在。基本上，您已经告诉服务器，无论传入什么请求，它都应该返回
res.sendfile（'B:\\node\\ToDo\\NodeTODOMongo\\index.html'）
。这会导致对
.js
文件的请求，导致服务器返回
index.html
，而不是实际请求的文件

您可以在
app.get
之前添加
app.use（'/frontend'，express.static（uu dirname+'/frontend'））；
以启用
/frontend
目录的静态请求管道，该目录似乎是存储
.js
文件的地方

正如@GregL所指出的，在
app.get（'*'，…
之后定义的其他路由也会出现问题

我建议Bran Ford正确配置angular+express。

你能把main.js文件上传到某个地方吗？@NikhilBhandari谢谢你的回复。main.js文件只包含一行代码。我已经在代码段中写了这行代码。我只是想看看这个文件，有时候在你复制某个文件时会复制一些不可见的字符正在从网页删除。我尝试运行你的代码，但它在我的计算机上运行，因此它不是你的代码，而是某个不可见的字符或受感染的浏览器/计算机。：）尝试在其他浏览器中打开它。我尝试使用Firefox和Chrome，得到了相同的结果……换句话说，Express会根据您在代码中指定的路由顺序来评估要运行的路由。通过先指定与每个GET请求相匹配的路由，其他的
.GET（）
您稍后定义的路线，第一条路线将处理。谢谢您的评论。我现在理解了，它确实对我有帮助。@GregL 
//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);
});

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);
            });
    });
}

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);