AngularJS + Express JS入門サイト構築

3月から、UI開発に関する新しいタスクを受けました。使用するのはAngularJS、Express JSなどの技術です。そこで週末に新しい技術を学びました。

グループ内の製品UIアーキテクチャは次のとおりです。

そのうちフロントエンドは、主にAngularJSフレームワークを使用し、さらに連携するのはBootstrap提供される多くのコントロールおよびJQueryです。バックエンドは主にExpress JSで構築されたWeb Serverです。Express JSはNginxと組み合わせて使うと非常に便利です。

これにより、プロジェクトが忙しくないときに、AngularJSとExpress JSを学ぶ時間と興味ができました。

同時に、AngularJS + Express JSの最も簡単なWebサイトのサンプルを実装しました。

一. AngularJS

AngularJSは、Googleの従業員によって開発され、その後Googleによって維持されているプロジェクトです。最新版1.4と安定版1.3.15はhttps://angularjs.org/からダウンロードできます。AngularJSを学ぶには、次のサイトを訪れてください。AngularJS チュートリアル。

簡単に言うと、AngularJSはフロントエンドで動作するJavascriptフレームワークです。その2つの大きな特徴は、ディレクティブHtmlを拡張し、さらに式データをHtmlにバインドします。また、コントローラー、Filterフィルター、Factoryなどのサービスを提供します。

AngularJSはフロントエンドで動作するため、あらゆるサーバー技術と組み合わせることができますExpress JSとの組み合わせはとても良いです。

AngularJSは、静的WebページでDOMを操作する際の欠点を解決するために生まれました。動的Webアプリケーションの開発に適しています。

AngularJSの仕組みは下の図で理解できます。

ここでAngularJSのいくつかの重要な概念を紹介します。

1. コントローラー（Controller）

ウェブページ内のデータを動的に操作するには、Htmlページに対してコントローラーを作成できます。コントローラーは本質的にJavascriptメソッドです。例えば、各HTMLページに対して、対応するJavascriptメソッドをコントローラーとして書き、ページ内のデータを制御できます。次のとおりです。

index.html

<!doctype html>
<html ng-app="myApp">
    <head>
        <script src="lib/angular-1.3.15/angular.js.html"></script>
        <script src="lib/angular-1.3.15/angular-route.js.html"></script>
        <script src="js/controller.js.html"></script>
        <script src="js/angularMainApp.js.html"></script>
    </head>
    <body ng-view>
        <div>
            <p>Hello {{name}}</p>
        </div>
    </body>
</html>

これはAngularJSのコントロールで書かれたページで、AngularJSのappをmyAppと指定しています。その中の式、{{name}}に注目してください。nameは動的変数です。ではnameの値はどこから来るのでしょうか？対応するコントローラーでnameに値を代入する必要があります。そうすればユーザーがindex.htmlページにアクセスしたときにnameの実際の値を見ることができます。

controller.js

// Declare angular JS level module wich depends on filters, and services
var myControllers = angular.module('myControllers', []);

// controller
myControllers.controller('indexContrl', ['$scope', function ($scope) {
    $scope.name = "Kevin";
}]);

controller.jsでは、indexContrlというコントローラーを定義し、このコントローラーがindex.html内のnameに値を代入します。もちろん、実際の開発ではコントローラーのコードは多くなるはずなので、indexContrlのような各コントローラーを個別のJSファイルに配置することをお勧めします。これにより規則的で保守しやすくなります。

ここで1つ問題があります。indexContrlはどのようにindex.htmlと関連付けるのでしょうか？AngularJSはindexContrlでindex.htmlを制御したいことをどうやって知るのでしょうか？

ここでは2つの方法があります。1つはindex.htmlで直接指定する方法です。

        <div ng-controller="indexContrl">
            <p>Hello {{name}}</p>
        </div>

しかしこの方法は、大規模なWebサイトには面倒です。別の方法、つまりAngularJSの別のModuleを使用することをお勧めします。ng-routeルーティング制御を行い、異なるパスに対してそれぞれのコントローラーを同じファイル内で定義します。次のとおりです。

myAngularApp.js

// Declare angular JS level module wich depends on filters, and services
var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']);

