MEANスタックシングルページアプリケーションの設定
序章
アプリケーションを最初から開始するのが最も難しい場合があります。 空のフォルダとコードがまだ含まれていないファイルを見つめることは、非常に困難なことになる可能性があります。
今日のチュートリアルでは、Node.js、AngularJS、MongoDB、およびExpressアプリケーション(別名MEAN)の起動セットアップについて説明します。 私はそれらを間違った順序で並べました、私は知っています。
これは、MEANスタックアプリケーションを開始する方法を学びたい人にとっての出発点になります。 mean.ioやmeanjs.orgのようなプロジェクトは、本番プロジェクトに必要な多くの優れた機能を備えた、より本格的なMEANアプリケーションです。
完全なゼロから始めて、必要な種類のアプリケーションを構築できる基本的なアプリケーション構造を作成することができます。
注:(7/8/14):Express4サポートの記事を更新しました。 助けてくれたCaioMarianoに感謝します。
注(10/12/14):オタクモデルを追加し、すべてをより明確にするために記事を更新しました。
この記事は、Express4.0で動作するように更新されました
私たちが構築するもの
これまで扱ってきたアプリケーションの多くは、NodeやAngular To-Doシングルページアプリケーションなど、特定の機能を備えていました。 私たちはそれから離れて、古き良き入門アプリケーションになります。
これは非常に必要最低限のことですが、うまくいけば、アプリケーションのセットアップに役立ちます。 それをスターターキットと呼びましょう。
アプリケーション要件
- シングルページアプリケーション
- ExpressとMongoDBを使用したNode.jsバックエンド
- AngularJSフロントエンド
- モジュラーAngularコンポーネント(コントローラー、サービス)
- 私たちのアプリが成長できるように優れたアプリケーション構造
このチュートリアルは、アプリケーション構造に基づいており、シングルページMEANスタックアプリケーションの強固な基盤を構築します。 CRUD、認証、またはMEANアプリの他のトピックの詳細については、これらのギャップを埋めるために他のチュートリアルを作成するようにしてください。
バックエンドノード、MongoDB、Express
MEANスタックからの3文字は、バックエンドであるサーバーで処理されます。 サーバーの作成、アプリケーションの構成、アプリケーションルーティングの処理を行います。
必要な工具
Node が必要になります。生活を楽にするために、bowerを使用してすべての依存関係を取得します。
Bowerは実際には必要ありません。 必要なすべてのファイルを自分で取り込むことができます(bootstrap
, angular
, angular-route
)、しかしバウアーはあなたのためにそれらすべてを手に入れます! 詳細については、バウアーに関するガイドを読んで理解を深めてください。
アプリケーション構造
このチュートリアルの終わりまでに、AngularフロントエンドとともにNodeバックエンドを開発するのに役立つ基本的なアプリケーション構造ができあがります。 これがどのように見えるかです。
- 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 -->
ファイルをフォルダ構造に入力します。 すべてのバックエンド作業はで行われます server.js
, app
、 と config
すべてのフロントエンドはで処理されますが public
フォルダ。
ノードアプリケーションpackage.jsonを開始します
すべてのノードアプリケーションは、 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"
}
}
それでおしまい! これで、アプリケーションはExpressとMongooseを使用することを認識します。
注: Express 4.0以降、 body-parser
と method-override
は独自のモジュールであるため、ここに含める必要があります。 詳細については、Express4のガイドをご覧ください。
Express は、アプリケーションの作成に役立つNode.jsWebアプリケーションフレームワークです。 Mongoose は、MongoDBデータベースとの通信に役立つMongoDBORMです。
ノードモジュールをインストールする
セットアップした依存関係をインストールするには、コンソールに移動して次のように入力します。
npm install
これらのモジュールをに取り込むためにアプリケーションが機能していることがわかります。 node_modules
作成するディレクトリ。
これらができたので、でアプリケーションを設定しましょう。 server.js
.
ノードアプリケーションserver.jsのセットアップ
これは単一ページのMEANアプリケーション用のスターターキットであるため、これを単純に保ちます。 ファイルのコード全体がここにあり、理解を助けるためにコメントが付けられています。
// 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;
これで、モジュールをプルし、データベース、一部のエクスプレス設定、ルートなどのアプリケーションを構成して、サーバーを起動しました。 引き込まなかったことに注意してください mongoose
ここ。 まだ必要ありません。 間もなく定義するモデルで使用します。
を見ようよ config
、 クイック model
、 と routes
まだ作成していないので。 これらは、アプリケーションのバックエンド側が必要とする最後のものになります。
Config config /
私たちはただ入れているだけなので、今はそれほど多くないように見えることを知っています db.js
ここに設定ファイルがありますが、これはデモンストレーション用でした。 将来的には、構成ファイルをさらに追加して、それらを呼び出すことができます。 server.js
これが私たちのやり方です。
module.exports = {
url : 'mongodb://localhost/stencil-dev'
}
これでこのファイルが定義され、 server.js
を使用して var db = require('./config/db');
、を使用してその中の任意のアイテムを呼び出すことができます db.url
.
これを機能させるには、ローカルのMongoDBデータベースをインストールするか、ModulusやMongolabなどの簡単な1回限りのサービスを利用できます。 先に進んで、それらの1つでアカウントを作成し、独自の資格情報を使用してデータベースを作成すると、独自の構成ファイルで使用するURL文字列を取得できるようになります。
次に、データベースでオタクを定義できるように、簡単なマングースモデルを作成します。
オタクモデル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: ''}
});
ここで、Mongooseモジュールを使用し、データ型のname属性を使用してNerdモデルを定義できます。 String
. さらにフィールドが必要な場合は、ここに自由に追加してください。 Mongoose docs を読んで、定義できるすべてのものを確認してください。
ルートに移動して、作成したモデルを使用してみましょう。
ノードルートapp/routers.js
将来的には、 app フォルダーを使用して、モデル、コントローラー、ルート、およびアプリに固有のバックエンド(ノード)を追加できます。
私たちのルートに行きましょう。 シングルページアプリケーションを作成する場合、通常、バックエンドアプリケーションとフロントエンドアプリケーションの機能を可能な限り分離する必要があります。
ルートの分離
アプリケーションの個別の部分の役割を分離するために、ノードバックエンドに必要な数のルートを定義できます。 これには、APIルートまたはその性質の他のルートが含まれる可能性があります。
このチュートリアルではAPIの作成やCRUDの実行を実際に処理していないため、これらについては詳しく説明しませんが、ここでこれらのルートを処理することを知っておいてください。
これらのルートをここに配置する場所をコメントアウトしました。
// 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
});
};
ここで、APIルートを処理できます。 他のすべてのルートの場合(*
)、Angularがそこからのルーティングを処理できるフロントエンドアプリケーションにユーザーを送信します。
バックエンドが完了しました!
これで、サーバーをセットアップするために必要なものがすべて揃いました。 この時点で、サーバーを起動し、ユーザーにAngularアプリを送信できます(index.html
)、すべてのオタクを取得するために1つのAPIルートを処理します。
それを作成しましょう index.html
サーバーをテストできるようにファイルします。
インデックスビューファイルを作成する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>
サーバーをテストする
すべてのバックエンド(および小さなフロントエンド部分)が配置されたら、サーバーを起動しましょう。 コンソールに移動して、次のように入力します。
- node server.js
これで、ブラウザにアクセスして表示できます http://localhost:8080
アクションで。
とてもシンプルでありながらとても美しいです。 それでは、フロントエンドの単一ページのAngularJSのものに取り掛かりましょう。
フロントエンドAngularJS
すべてのバックエンド作業が整ったら、フロントエンドに集中できます。 ノードバックエンドは、アプリケーションにアクセスするすべてのユーザーを index.html
catch-all route (app.get('*')
).
フロントエンドの作業には、いくつかのことが必要になります。
- Bowerによって持ち込まれたファイルとライブラリ
- Angularアプリケーション構造(コントローラー、サービス)
- 3つの異なるページ(ホーム、オタク、オタク)を作成します
- ngRoute を使用して角度ルートを処理し、ページが更新されないようにします
- Bootstrapできれいに
バウアーとコンポーネントの引き込み
アプリケーションには、ブートストラップやもちろん角度などの特定のファイルが必要になります。 これらのコンポーネントを取得するようにbowerに指示します。
Bowerは、フロントエンドリソースを管理するための優れたフロントエンドツールです。 必要なパッケージを指定するだけで、それらを取得できます。 これは、bowerの使用を開始するための記事です。
まず、マシンにBowerをインストールする必要があります。 入力するだけです npm install -g bower
コンソールに。
これを実行すると、システム上でグローバルにバウアーにアクセスできるようになります。 Bowerを機能させるには、2つのファイルが必要です(.bowerrc
と bower.json
). これらの両方をドキュメントのルートに配置します。
.bowerrc は、ファイルを配置する場所をBowerに通知します。
{
"directory": "public/libs"
}
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"
}
}
実行してみましょう! コンソールで、アプリケーションのルートに次のように入力します。
- bower install
バウアーが必要なすべてのファイルをプルしているのを見ることができます。 public/libs
!
これで、ビジネスに取り掛かり、Angularに取り組むことができます。
Angularアプリケーションのセットアップ
Angularアプリケーションの場合、次のものが必要になります。
- 2つの異なるページ(ホーム、オタク)
- それぞれに異なるAngularコントローラー
- オタク向けのAngularサービス
- ページを切り替えるときにページが更新されない
Angularアプリケーションに必要なファイルを作成しましょう。 これはで行われます public/js
. フロントエンドのアプリケーション構造は次のとおりです。
- public
----- js
---------- controllers
-------------------- MainCtrl.js
-------------------- NerdCtrl.js
---------- services
-------------------- NerdService.js
---------- app.js
---------- appRoutes.js
コントローラー、サービス、およびルートを作成したら、それらをすべて組み合わせて、これらのモジュールをメインに挿入します。 app.js
すべてを一緒に機能させるためのファイル。
Angularコントローラー
ここではあまり詳しく説明しませんので、3つすべてのコントローラーとそのコードを紹介します。
angular.module('MainCtrl', []).controller('MainController', function($scope) {
$scope.tagline = 'To the moon and back!';
});
angular.module('NerdCtrl', []).controller('NerdController', function($scope) {
$scope.tagline = 'Nothing beats a pocket protector!';
});
もちろん、将来的には、コントローラーでさらに多くのことを行うようになりますが、これはアプリケーションのセットアップに関するものなので、サービスに移ります。
Angularサービス
これはあなたが使用する場所です $http
また $resource
AngularフロントエンドからノードバックエンドへのAPI呼び出しを実行します。
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);
}
}
}]);
これで私たちのサービスは終わりです。 その中で動作する唯一の関数 NerdService
それは get
関数。 他の2つは単なるプレースホルダーであり、これらの特定のルートを定義しない限り機能しません。 app/routes.js
ファイル。 APIの構築の詳細については、RESTfulノードAPIを構築するためのチュートリアルをご覧ください。
これらのサービスはノードバックエンドを呼び出し、JSON形式でデータを取得してから、Angularコントローラーで使用できます。
角度のあるルート
次に、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);
}]);
Angularフロントエンドはテンプレートファイルを使用して、それをに挿入します <div ng-view></div>
私たちの中で index.html
ファイル。 これは、ページを更新せずに実行されます。これは、シングルページアプリケーションにまさに必要なことです。
Angularルーティングとテンプレートの詳細については、他のチュートリアル「AngularJSを使用したシングルページアプリ」をご覧ください。
更新されたビューファイル
すべてのAngularルーティングの準備ができたら、ビューファイルを作成してから、小さいテンプレートファイルを作成するだけです(home.html
, nerd.html
、 と geek.html
)私たちに注入されます index.html
内部のファイル <div ng-view></div>
.
私たちの注意 index.html
bowerを使用して取得したリソースを呼び出しているファイル。
<!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>
すべてを連携させる
リソース、コントローラー、サービス、ルートを定義し、ファイルを index.html
. それでは、それらすべてを連携させましょう。
すべてのコンポーネントを使用するようにAngularアプリを設定しましょう。 依存性注入を使用して、Angularアプリケーションをセットアップします。
angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService']);
結論
これで、Node.jsバックエンドとAngularJSフロントエンドを持つアプリケーションができました。 この基盤を使用して、あらゆる種類のアプリケーションを構築できます。 認証とCRUD機能を追加して、優れたアプリケーションを作成できます。
また、Jadeテンプレートエンジンを追加してこのプロジェクトを探している人のために、 FlorianZemkeは彼のGitHubリポジトリでJadeバージョンを作成しました。
次のステップ
今後は、これを利用して、ニーズに合っているかどうかを確認することをお勧めします。 これのポイントは、新しいプロジェクトを開始するたびに車輪を再発明しないように、アプリケーションを開始するための基盤を持つことでした。
これは非常に必要最低限の例であり、より詳細なものについては、mean.ioを参照してより詳細なスターターアプリケーションを入手することをお勧めします。
このプロジェクトのGitHubレポジトリをチェックして、必要なものを取り出してください。 これを独自のアプリケーションに拡張する方法について質問がある場合は、コメントで確認してください。
スターターキット
このチュートリアルは、GitHubレポジトリのスターターキットとしてまとめられています。 リクエストに応じて機能を追加し続け、アプリケーションに役立つと思われる更新を追加します。
うまくいけば、それはあらゆる種類のシングルページMEANスタックアプリケーションの良い基盤になるでしょう。
スターターアプリを使用するには
- コードをダウンロード
- npmモジュールをインストールします。
npm install
- バウアーコンポーネントを取り付けます。
bower install
- サーバーを起動します。
node server.js
- ブラウザでアプリケーションにアクセスします。
http://localhost:8080
- このスターターキットを使用して、必要なアプリケーションを構築します。
参考資料:MEANスタックアプリを構築する場合、バックエンドノードアプリケーションは通常、構築するAPIになります。 これにより、AngularフロントエンドはAngularサービスを通じて構築したAPIを利用できるようになります。 次のステップは、ノードAPIの構築をハッシュ化することです。 この次のチュートリアルでは、そのことを学び、新しいAPIを使用するためのフロントエンドAngularアプリケーションを構築する方法についてさらに詳しく説明します。
もっと意味が欲しいですか?
この記事は、GettingMEANシリーズの一部です。 こちらが他の記事です。
- MEANスタックシングルページアプリケーションの設定
- NodeとExpress4を使用してRESTfulAPIを構築する
- MEANスタックアプリケーションでのGruntJSの使用