个人中心
gpt4 book ai didi

javascript - 使用 Node 和 Mongo 时，Angular 无法识别模块

转载 作者：太空宇宙 更新时间：2023-11-04 02:10:29 25 4
gpt4 key购买 nike

正在开发一个足够原始的 MEAN 堆栈项目。当我运行应用程序时，数据绑定(bind)失败，因为使我的 View 和后端之间的关联(使 http 连接到我的数据库)的模块永远不会被实例化，并且无法被识别。

控制台中出现以下错误消息

[$injector:modulerr] Failed to instantiate module moviesApp due to:
Error: [$injector:nomod] Module 'moviesApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

错误消息是相当容易理解的。我似乎错误地(或根本没有)在文件“Movies.js”中创建了 View “MoviesList.html”和包含我上面提到的模块(moviesApp)的文件之间的链接。

Movies.js 使用工厂。我已经检查了一般语法(看​​不出实际工厂内的错误代码会如何导致模块无法识别)。之前在 jsfiddle 上写过一个基本工厂，我相信语法应该没问题。 https://jsfiddle.net/Sheepy99/4wmd3zd0/ (假设我在该示例中链接了工厂，但这是相同的一般前提)

在发布其余代码之前，它基于此处包含的示例:http://www.dotnetcurry.com/nodejs/1032/nodejs-apps-in-visual-studio-mean-stack由于版本不同，我的一些代码有所不同，并且自作者发表文章以来，有些代码已被弃用(也想知道为什么他始终使用双双引号)。

如有任何歧义或 Unresolved 问题，请直接询问。

电影列表.html

<html>
<!--<meta charset="UTF-8">-->
<title>Node-Express Movie List</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="/styles/site.css">-->
 
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <!--<script src="/scripts/controller.js"></script>
    <script src="/scripts/movies.js"></script>-->

    <script src="../public/scripts/movies.js"></script>
    <script src="../public/scripts/controller.js"></script>    
</head>


<body>    
    <div class="container">
        <!--<div class="text-center" ng-app="moviesApp" ng-controller="MoviesCtrl">-->
        <div class="text-center" ng-app="moviesApp" ng-controller="MoviesCtrl">
            <h1>Node-Express Movie List</h1>
            <div class="col-md-12" control-group="">
                <input type="text" style="width: 200px;" ng-model="newMovieText">
                <button id="btnAddTodo" class="btn" style="margin: 2px;" ng-click="addMovie()" ng-disabled="newMovieText">Add Movie</button>
            </div>
 
            <div class="col-md-5" sticky-note="">
                <h3 class="text-center">Released Movies</h3>
                <!--<div class="col-md-5" rowmargin="" todoitem="" ng-repeat="movie" in="" movies="" |="" filter:{released:true}"="">-->
                <div class="col-md-5" rowmargin="" todoitem="" ng-repeat="movie" in="" movies="" filter:{released:true}>
                    <div class="thumbnail">
                        <input type="checkbox" ng-model="movie.watched" ng-change="movieWatched(movie)">
                      
                        <span ng-class="{watchedMovie: movie.watched}">{{movie.name}}</span>
                    </div>
                </div>
            </div>
 
            <div class="col-md-5" sticky-note="">
                <h3 class="text-center">Coming Up...</h3>
                <div class="col-md-5" rowmargin="" todoitem="" ng-repeat="movie" in="" movies="" filter:{released:false}>
                    <div class="thumbnail">
                        {{movie.name}}
                        <br>
                        <br>
                        <input type="button" value="Released!" class="btn btn-success" btn-link="" released-button="" ng-click="movieReleased(movie)" style="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

电影.js

var app = angular.module('moviesApp', []);
 
app.factory('moviesCRUD', function ($http, $q) {
    function getAllMovies() {
        var deferred = $q.defer();
 
        $http.get('/api/movies').then(function (result) {
            deferred.resolve(result.data);
        }, function (error) {
            deferred.reject(error);
        });
 
        return deferred.promise;
    }
 
    function addMovie(newMovie) {
        var deferred = $q.defer();
 
        $http.post('/api/movies', newMovie).then(function (result) {
            deferred.resolve(result.data.movie);
        }, function (error) {
            deferred.reject(error);
        });
 
        return deferred.promise;
    }
 
    function modifyMovie(updatedMovie) {
        var deferred = $q.defer();
 
        $http.put('/api/movies/' + updatedMovie._id, updatedMovie).then(function (data) {
            deferred.resolve(data);
        }, function (error) {
            deferred.reject(error);
        });
 
        return deferred.promise;
    }
 
    return {
        getAllMovies: getAllMovies,
        addMovie: addMovie,
        modifyMovie: modifyMovie
    };
});

mongoOperations.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;  
//http://stackoverflow.com/questions/24908405/mongoose-and-new-schema-returns-referenceerror-schema-is-not-defined 
//link recommends use of what's on line 2 as a solution

mongoose.Promise = global.Promise; //not using promises, this line removes a default setting and also gets rid of a warning about promises
mongoose.connect('mongodb://localhost/moviesDb');
var db = mongoose.connection;

//var movieSchema = mongoose.Schema({  *I shouldn't need this because i've declared "require('mongoose')"
var movieSchema = new Schema({
name: String, //doesn't like if I have spaces on each new line, before the use of characters
released: Boolean,
watched: Boolean
});
var MovieModel = mongoose.model('movie', movieSchema);

