モバイルAngularUI-プロジェクトのセットアップ

この章では、プロジェクトのセットアップについて説明します。この設定を利用して、残りの章の例を使用します。

必要なパッケージを簡単にインストールできるため、プロジェクトのセットアップはnpmを使用して行われます。

コマンドプロンプトを開き、uiformobile /というディレクトリを作成し、cdコマンドを使用してディレクトリを入力します。

次のコマンドを実行します-

npm init

コマンドnpminitは、プロジェクトを初期化します-

以下に示すようにpackage.jsonを作成します-

{
   "name": "uiformobile",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

次のコマンドを実行して、モバイルAngularUIをインストールします。

npm install --save mobile-angular-ui

Mobile Angular UIを使用するには、AngularJSが必要です。次のコマンドを使用してインストールしましょう-

npm install --save-dev angular

ルーティングを使用するには、angular-routeも必要です。それをインストールするには、コマンドは-です。

npm install --save-dev angular-route

ブラウザでアプリを実行するサーバーが必要になります。エクスプレスを利用します。

Expressをインストールするコマンドは次のとおりです。

npm install --save-dev express

ルートフォルダ内にファイルserver.jsを作成します。このファイルには、サーバーを起動するためのexpressコマンドが含まれています。

server.jsの詳細は次のとおりです-

const express=require('express')
const app=express();
const port=3000;
var path=require("path");
app.use("/node_modules", express.static("D:/uiformobile/node_modules"));
app.use("/src", express.static("D:/uiformobile/src/"));
app.use("/src/js", express.static("D:/uiformobile/src/js"));
app.all("/*", function (req, res, next) {
   res.sendFile("index.html", { root: "D:/uiformobile/" });
});
app.listen(port, () => console.log('Starting your Mobile Angular App on port ${port}!'))

サーバーを起動するには、次のコマンドを使用します-

node server.js.

サーバーはポート3000で起動します。を利用できます http://localhost:3000/ ブラウザでUIを表示します。

最終的なフォルダ構造は次のとおりです-

node_modules /フォルダーには、mobile_angular_ui、angularjs、angular-routeのすべてのパッケージがインストールされています。

ザ・ src/フォルダには、UIの開発に必要なHTMLファイルとjsファイルが含まれます。index.htmlは、ヒットしたときに表示される開始点です。http://localhost:3000/.

これで、必要なパッケージがインストールされました。ここで、必要な重要なcssファイルとjsファイルについて説明します。フレームワークはモバイルアプリケーションを対象としていますが、デスクトップアプリにも使用できます。

以下は、.htmlファイルに含めることが必須の重要なcssファイルです。

シニア番号	ファイル説明
1	mobile-angular-ui-base.css このcssファイルは、モバイルデバイスとタブレットを対象としています。
2	mobile-angular-ui-desktop.css デスクトップおよびモバイルデバイスで使用することを目的としたレスポンシブcssファイル。
3	mobile-angular-ui-hover.css これには、ホバーのcssルールがあります。
4	angular.min.js プロジェクトで開始する必要があるAngularJSファイル。
5	mobile-angular-ui.min.js これは、AngularJSモジュールの依存関係モジュールで使用する必要があるモバイルAngular UIjsファイルです。これがコアモジュールです。
6	angular-route.min.js これは、ルーティングに使用されるAngularJSルートファイルです。

上記のファイルはすべて内部に存在します node_modules/。プロジェクトのセットアップは完了しました。次の章でこのプロジェクトを利用して、最初のアプリを開発します。