stack程序算法_设置MEAN Stack单页应用程序

最新推荐文章于 2024-05-21 22:44:12 发布

culiu9261

最新推荐文章于 2024-05-21 22:44:12 发布

阅读量377

点赞数

文章标签： vue python java nodejs 大数据 ViewUI

原文链接：https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application

版权

stack程序算法

Beginning an application from scratch can sometimes be the hardest thing to do. Staring at an empty folder and a file with no code in it yet can be a very daunting thing.

从头开始应用程序有时可能是最难的事情。盯着一个空文件夹和一个没有代码的文件可能是非常艰巨的事情。

In today's tutorial, we will be looking at the starting setup for a Node.js, AngularJS, MongoDB, and Express application (otherwise known as MEAN). I put those in the wrong order, I know.

在今天的教程中，我们将研究Node.js，AngularJS，MongoDB和Express应用程序（也称为MEAN）的启动设置 。我知道我以错误的顺序排列它们。

This will be a starting point for those that want to learn how to begin a MEAN stack application. Projects like mean.io and meanjs.org are more fully fledged MEAN applications with many great features you'd want for a production project.

对于那些想学习如何启动MEAN堆栈应用程序的人来说，这将是一个起点。诸如mean.io和meanjs.org之类的项目是功能更完善的MEAN应用程序，具有许多生产项目所需的强大功能。

You will be able to start from absolute scratch and create a basic application structure that will allow you to build any sort of application you want.

您将可以从头开始，并创建一个基本的应用程序结构，该结构将允许您构建所需的任何类型的应用程序。

This article has been updated to work with Express 4.0 本文已更新为可与Express 4.0一起使用