db.on('error', console.error.bind(console, "connection error"));
db.once('open', function () {
    //console.log("moviesDb is open...");     
    MovieModel.find().exec(function (error, results) {
        if (results.length === 0) {
            MovieModel.create({ name: "The Amazing Spider-Man 2", released: true, watched: false });
            MovieModel.create({ name: "The Other Woman", released: true, watched: true });
            MovieModel.create({ name: "Shaadi ke Side Effects", released: false, watched: false });
            MovieModel.create({ name: "Walk of Shame", released: true, watched: false });
            MovieModel.create({ name: "Lucky Kabootar", released: false, watched: false });
        }
    });
});

exports.fetch = function (request, response) {
    MovieModel.find().exec(function (err, res) {
        if (err) {
             response.send(500, { error: err });
        }
        else {
            response.send(res);
        }
    });
};
exports.add = function (request, response) {
    var newMovie = { name: request.body.name, released: false, watched: false };
    MovieModel.create(newMovie, function (addError, addedMovie) {
        if (addError) {
            response.send(500, { error: addError });
        }
        else {
            response.send({ success: true, movie: addedMovie });
        }
    });
};
exports.modify = function (request, response) {
    var movieId = request.params.movieId;
    MovieModel.update({ _id: movieId }, { released: request.body.released, watched: request.body.watched }, { multi: false },
        function (error, rowsAffected) {
        if (error) {
            response.send(500, { error: error });
        }
        else if (rowsAffected == 0) {
            response.send(500, { error: "No rows affected" });
        }
        else {
            response.send(200);
        }
    }
);
};

服务器.js

var http = require('http');
var express = require('express');
var bodyParser = require('body-parser');
var path = require("path");
 
var port = process.env.port || 1337;
 
var app = express();
//app.use(bodyParser()); //getting deprecated warning in shell when using this specific line
app.use(bodyParser.urlencoded({ extended: true }));
//app.use(bodyParser.json()); used in stackoverflow solution, can see potential benefit, but isn't helping
var mongoOps = require('./server/MongoOperations.js');
 
app.get('/', function (request, response) {
    //response.sendfile("views/MoviesList.html");
    //response.sendFile("views/MoviesList.html");
    response.sendFile("views/MoviesList.html", { "root": __dirname });
});

app.get('/api/list', function (request, response) {
    response.send([{ id: 1, name: "charlie" }, { "id": 2, "name": "ward" }]);
        //'Hello World!');
});

app.get('/api/movies', mongoOps.fetch);
 
app.post('/api/movies', mongoOps.add);
 
app.put('/api/movies/:movieId', mongoOps.modify);


app.use(express.static(path.join(__dirname, 'public')));


app.listen(port);

Controller .js

app.controller('MoviesCtrl', function ($scope, moviesCRUD) {
    $scope.released = { released: true };
    $scope.notReleased = { released: false };
     
    function init() {
        moviesCRUD.getAllMovies().then(function (movies) {
            $scope.movies = movies;
        }, function (error) {
            console.log(error);
        });        
    }
 
    $scope.movieReleased = function (movie) {
 
        moviesCRUD.modifyMovie({ _id: movie._id, name: movie.name, released: true, watched: movie.watched })
                  .then(function (result) {
                      if (result.status === 200) {
                          movie.released = true;
                      }
                  }, function (error) {
                      console.log(error);
                  });        
    };
 
    $scope.movieWatched = function (movie) {
        moviesCRUD.modifyMovie(movie)
                  .then(function (result) {
                      if (result.status === 200) {
                          console.log("Movie updated");
                      }
                  }, function (error) {
                      movie.watched = !movie.watched;
                  });        
    };
 
    $scope.addMovie = function () {
        moviesCRUD.addMovie({ name: $scope.newMovieText }).then(function (newMovie) {
            $scope.movies.push(newMovie);
            $scope.newMovieText = "";
        }, function (error) {
            console.log(error);
        });        
    };
 
    init();
});

此外，我的大部分 html 都被渲染为钻石内的问号。这让我非常困惑。只是想我会把它放在那里。

作为新手，任何简短的一般性建议都会受到欢迎，例如调整我的代码的可读性或方法。

最佳答案

我对您的代码做了一些更改，以使 Angular 能够“编译”它，但我没有 Controller 的代码，因此无法完成设置。但如果你看看这个plunk ，你可以看到我的改变。 

<html ng-app="moviesApp">

  <head>
    <!--<meta charset="UTF-8">-->
    <title>Node-Express Movie List</title>
    <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <!--<link rel="stylesheet" href="/styles/site.css">-->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <!--<script src="/scripts/controller.js"></script>
    <script src="/scripts/movies.js"></script>-->
    <script src="movies.js"></script>
    <!--<script src="../public/scripts/controller.js"></script>-->
  </head>

您在 HTML 中放置 HEAD 时遇到了问题，而且您在第一个 DIV 中引导了应用程序，我想它可以工作，但它非常不标准。您可以在 Plunk 或 Codepen 中启动您的应用程序，以使您自己更轻松。

玩得开心。

关于javascript - 使用 Node 和 Mongo 时，Angular 无法识别模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42463372/

25 4 0
文章推荐： javascript - Express webapp如何存储/访问用户设置
文章推荐： jquery - 使用 JQuery 展开折叠 div
文章推荐： javascript - 什么可能导致我的页面在加载时滚动到底部？
文章推荐： javascript - 如何使用 Node 的方法覆盖包和 ajax 来覆盖要放置的方法？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com