Node.js
angular.jsを含むNode.js（express.js）サンプルコード

前書き

私たちのプロジェクトを作成する。

私たちは行くことができて、コンソールからもう一度実行します。

mkdir our_project
cd our_project

今私たちはコードが生きる場所にいます。プロジェクトのメインアーカイブを作成するには、以下を実行します。

わかりましたが、私たちはどのように急行スケルトンプロジェクトを作成しましたか？

それは簡単です：

npm install -g express express-generator

LinuxディストリビューションとMacは、 rootユーザーだけがアクセス可能なnodejsディレクトリにインストールされているため、 sudoを使用してインストールする必要があります。すべてがうまくいけば、最終的にエクスプレスアプリスケルトンを作成し、

express

このコマンドは、エクスプローラーのサンプルアプリケーションをフォルダー内に作成します。構造は以下の通りです：

bin/
public/
routes/
views/
app.js
package.json

今すぐnpmを起動すると、 http：// localhost：3000に行きます.Expressアプリが起動していることがわかります.ExpressのアプリはAngularJSとどのように混在させることができますか？ 。

簡単に表現する方法は？

ExpressはNodejの上に構築されたフレームワークで、 Expressサイトで公式ドキュメントを見ることができます。しかし、私たちの目的のためには、アプリケーションのホームページをレンダリングするために、 http：// localhost：3000 / homeなど、入力するときにExpressが責任を負うことを知る必要があります。作成された最近作成されたアプリから、以下を確認できます：

FILE: routes/index.js
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;

このコードが語っていることは、ユーザーがhttp：// localhost：3000に行くとき、 インデックスビューをレンダリングし、タイトルプロパティと値Expressを持つJSONを渡す必要があるということです。しかし、viewsディレクトリを確認してindex.jadeを開くと、次のように表示されます。

extends layout
block content
    h1= title
    p Welcome to #{title}

これは、 テンプレートエンジンである強力なもう1つの強力な機能で、変数を渡したり別のテンプレートを継承したりしてページ内のコンテンツをレンダリングすることができるため、他の人がページをよりコンパクトに理解できるようになります。ファイルの拡張子は、基本的に同じテンプレートエンジンが、いくつかの更新とコアの変更ではある、私の知る限りジェイドは パグの名前を変更知っているよう.jadeされます。

PugのインストールとExpressテンプレートエンジンの更新

さて、Pugをプロジェクトのテンプレートエンジンとして使用するには、以下を実行する必要があります：

npm install --save pug

これにより、Pugがプロジェクトの依存としてインストールされ、 package.jsonに保存されます。それを使用するには、 app.jsファイルを変更する必要があります：

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

そして、ビューエンジンのエンジンをpugに置き換えてください。私たちはnpm startでプロジェクトをやり直すことができ、すべてが正常に動作していることがわかります。

AngularJSはこれにどのように適合していますか？

AngularJSは、主にSPA （Simple Page Application）のインストールを簡単に作成するために使用されるJavascript MVW （Model-View-Whatever）フレームワークで、 AngularJSのWebサイトにアクセスしてv1.6.4の最新バージョンをダウンロードできます。

AngularJSをダウンロードした後、プロジェクト内のpublic / javascriptsフォルダにファイルをコピーする必要があります。少し説明があります。これは、サイト、画像、CSS、javacriptファイルなどの静的資産を処理するフォルダです。もちろん、これはapp.jsファイルで設定できますが、単純にしておきます。ここで、AngularJSが存在するjavascriptのパブリックフォルダ内に、アプリケーションが生きるng-app.jsという名前のファイルを作成します。 AngularJSを起動するには、 view / layout.pugの内容を次のように変更する必要があります。

doctype html
html(ng-app='first-app')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-controller='indexController')
    block content

  script(type='text-javascript', src='javascripts/angular.min.js')
  script(type='text-javascript', src='javascripts/ng-app.js')

ここでは何をしていますか？まあ、AngularJSコアと最近作成されたファイルng-app.jsを含んでいるので、テンプレートがレンダリングされるとAngularJSがアップされ、 ng-appディレクティブが使用されます。 AngularJSこれはアプリケーション名であり、それに固執する必要があります。
ですから、 ng-app.jsの内容は次のようになります：

angular.module('first-app', [])
       .controller('indexController', ['$scope', indexController]);

function indexController($scope) {
    $scope.name = 'sigfried';
}

ここで最も基本的なAngularJSの機能、 双方向のデータバインディングを使用しています。これにより、ビューとコントローラの内容を即座に更新することができます。これは非常に簡単な説明ですが、GoogleやStackOverflowで調査してどのように実際に動作します。

ですから、AngularJSアプリケーションの基本ブロックを持っていますが、ここで行うべきことがあります。角度アプリの変更を確認するためにindex.pugページを更新する必要があります。

extends layout
block content
  div(ng-controller='indexController')
    h1= title
    p Welcome {{name}}
    input(type='text' ng-model='name')

ここでは、コントローラ内のAngularJSスコープの定義済みのプロパティ名に入力をバインドするだけです。

$scope.name = 'sigfried';

これは、入力のテキストを変更すると、上記の段落は{{name}}の内容を更新します。これは補間とも呼ばれ、テンプレートにコンテンツをレンダリングするもう1つのAngularJS機能です。

したがって、すべてがセットアップされているので、 npm startを実行することができます。http：// localhost：3000に行き、エクスプレスアプリケーションを表示し、アプリケーションフロントエンドを管理するAngularJSを参照してください。