我们将要建设的 (What We'll Be Building)

A lot of the applications we've dealt with so far had a specific function, like our Node and Angular To-Do Single Page Application. We are going to step away from that and just a good old getting started application.

到目前为止，我们处理的许多应用程序都具有特定功能，例如Node和Angular To-Do Single Page Application 。我们将远离这个，只有一个很好的旧的入门应用程序。

This will be very barebones but hopefully it will help you set up your applications. Let's just call it a starter kit.

这将是非常准系统，但希望它将帮助您设置应用程序。让我们称之为入门工具包 。

申请条件 (Application Requirements)

Single Page Application
单页申请
Node.js backend with Express and MongoDB
Express和MongoDB的Node.js后端
AngularJS frontend
AngularJS前端
Modular Angular components (controllers, services)
模块化角度组件（控制器，服务）
Good application structure so our app can grow
良好的应用程序结构，因此我们的应用程序可以成长

This tutorial will be more based on application structure and creating a solid foundation for single page MEAN stack applications. For more information on CRUD, authentication, or other topics in MEAN apps we'll make sure to write other tutorials to fill those gaps.

本教程将更多地基于应用程序结构，并为单页MEAN堆栈应用程序打下坚实的基础。有关CRUD，身份验证或MEAN应用程序中其他主题的更多信息，我们将确保编写其他教程来弥补这些空白。

后端节点，MongoDB，Express (The Backend Node, MongoDB, Express)

Three letters out of the MEAN stack will be handled on the backend, our server. We will create our server, configure our application, and handle application routing.

MEAN堆栈中的三个字母将在我们的后端服务器上处理。我们将创建服务器 ， 配置应用程序并处理应用程序路由 。

所需工具 (Tools Required)

We will need Node and to make our lives easier, we'll use bower to pull in all our dependencies.

我们将需要Node并简化生活，我们将使用bower引入所有依赖项。

Bower isn't really necessary. You could pull in all the files we need yourself (bootstrap, angular, angular-route), but bower just gets them all for you! For more info, read our 凉亭不是真的必要。您可以提取我们需要的所有文件（引导程序，棱角文件，棱角路由文件），但是Bower只是为您提供所有文件！有关更多信息，请阅读我们的 guide on bower to get a better understanding. 凉亭指南，以更好地理解。

应用结构 (Application Structure)

By the end of this tutorial, we will have a basic application structure that will help us develop our Node backend along with our Angular frontend. Here's what it will look like.

在本教程结束时，我们将拥有一个基本的应用程序结构，它将帮助我们开发Node后端以及Angular前端。这就是它的样子。

- app
        ----- models/
        ---------- nerd.js <!-- the nerd model to handle CRUD -->
    ----- routes.js
    - config
        ----- db.js 
    - node_modules <!-- created by npm install -->
    - public <!-- all frontend and angular stuff -->
    ----- css
    ----- js
    ---------- controllers <!-- angular controllers -->
    ---------- services <!-- angular services -->
    ---------- app.js <!-- angular application -->
    ---------- appRoutes.js <!-- angular routes -->
    ----- img
    ----- libs <!-- created by bower install -->
    ----- views 
    ---------- home.html
    ---------- nerd.html
    ---------- geek.html
    ----- index.html
    - .bowerrc <!-- tells bower where to put files (public/libs) -->
    - bower.json <!-- tells bower which files we need -->
    - package.json <!-- tells npm which packages we need -->
    - server.js <!-- set up our node application -->

We'll be filling in our files into folder structure. All backend work is done in server.js, app, and config while all the frontend is handled in the public folder.

我们将文件填充到文件夹结构中。所有的后台工作是在做server.js ， app和config ，而所有的前端在处理public文件夹。

启动我们的节点应用程序package.json (Starting Our Node Application package.json)

All Node applications will start with a package.json file so let's begin with that.

所有Node应用程序都将从package.json文件开始，所以让我们开始吧。

{
      "name": "starter-node-angular",
      "main": "server.js",
      "dependencies": {
        "express" : "~4.5.1",
        "mongoose" : "~3.8.0",
        "body-parser" : "~1.4.2",
        "method-override" : "~2.0.2"        
      }
    }

That's it! Now our application will know that we want to use Express and Mongoose.

而已！现在我们的应用程序将知道我们要使用Express和Mongoose。

Note on Express 4 Since Express 4.0, body-parser and method-override are their own modules, which is why we have to include them here. For more information, here's our guide to Express 4. Express is a Node.js web application framework that will help us create our application. Mongoose is a MongoDB ORM that will help us communicate with our MongoDB database.

关于Express 4的说明自Express 4.0起， body-parser和method-override是它们自己的模块，这就是为什么我们必须在此处包括它们。有关更多信息，这是我们的Express 4指南。 Express是一个Node.js Web应用程序框架，可帮助我们创建应用程序。 Mongoose是一个MongoDB ORM，它将帮助我们与MongoDB数据库进行通信。

安装节点模块 (Install Node Modules)

To install the dependencies we just setup, just go into your console and type:

要安装我们刚刚设置的依赖项，只需进入控制台并输入：

npm install You'll see your application working to bring in those modules into the node_modules directory that it creates.

npm install您将看到您的应用程序正在将这些模块引入其创建的node_modules目录中。

Now that we have those, let's set up our application in server.js.

现在有了这些，让我们在server.js设置我们的应用程序。

设置我们的节点应用程序server.js (Setting Up Our Node Application server.js)

Since this is our starter kit for a single page MEAN application, we are going to keep this simple. The entire code for the file is here and it is commented for help understanding.

由于这是我们用于单页MEAN应用程序的入门工具包，因此我们将使其保持简单。该文件的完整代码在这里，并对其进行注释以帮助理解。

// server.js

// modules =================================================
var express        = require('express');
var app            = express();
var bodyParser     = require('body-parser');
var methodOverride = require('method-override');

// configuration ===========================================

// config files
var db = require('./config/db');

// set our port
var port = process.env.PORT || 8080; 

// connect to our mongoDB database 
// (uncomment after you enter in your own credentials in config/db.js)
// mongoose.connect(db.url); 

// get all data/stuff of the body (POST) parameters
// parse application/json 
app.use(bodyParser.json()); 

// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); 

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true })); 

// override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
app.use(methodOverride('X-HTTP-Method-Override')); 

// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public')); 

// routes ==================================================
require('./app/routes')(app); // configure our routes

// start app ===============================================
// startup our app at http://localhost:8080
app.listen(port);               

// shoutout to the user                     
console.log('Magic happens on port ' + port);

