序章

アプリケーションを最初から開始するのが最も難しい場合があります。 空のフォルダとコードがまだ含まれていないファイルを見つめることは、非常に困難なことになる可能性があります。

今日のチュートリアルでは、Node.js、AngularJS、MongoDB、およびExpressアプリケーション(別名MEAN)の起動セットアップについて説明します。 私はそれらを間違った順序で並べました、私は知っています。

これは、MEANスタックアプリケーションを開始する方法を学びたい人にとっての出発点になります。 mean.iomeanjs.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は実際には必要ありません。 必要なすべてのファイル(bootstrapangularangular-route)を取り込むことができますが、bowerはそれらすべてを取得します。 詳細については、バウアーに関するガイドを読んで理解を深めてください。

アプリケーション構造

このチュートリアルの終わりまでに、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.jsapp、および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-parsermethod-overrideは独自のモジュールであるため、ここに含める必要があります。 詳細については、Express4のガイドをご覧ください。

Express は、アプリケーションの作成に役立つNode.jsWebアプリケーションフレームワークです。 Mongoose は、MongoDBデータベースとの通信に役立つMongoDBORMです。

ノードモジュールをインストールする

セットアップした依存関係をインストールするには、コンソールに移動して次のように入力します。

npm installアプリケーションがそれらのモジュールを作成するnode_modulesディレクトリに取り込むように動作しているのがわかります。

これらができたので、server.jsでアプリケーションをセットアップしましょう。

ノードアプリケーションserver.jsのセットアップ

これはシングルページ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;

これで、モジュールをプルし、データベース、一部のエクスプレス設定、ルートなどのアプリケーションを構成して、サーバーを起動しました。 ここでmongooseをプルしなかったことに注意してください。 まだ必要ありません。 間もなく定義するモデルで使用します。

config、クイックmodel、およびroutesはまだ作成されていないので、それらを見てみましょう。 これらは、アプリケーションのバックエンド側が必要とする最後のものになります。

Config config /

ここにdb.js構成ファイルを配置しているだけなので、今はそれほど多くないように思われますが、これはデモンストレーション用でした。 将来的には、構成ファイルをさらに追加してserver.jsで呼び出すことができるので、これを実行します。

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

このファイルが定義され、server.jsvar db = require('./config/db');を使用して呼び出されたので、db.urlを使用してファイル内の任意のアイテムを呼び出すことができます。

これを機能させるには、ローカルのMongoDBデータベースをインストールするか、ModulusMongolabなどの簡単な1回限りのサービスを利用できます。 先に進んで、それらの1つでアカウントを作成し、独自の資格情報を使用してデータベースを作成すると、独自の構成ファイルで使用するURL文字列を取得できるようになります。

次に、データベースでオタクを定義できるように、簡単なマングースモデルを作成します。

オタクモデルapp/models / nerd.js

データベースにレコードを作成するために必要なのはこれだけです。 マングースモデルを定義すると、オタクの作成、読み取り、更新、削除を処理できるようになります。

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モジュールを使用し、データ型Stringのname属性を使用してNerdモデルを定義できます。 さらにフィールドが必要な場合は、ここに自由に追加してください。 Mongoose docs を読んで、定義できるすべてのものを確認してください。

ルートに移動して、作成したモデルを使用してみましょう。

ノードルートapp/routes.js

将来的には、 app フォルダーを使用して、モデル、コントローラー、ルート、およびアプリに固有のバックエンド(ノード)を追加できます。

私たちのルートに行きましょう。 シングルページアプリケーションを作成する場合、通常、バックエンドアプリケーションとフロントエンドアプリケーションの機能を可能な限り分離する必要があります。

ルートの分離

アプリケーションの個別の部分の役割を分離するために、ノードバックエンドに必要な数のルートを定義できます。 これには、APIルートまたはその性質の他のルートが含まれる可能性があります。

このチュートリアルではAPIの作成やCRUDの実行を実際に処理していないため、これらについては詳しく説明しませんが、ここでこれらのルートを処理することを知っておいてください。

これらのルートをここに配置する場所をコメントアウトしました。

app / routers.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
            });

        };

ここで、APIルートを処理できます。 他のすべてのルート(*)の場合、Angularがそこからのルーティングを処理できるフロントエンドアプリケーションにユーザーを送信します。

バックエンドが完了しました!

これで、サーバーをセットアップするために必要なものがすべて揃いました。 この時点で、サーバーを起動し、ユーザーにAngularアプリ(index.html)を送信し、1つのAPIルートを処理してすべてのオタクを取得できます。

サーバーをテストできるように、そのindex.htmlファイルを作成しましょう。

インデックスビューファイルを作成するpublic/views / 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>

サーバーをテストする

すべてのバックエンド(および小さなフロントエンド部分)が配置されたら、サーバーを起動しましょう。 コンソールに移動して、次のように入力します。

  1. node server.js

これで、ブラウザにアクセスして、http://localhost:8080の動作を確認できます。

とてもシンプルでありながらとても美しいです。 それでは、フロントエンドの単一ページのAngularJSのものに取り掛かりましょう。

フロントエンドAngularJS

すべてのバックエンド作業が整ったら、フロントエンドに集中できます。 catch-all route app.get('*'))で定義したため、ノードバックエンドはアプリケーションにアクセスするすべてのユーザーをindex.htmlファイルに送信します。