// route
myApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when(
                '/',
                {
                    templateUrl: 'index.html',
                    controller: 'indexContrl'
                }
        ).
        otherwise( {
            redirectTo: '/404'
        });
    }
]);

注意すべき点は、myAppのmoduleでng-routeを参照し、同時にファイル内でangular-route.jsファイルを参照する必要があることです。そうしないと機能しません。

これで、index.htmlページ内のデータはindexContrl関数によって制御されます。これは単なる簡単なDemoであり、より多くの機能についてはドキュメントを参照してください。

2. Filterフィルター

AngularJSはフィルター機能を提供します。本質的には、ページに出力するデータをフォーマットするための一般的なメソッドを定義します。非常に便利です。

開発時には個別のFilter.jsファイルに配置することをお勧めします。

3. Factoryサービス

これも一般的なメソッドをサービスとして定義させてくれます。ただし、すべてのサービスは遅延インスタンス化され、使用時または依存されたときだけインスタンス化され、すべてシングルトンです。

開発時には個別のFactory.jsファイルに配置することをお勧めします。

二. Express JS

サンプルのフロントエンドでは、AngularJSフレームワークを使用してHtmlページと対応するJSファイルを開発しました。しかし、Webサイトのバックエンドには別の技術が必要です。Node.jsをバックエンドに使うなら、それは簡単で、http.createServerで十分です。しかし実際のWebサイト開発では、Express JSの方が適しています。

Express JSは現在最も人気のあるNode.jsベースのWeb開発フレームワークです、session、cookieなどのさまざまなモジュールを提供し、完全な機能を備えたWebサイトをすばやく構築できます。

本質的に、Express JSはNode.js組み込みのhttpモジュールに基づいています開発されています。

Express JSはNginxリバースプロキシサーバーと組み合わせると非常に便利です。

ここでExpress JSには重要な概念があります。それはミドルウェア（middleware）Express JSや他のモジュールが提供する多くのモジュールをミドルウェアとしてロードして使用できます。その役割はhttpリクエストを処理することであり、1つのミドルウェアが処理し終えたら、次のミドルウェアに渡すことができます。

NPMを使用してExpress JSをダウンロードできます。

npm install express

Express JSを使用してWebサイトのバックエンドをすばやく構築したい場合は、express-generatorというツールをお勧めします。これにより、Express JSプロジェクトをすばやく作成し、必要なファイルを生成できます。

npm install -g express-generator

しかしここで、express generatorではjadeによるビューレンダリングなど、他のモジュールを多く使用していることに気付きました。やや複雑です。やはり参考にして、自分で最も簡単なExpress JSプロジェクトを構築しました。

パスは次のとおりです。

そのうちpublicフォルダーにはUI関連のファイルが配置されています。次のとおりです。

そのうちapp.jsはExpress JSの開始ファイルであり、main関数に相当します。

app.js

var express = require('express');
var http    = require('http');
var path    = require('path');
var routes  = require('./routes/index');

var app = express();

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

app.use('/', routes);

http.createServer(app).listen(3000);

ここでは、Express JSを使用してserverを構築します。8行目のコードの役割はページのフォルダーを指定すること、10行目の役割はパス/に関するルーティング情報をroutesフォルダー内のindexファイルで定義することです。この2つの文の順序は間違えてはいけません。。

routes/index

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

パス/へのアクセスに対して、publicフォルダー内のindex.htmlファイルを探しに行くという意味です。

これで1つのコマンドで、

node app.js

Webサイトを起動することができます。

三. サンプル結果とまとめ

最後にWebサイトにアクセスすると、正しい結果が表示されます。Webサイトは起動され、ページ内の変数はAngularJSコントローラーによって正しいデータに置き換えられています。

ここで小さな点を説明します。最初のテストでは、ページの変数がどうしても置き換わりませんでした。何時間もかけて、AngularJSライブラリを変え、コントローラーの書き方などを変えましたが、効果がありませんでした。最終的に資料とドキュメントを調べて、ページ内に次のものがある場合にのみ機能することがわかりました。ng-view、機能することがわかりました。そういうことだったのか。。。クソだな。。。

この記事では、非常に簡単なAngularJS + Express JSのWebサイト構築サンプルのみを紹介しています。お役に立てば幸いです。

原文：http://www.cnblogs.com/KevinSong/p/4495729.html