// expose app           
exports = module.exports = app;

We have now pulled in our modules, configured our application for things like database, some express settings, routes, and then started our server. Notice how we didn't pull in mongoose here. There's no need for it yet. We will be using it in our model that we will define soon.

现在，我们插入了模块，为数据库，一些快速设置，路由配置了应用程序，然后启动了服务器。请注意，我们是如何不在这里mongoose 。现在还不需要。我们将在即将定义的模型中使用它。

Let's look at config, a quick model, and routes since we haven't created those yet. Those will be the last things that the backend side of our application needs.

让我们看一下config ，一个快速model和routes因为我们还没有创建它们。这些将是我们应用程序后端需要的最后一件事。

配置config / (Config config/)

I know it doesn't seem like much now since we only are putting the db.js config file here, but this was more for demonstration purposes. In the future, you may want to add more config files and call them in server.js so this is how we will do it.

我知道现在看起来不多了，因为我们只是将db.js配置文件放在这里，但这更多是出于演示目的。将来，您可能希望添加更多配置文件并在server.js调用它们，因此我们将这样做。

// config/db.js
    module.exports = {
        url : 'mongodb://localhost/stencil-dev'
    }

Now that this file is defined and we've called it in our server.js using var db = require('./config/db');, you can call any items inside of it using db.url.

现在已经定义了该文件，并且已经在我们的server.js使用var db = require('./config/db');对其进行了调用var db = require('./config/db'); ，您可以使用db.url调用其中的任何项目。

For getting this to work, you'll want a local MongoDB database installed or you can just grab a quick one off services like Modulus or Mongolab. Just go ahead and create an account at one of those, create a database with your own credentials, and you'll be able to get the URL string to use in your own config file.

为了使它正常工作，您需要安装一个本地MongoDB数据库，或者您可以快速获取诸如Modulus或Mongolab之类的服务。只需继续在其中一个帐户上创建一个帐户，使用您自己的凭据创建一个数据库，您就可以获取要在自己的配置文件中使用的URL字符串。

Next up, we'll create a quick Mongoose model so that we can define our Nerds in our database.

接下来，我们将创建一个快速的Mongoose模型，以便我们可以在数据库中定义Nerds。

书呆子模型app / models / nerd.js (Nerd Model app/models/nerd.js)

This will be all that is required to create records in our database. Once we define our Mongoose model, it will let us handle creating, reading, updating, and deleting our nerds.

这将是在我们的数据库中创建记录所需的全部。一旦定义了猫鼬模型，它将使我们能够处理创建，读取，更新和删除书呆子的问题。

Let's go into the app/models/nerd.js file and add the following:

让我们进入app/models/nerd.js文件并添加以下内容：

// app/models/nerd.js
// grab the mongoose module
var mongoose = require('mongoose');

// define our nerd model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('Nerd', {
    name : {type : String, default: ''}
});

This is where we will use the Mongoose module and be able to define our Nerd model with a name attribute with data type String. If you want more fields, feel free to add them here. Read up on the Mongoose docs to see all the things you can define.

在这里，我们将使用Mongoose模块，并能够使用数据类型为String的name属性定义我们的Nerd模型。如果您想要更多字段，请随时在此处添加它们。阅读Mongoose文档，了解您可以定义的所有内容。

Let's move onto the routes and use the model we just created.

让我们继续研究路线并使用我们刚刚创建的模型。

节点路由app / routes.js (Node Routes app/routes.js)

In the future, you can use the app folder to add more models, controllers, routes, and anything backend (Node) specific to your app.

将来，您可以使用app文件夹添加更多模型，控制器，路由以及特定于您的应用程序的任何后端（节点）。

Let's get to our routes. When creating a single page application, you will usually want to separate the functions of the backend application and the frontend application as much as possible.

让我们开始吧。创建单页应用程序时，通常将需要尽可能地分离后端应用程序和前端应用程序的功能。

路线分离 (Separation of Routes)

To separate the duties of the separate parts of our application, we will be able to define as many routes as we want for our Node backend. This could include API routes or any other routes of that nature.