フロントエンドの作業には、いくつかのことが必要になります。

  • Bowerによって持ち込まれたファイルとライブラリ
  • Angularアプリケーション構造(コントローラー、サービス)
  • 3つの異なるページ(ホーム、オタク、オタク)を作成します
  • ngRoute を使用して角度ルートを処理し、ページが更新されないようにします
  • Bootstrapできれいに

バウアーとコンポーネントの引き込み

アプリケーションには、ブートストラップやもちろん角度などの特定のファイルが必要になります。 これらのコンポーネントを取得するようにbowerに指示します。

Bowerは、フロントエンドリソースを管理するための優れたフロントエンドツールです。 必要なパッケージを指定するだけで、それらを取得できます。 これは、bowerの使用を開始するための記事です。

まず、マシンにBowerをインストールする必要があります。 コンソールにnpm install -g bowerと入力するだけです。

これを実行すると、システム上でグローバルにバウアーにアクセスできるようになります。 Bowerを機能させるには、2つのファイル(.bowerrcbower.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"
        }
    }

実行してみましょう! コンソールで、アプリケーションのルートに次のように入力します。

  1. bower install

Bowerが必要なすべてのファイルをプルしているのがわかります。これで、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つすべてのコントローラーとそのコードを紹介します。

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!';

    });

もちろん、将来的にはコントローラーでさらに多くのことを行うようになりますが、これはアプリケーションのセットアップに関するものなので、サービスに移ります。

Angularサービス

ここで、$httpまたは$resourceを使用して、Angularフロントエンドからノードバックエンドへの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);
            }
        }

    }]);

これで私たちのサービスは終わりです。 そのNerdServiceで機能する唯一の関数は、get関数です。 他の2つは単なるプレースホルダーであり、app/routes.jsファイルでこれらの特定のルートを定義しない限り機能しません。 APIの構築の詳細については、RESTfulノードAPIを構築するためのチュートリアルをご覧ください。

これらのサービスはノードバックエンドを呼び出し、JSON形式でデータを取得してから、Angularコントローラーで使用できます。

角度のあるルート

次に、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);

    }]);

Angularフロントエンドはテンプレートファイルを使用して、index.htmlファイルの<div ng-view></div>に挿入します。 これは、ページを更新せずに実行されます。これは、シングルページアプリケーションにまさに必要なことです。

Angularルーティングとテンプレートの詳細については、他のチュートリアル「AngularJSを使用したシングルページアプリ」をご覧ください。

更新されたビューファイル

すべてのAngularルーティングの準備ができたら、ビューファイルを作成するだけで、小さいテンプレートファイル(home.htmlnerd.html、およびgeek.html)が挿入されます。 <div ng-view></div>内のindex.htmlファイルに。

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>

すべてを連携させる

リソース、コントローラー、サービス、およびルートを定義し、ファイルをindex.htmlに含めました。 それでは、それらすべてを連携させましょう。

すべてのコンポーネントを使用するようにAngularアプリを設定しましょう。 依存性注入を使用して、Angularアプリケーションをセットアップします。

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

結論

これで、Node.jsバックエンドとAngularJSフロントエンドを持つアプリケーションができました。 この基盤を使用して、あらゆる種類のアプリケーションを構築できます。 認証とCRUD機能を追加して、優れたアプリケーションを作成できます。

また、Jadeテンプレートエンジンを追加してこのプロジェクトを探している人のために、 FlorianZemkeは彼のGitHubリポジトリでJadeバージョンを作成しました。

次のステップ

今後は、これを利用して、ニーズに合っているかどうかを確認することをお勧めします。 これのポイントは、新しいプロジェクトを開始するたびに車輪の再発明を行わないように、アプリケーションを開始するための基盤を持つことでした。

これは非常に必要最低限の例であり、より詳細なものについては、mean.ioを参照してより詳細なスターターアプリケーションを入手することをお勧めします。

このプロジェクトのGitHubレポジトリをチェックして、必要なものを取り出してください。 これを独自のアプリケーションに拡張する方法について質問がある場合は、コメントで確認してください。

スターターキット

このチュートリアルは、GitHubレポジトリのスターターキットとしてまとめられています。 リクエストに応じて機能を追加し続け、アプリケーションに役立つと思われる更新を追加します。

うまくいけば、それはあらゆる種類のシングルページMEANスタックアプリケーションの良い基盤になるでしょう。

スターターアプリを使用するには

  1. コードをダウンロード
  2. npmモジュールをインストールします:npm install
  3. バウアーコンポーネントを取り付けます:bower install
  4. サーバーを起動します:node server.js
  5. http://localhost:8080でブラウザのアプリケーションにアクセスします
  6. このスターターキットを使用して、必要なアプリケーションを構築します。

参考資料:MEANスタックアプリを構築する場合、バックエンドノードアプリケーションは通常、構築するAPIになります。 これにより、AngularフロントエンドはAngularサービスを通じて構築したAPIを利用できるようになります。 次のステップは、ノードAPIの構築をハッシュ化することです。 この次のチュートリアルでは、そのことを学び、新しいAPIを使用するためのフロントエンドAngularアプリケーションを構築する方法についてさらに詳しく説明します。

もっと意味が欲しいですか?

この記事は、GettingMEANシリーズの一部です。 こちらが他の記事です。

  • MEANスタックシングルページアプリケーションの設定
  • NodeとExpress4を使用してRESTfulAPIを構築する
  • MEANスタックアプリケーションでのGruntJSの使用