Mobile Angular UI - Penyiapan Proyek

Bab ini akan mengerjakan pengaturan proyek. Kami akan menggunakan pengaturan ini untuk bekerja dengan contoh-contoh di bab-bab selanjutnya.

Pengaturan proyek akan dilakukan menggunakan npm, karena mudah untuk menginstal paket apa pun yang diperlukan.

Buka command prompt Anda dan buat direktori bernama uiformobile / dan masuk ke direktori menggunakan perintah cd.

Sekarang jalankan perintah berikut -

npm init

Perintah npm init akan menginisialisasi proect -

Ini akan membuat package.json seperti yang ditunjukkan di bawah ini -

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

Sekarang jalankan perintah berikut untuk menginstal ui sudut seluler.

npm install --save mobile-angular-ui

Untuk bekerja dengan Mobile Angular UI, kita membutuhkan AngularJS. Mari kita instal itu menggunakan perintah berikut -

npm install --save-dev angular

Kami juga membutuhkan rute-sudut untuk bekerja dengan perutean. Untuk menginstalnya, perintahnya adalah -

npm install --save-dev angular-route

Kami membutuhkan server yang akan menjalankan aplikasi kami di browser. Kami akan menggunakan express.

Perintah untuk menginstal express adalah -

npm install --save-dev express

Buat file server.js di dalam folder root. File ini akan memiliki perintah ekspres untuk memulai server.

Berikut detail 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}!'))

Untuk memulai server, gunakan perintah berikut -

node server.js.

Server akan mulai pada port 3000. Anda dapat memanfaatkan http://localhost:3000/ untuk melihat UI di browser Anda.

Struktur folder terakhir seperti yang ditunjukkan di bawah ini -

Folder node_modules / memiliki semua paket yang diinstal untuk mobile_angular_ui, angularjs, dan angular-route.

Itu src/folder akan memiliki file HTML dan js yang diperlukan untuk pengembangan UI. Index.html adalah titik awal yang akan terlihat saat Anda menekanhttp://localhost:3000/.

Sekarang paket yang diperlukan telah diinstal. Sekarang mari kita bicara tentang file css dan js penting yang kita butuhkan. Meskipun kerangka kerja ini dimaksudkan untuk Aplikasi Seluler, kerangka itu juga dapat digunakan untuk aplikasi desktop.

Berikut ini adalah file css penting yang wajib disertakan dalam file .html Anda.

Sr Tidak	Deskripsi berkas
1	mobile-angular-ui-base.css File css ini ditujukan untuk perangkat seluler dan tablet.
2	mobile-angular-ui-desktop.css File css responsif dimaksudkan untuk digunakan di desktop dan perangkat seluler.
3	mobile-angular-ui-hover.css Ini memiliki aturan css untuk hover.
4	angular.min.js File AngularJS yang kita perlukan untuk memulai proyek.
5	mobile-angular-ui.min.js Ini adalah file js UI sudut seluler yang perlu kita gunakan dalam modul dependensi di modul AngularJS. Ini adalah modul inti.
6	angular-route.min.js Ini adalah file Rute AngularJS yang digunakan untuk Perutean.

Semua file di atas ada di dalam node_modules/. Kita sudah selesai dengan pengaturan proyek, sekarang kita akan menggunakan proyek ini di bab selanjutnya untuk mengembangkan aplikasi pertama kita.