为了分离应用程序各个部分的职责，我们将能够为Node后端定义任意数量的路由。这可能包括API路由或任何其他此类路由。

We won't be diving into those since we're not really handling creating an API or doing CRUD in this tutorial, but just know that this is where you'd handle those routes.

我们不会深入探讨这些内容，因为在本教程中我们实际上并没有处理创建API或执行CRUD的问题，但是只知道这是您处理这些路由的地方。

We've commented out the place to put those routes here.

我们已注释掉将这些路线放置在此处的位置。

// app/routes.js

// grab the nerd model we just created
var Nerd = require('./models/nerd');

    module.exports = function(app) {

        // server routes ===========================================================
        // handle things like api calls
        // authentication routes

        // sample api route
        app.get('/api/nerds', function(req, res) {
            // use mongoose to get all nerds in the database
            Nerd.find(function(err, nerds) {

                // if there is an error retrieving, send the error. 
                                // nothing after res.send(err) will execute
                if (err)
                    res.send(err);

                res.json(nerds); // return all nerds in JSON format
            });
        });

        // route to handle creating goes here (app.post)
        // route to handle delete goes here (app.delete)

        // frontend routes =========================================================
        // route to handle all angular requests
        app.get('*', function(req, res) {
            res.sendfile('./public/views/index.html'); // load our public/index.html file
        });

    };

This is where you can handle your API routes. For all other routes (*), we will send the user to our frontend application where Angular can handle routing them from there.

您可以在此处处理API路由。对于所有其他路由（ * ），我们会将用户发送到前端应用程序，Angular可以在该应用程序中处理从那里进行的路由。

后端完成！ (Backend Done!)

Now that we have everything we need for our server to get setup! At this point we can start our server, **send a user the Angular app (index.html), and handle 1 API route to get all the nerds.

现在，我们已经具备了安装服务器所需的一切！此时，我们可以启动服务器 ，**向用户发送Angular应用（ index.html ），并处理1条API路由以获取所有书呆子。

Let's create that index.html file so that we can test out our server.

让我们创建该index.html文件，以便我们可以测试我们的服务器。

创建索引视图文件public / views / index.html (Create an Index View File public/views/index.html)

Let's just open up this file and add some quick text so we can test our server.

让我们打开这个文件并添加一些快速文本，以便我们测试服务器。

<!-- public/views/index.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Starter MEAN Single Page Application</title>

</head>
<body>

    we did it!

</body>
</html>

测试我们的服务器 (Test Our Server)

With all the backend (and a tiny frontend piece) in place, let's start up our server. Go into your console and type:

在所有后端（和一小块前端）就位之后，让我们启动服务器。进入控制台并输入：

$ node server.js

Now in our console we have:

现在在我们的控制台中，我们有：

Now we can go into our browser and see http://localhost:8080 in action.

现在，我们可以进入浏览器，查看运行中的http://localhost:8080 。

So simple, and yet so beautiful. Now let's get to the frontend single page AngularJS stuff.

如此简单，却又如此美丽。现在，让我们进入前端单页AngularJS的内容。

前端AngularJS (The Frontend AngularJS)

With all of our backend work in place, we can focus on the frontend. Our Node backend will send any user that visits our application to our index.html file since we've defined that in our catch-all route (app.get('*')).

在完成所有后端工作之后，我们可以专注于前端。由于我们已经在全部路由 （ app.get('*') ）中定义了访问节点，因此Node后端会将访问我们应用程序的所有用户发送到我们的index.html文件。

The frontend work will require a few things:

前端工作将需要一些注意事项：

Files and libraries brought in by Bower
Bower带来的文件和库
Angular application structure (controllers, services)
角度应用程序结构（控制器，服务）
We will create 3 different pages (Home, Nerds, Geeks)
我们将创建3个不同的页面（主页，书呆子，极客）
Handle Angular routes using ngRoute so there are no page refreshes
使用ngRoute处理角路由，因此不会刷新页面
Make it pretty with Bootstrap
使用Bootstrap使其美观

凉亭和拉入组件 (Bower and Pulling in Components)

We will need certain files for our application like bootstrap and of course angular. We will tell bower to grab those components for us.

