AngularJS
欲求不満な仕事

アプリケーションをローカルで実行する

次の例では、 node.jsがインストールされ、 npmが利用可能であることが必要です。
完全な作業コードは、GitHub @ https://github.com/mikkoviitala/angular-grunt-run-localからフォークすることができます。

通常、新しいWebアプリケーションを開発するときに最初に行うことの1つは、ローカルで実行することです。

以下では、 grunt （javascriptタスクランナー）、 npm （ノードパッケージマネージャー）、 bower （さらに別のパッケージマネージャー）を使用して、これを実現する完全な例を紹介します。

実際のアプリケーションファイルの横には、上記のツールを使用してサードパーティの依存関係をいくつかインストールする必要があります。あなたのプロジェクトディレクトリ（ rootが望ましい ）には、3つのファイルが必要です。

• package.json（npmで管理される依存関係）
• bower.json（bowerによって管理される依存関係）
• gruntfile.js（ハッキリしたタスク）

プロジェクトディレクトリは次のようになります：

package.json

私たちはgrunt自身、 matchdepをインストールし、依存関係を名前でフィルタリングできるようにします。grunt -expressは gruntとgrunt-openで高速Webサーバを起動して、gruntタスクからurls /ファイルを開きます。

したがって、これらのパッケージは、すべて「インフラストラクチャ」についてのものであり、我々のアプリケーションを構築するヘルパーです。

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "grunt-express": "~1.0.0-beta2",
    "grunt-open": "~0.2.1"
  },
  "scripts": {
    "postinstall": "bower install"
  }
}

bower.json

Bowerはフロントエンドに関するものです（少なくとも、そうすべきです）。それを使用して角度を設定します。

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {
    "angular": "~1.3.x"
  },
  "devDependencies": {}
}

gruntfile.js

gruntfile.jsの中には、 http：// localhost：9000 /にある新しいブラウザウィンドウでアプリケーションを開く「ローカルで実行中のアプリケーション」という魔法があります。

'use strict';

// see http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/

module.exports = function(grunt) {
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
  grunt.initConfig({
    express: {
      all: {
        options: {
          port: 9000,
          hostname: 'localhost',
          bases: [__dirname]
        }
      }
    },
 
    open: {
      all: {
        path: 'http://localhost:<%= express.all.options.port%>'
      }
    }
  });
 
  grunt.registerTask('app', [
    'express',
    'open',
    'express-keepalive'
  ]);
};

使用法

あなたのアプリケーションを一番上から起動させるには、上のファイルをプロジェクトのルートディレクトリに保存します（空のフォルダでも可能です）。次に、コンソール/コマンドラインを起動し、次のように入力して必要な依存関係をすべてインストールします。

npm install -g grunt-cli bower
npm install

そして、

grunt app

はい、実際のアプリケーションファイルも必要になることに注意してください。
ほぼ最小限の例では、この例の最初で述べたGitHubリポジトリを参照してください。

構造はそれほど違いはありません。 index.htmlテンプレート、 app.js角度コード、 app.jsスタイルはほとんどありapp.css 。他のファイルは、Gitとエディタの設定と一般的なものです。試してみる！