对于我们的应用程序，我们将需要某些文件，例如引导程序，当然还有角度文件。我们将告诉Bower为我们获取这些组件。

Bower is a great frontend tool to manager your frontend resources. You just specify the packages you need and it will go grab them for you. Here's an article on getting started with bower.

Bower是管理您的前端资源的出色前端工具。您只需指定所需的软件包，它将立即为您抓取它们。这是有关Bower入门的文章。

First we will need Bower installed on our machine. Just type in npm install -g bower into your console.

首先，我们需要在计算机上安装 Bower。只需在控制台中输入npm install -g bower 。

After you have done that, you will now have access to bower globally on your system. We will need 2 files to get Bower working for us (.bowerrc and bower.json). We'll place both of these in the root of our document.

完成此操作后，您现在可以在系统上全局访问凉亭。我们需要2个文件来使Bower为我们工作（ .bowerrc和bower.json ）。我们将两者都放在文档的根目录中。

.bowerrc will tell Bower where to place our files:

.bowerrc会告诉Bower文件的存放位置：

{
    "directory": "public/libs"
}

bower.json is similar to package.json and will tell Bower which packages are needed.

bower.json与package.json相似，它将告诉Bower需要哪些软件包。

{
    "name": "starter-node-angular",
    "version": "1.0.0",
    "dependencies": {
        "bootstrap": "latest",
        "font-awesome": "latest",
        "animate.css": "latest",
        "angular": "latest",
        "angular-route": "latest"   
    }
}

Let's run it! In your console, in the root of your application, type:

让我们运行它！在控制台的应用程序根目录中，键入：

bower install You can see bower pull in all the files we needed and now we have them in public/libs!

bower install您可以看到bower提取了我们需要的所有文件，现在我们将它们保存在public/libs ！

Now we can get down to business and work on our Angular stuff.

现在，我们可以开始做生意并研究Angular了。

设置我们的Angular应用程序 (Setting Up Our Angular Application)

For our Angular application, we will want:

对于我们的Angular应用程序，我们需要：

2 different pages (Home, Nerds)
2个不同页面（主页，书呆子）
A different Angular controller for each
每个角度控制器都有不同的角度控制器
An Angular service for Nerds
书呆子的角服务
No page refresh when switching pages
切换页面时无页面刷新

Let's create the files needed for our Angular application. This will be done in public/js. Here is the application structure for our frontend:

让我们创建Angular应用程序所需的文件。这将在public/js 。这是我们前端的应用程序结构：

- public 
    ----- js
    ---------- controllers 
    -------------------- MainCtrl.js
    -------------------- NerdCtrl.js
    ---------- services
    -------------------- NerdService.js
    ---------- app.js 
    ---------- appRoutes.js

Once we have created our controllers, services, and routes, we will combine them all and inject these modules into our main app.js file to get everything working together.

一旦创建了controllers ， services和route ，我们将把它们全部结合起来并将这些模块注入到我们的主app.js文件中，以使所有东西一起工作。

角度控制器 (Angular Controllers)

We won't go too far in depth here so let's just show off all three of our controllers and their code.

这里我们不会做得太深，所以让我们仅展示所有三个控制器及其代码。

// public/js/controllers/MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {

    $scope.tagline = 'To the moon and back!';   

});

// public/js/controllers/NerdCtrl.js
angular.module('NerdCtrl', []).controller('NerdController', function($scope) {

    $scope.tagline = 'Nothing beats a pocket protector!';

});

Of course in the future you will be doing a lot more with your controllers, but since this is more about application setup, we'll move onto the services.

当然，将来您将在控制器上做更多的事情，但是由于这更多地与应用程序设置有关，因此我们将继续使用服务。

角服务 (Angular Services)

This is where you would use $http or $resource to do your API calls to the Node backend from your Angular frontend.

在这里，您将使用$http或$resource从Angular前端对Node后端进行API调用。

// public/js/services/NerdService.js
angular.module('NerdService', []).factory('Nerd', ['$http', function($http) {

    return {
        // call to get all nerds
        get : function() {
            return $http.get('/api/nerds');
        },

                // these will work when more API routes are defined on the Node side of things
        // call to POST and create a new nerd
        create : function(nerdData) {
            return $http.post('/api/nerds', nerdData);
        },

        // call to DELETE a nerd
        delete : function(id) {
            return $http.delete('/api/nerds/' + id);
        }
    }       

}]);

That's it for our services. The only function that will work in that NerdService is the get function. The other two are just placeholders and they won't work unless you define those specific routes in your app/routes.js file. For more on building APIs, here's a tutorial for Building a RESTful Node API.

这就是我们的服务。在该NerdService唯一起作用的函数是get函数。另外两个只是占位符，除非您在app/routes.js文件中定义这些特定的路由，否则它们将不起作用。有关构建API的更多信息，这是构建RESTful Node API的教程。

These services will call our Node backend, retrieve data in JSON format, and then we can use it in our Angular controllers.

这些服务将调用我们的Node后端，以JSON格式检索数据，然后可以在Angular控制器中使用它。

角线 (Angular Routes)

Now we will define our Angular routes inside of our public/js/appRoutes.js file.

现在，我们将在public/js/appRoutes.js文件中定义我们的Angular路由。

// public/js/appRoutes.js
    angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider

        // home page
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'MainController'
        })

        // nerds page that will use the NerdController
        .when('/nerds', {
            templateUrl: 'views/nerd.html',
            controller: 'NerdController'
        });

    $locationProvider.html5Mode(true);

}]);

Our Angular frontend will use the template file and inject it into the <div ng-view></div> in our index.html file. It will do this without a page refresh which is exactly what we want for a single page application.

我们的Angular前端将使用模板文件，并将其注入到index.html文件中的<div ng-view></div>中。它将在没有页面刷新的情况下执行此操作，而这正是我们单页面应用程序所需的。

For more information on Angular routing and templating, check out our other tutorial: Single Page Apps with AngularJS.

有关Angular路由和模板的更多信息，请查看我们的其他教程： AngularJS单页应用程序。

更新的查看文件 (Updated View Files)

With all of the Angular routing ready to go, we just need to create the view files and then the smaller template files (home.html, nerd.html, and geek.html) will be injected into our index.html file inside of the <div ng-view></div>.

准备好所有Angular路由后，我们只需创建视图文件，然后将较小的模板文件（ home.html ， nerd.html和geek.html ）注入到我们的index.html文件中， <div ng-view></div> 。

Notice in our index.html file we are calling the resources we pulled in using bower.

注意，在我们的index.html文件中，我们正在调用使用Bower获取的资源。

<!-- public/index.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="/">

    <title>Starter Node and Angular</title>

    <!-- CSS -->
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->

    <!-- JS -->
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/controllers/NerdCtrl.js"></script>
    <script src="js/services/NerdService.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">
<div class="container">

    <!-- HEADER -->
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Stencil: Node and Angular</a>
        </div>

        <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
        <ul class="nav navbar-nav">
            <li><a href="/nerds">Nerds</a></li>
        </ul>
    </nav>

    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>

</div>
</body>
</html>

<!-- public/views/home.html -->

<div class="jumbotron text-center">
    <h1>Home Page 4 Life</h1>

    <p>{{ tagline }}</p>
</div>

<!-- public/views/nerd.html -->

<div class="jumbotron text-center">
    <h1>Nerds and Proud</h1>

    <p>{{ tagline }}</p>
</div>

使它们一起工作 (Making It All Work Together)

We have defined our resources, controllers, services, and routes and included the files in our index.html. Now let's make them all work together.

我们已经定义了资源，控制器，服务和路由，并将文件包含在index.html 。现在，让它们一起工作。

Let's set up our Angular app to use all of our components. We will use dependency injection and set up our Angular application.

让我们设置Angular应用程序以使用我们所有的组件。我们将使用依赖注入并设置Angular应用程序。

// public/js/app.js
angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService']);

结论 (Conclusion)

Now we have an application that has a Node.js backend and an AngularJS frontend. We can use this foundation to build any sort of application moving forward. We can add authentication and CRUD functionality to create a good application.

现在，我们有一个具有Node.js后端和AngularJS前端的应用程序。我们可以利用这个基础来构建任何类型的应用程序。我们可以添加身份验证和CRUD功能来创建一个好的应用程序。

Also, for those looking for this project with the addition of the Jade templating engine, Florian Zemke has created a Jade version at his GitHub repo.

另外，对于那些希望通过Jade模板引擎添加该项目的人， Florian Zemke在他的GitHub存储库中创建了一个Jade版本。

下一步 (Next Steps)

Moving forward, I'd encourage you to take this and see if it fits your needs. The point of this was to have a foundation for starting applications so that we aren't reinventing the wheel every time we start a new project.

继续前进，我鼓励您采取这种做法，看看它是否符合您的需求。这样做的目的是为启动应用程序打下基础，以免我们每次启动新项目时都不会浪费时间。

This is a very barebones example and for something more in depth, I'd encourage people to take a look at mean.io for a more in depth starter application.

这是一个非常准的示例，对于更深入的内容，我鼓励人们看一下mean.io ，以了解更深入的入门应用程序。

Check out the Github repo for this project and take from it what you need. Sound off in the comments if you have any questions about how to expand this into your own applications.

查看此项目的Github存储库，并从中获取您需要的东西。如果您对如何将其扩展到自己的应用程序有任何疑问，请在评论中注明。

入门套件 (Starter Kit)

We've put this tutorial together as a starter kit at the Github repo. We'll keep adding features to it on request and any updates we think will be helpful for applications.

我们已经在Github存储库中将本教程作为入门工具包放在一起。我们会继续根据要求向其添加功能，以及我们认为对应用程序有帮助的任何更新。

Hopefully it will be a good foundation for any sort of Single Page MEAN Stack Application.

希望它将为任何类型的单页MEAN堆栈应用程序奠定良好的基础。

使用入门应用程序 (To Use the Starter App)

Download the code
下载代码
Install the npm modules: npm install
安装npm模块： npm install
Install the bower components: bower install
安装凉亭组件： bower install
Start the server: node server.js
启动服务器： node server.js
Visit the application in your browser at http://localhost:8080
在浏览器中访问该应用程序， http://localhost:8080为http://localhost:8080
Use this starter kit to build any application you need.
使用此入门套件来构建您需要的任何应用程序。

Further Reading: When building MEAN stack apps, the backend Node application will usually be an API that we build. This will allow the Angular frontend to consume our API that we built through Angular services. The next step is to hash out building a Node API. This next tutorial will teach us that and then we can go further in depth of how to build the frontend Angular application to consume our new API.

进一步阅读：构建MEAN堆栈应用程序时，后端Node应用程序通常是我们构建的API。这将允许Angular前端使用我们通过Angular服务构建的API。下一步是哈希构建Node API。下一个教程将告诉我们，然后我们将进一步深入了解如何构建前端Angular应用程序以使用我们的新API。

Build a RESTful API Using Node and Express 4

使用Node和Express 4构建RESTful API

想要更多平均值吗？ (Want More MEAN?)

This article is part of our Getting MEAN series. Here are the other articles.

本文是我们的Getting MEAN系列文章的一部分。这是其他文章。

Setting Up a MEAN Stack Single Page Application
设置MEAN Stack单页应用程序
Build a RESTful API Using Node and Express 4
使用Node和Express 4构建RESTful API
Using GruntJS in a MEAN Stack Application
在MEAN Stack应用程序中使用GruntJS

Edit #1 (7/8/14): Updated article for Express 4 support. Thanks to Caio Mariano for the help. Edit #1 (10/12/14): Updated article to add Nerd model and make everything clearer.

编辑＃1 （7/8/14）：更新了对Express 4支持的文章。感谢Caio Mariano的帮助。 编辑＃1 （14/12/14）：更新了文章以添加Nerd模型并使所有内容更加清晰。

翻译自: https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application

stack程序算法

culiu9261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
stack程序算法_设置MEAN Stack单页应用程序

stack程序算法Beginning an application from scratch can sometimes be the hardest thing to do. Staring at an empty folder and a file with no code in it yet can be a very daunting thing. 从头开始应用程序有时可能是最难的事情...
复制链接

扫一扫