Giao diện người dùng Mobile Angular - Thiết lập dự án

Chương này sẽ làm việc về thiết lập dự án. Chúng tôi sẽ sử dụng thiết lập này để làm việc với các ví dụ trong phần còn lại của các chương.

Quá trình thiết lập dự án sẽ được thực hiện bằng npm, vì có thể dễ dàng cài đặt bất kỳ gói nào được yêu cầu.

Mở dấu nhắc lệnh của bạn và tạo một thư mục có tên uiformobile / và nhập thư mục bằng lệnh cd.

Bây giờ hãy thực hiện lệnh sau:

npm init

Lệnh npm init sẽ khởi tạo proect -

Nó sẽ tạo package.json như hình dưới đây:

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

Bây giờ chạy lệnh sau để cài đặt ui góc di động.

npm install --save mobile-angular-ui

Để làm việc với Mobile Angular UI, chúng ta cần AngularJS. Hãy để chúng tôi cài đặt điều đó bằng lệnh sau:

npm install --save-dev angular

Chúng tôi cũng cần đường góc để làm việc với định tuyến. Để cài đặt nó, lệnh là -

npm install --save-dev angular-route

Chúng tôi sẽ cần một máy chủ chạy ứng dụng của chúng tôi trong trình duyệt. Chúng tôi sẽ sử dụng nhanh.

Lệnh để cài đặt express là -

npm install --save-dev express

Tạo một tệp server.js bên trong thư mục gốc. Tệp này sẽ có lệnh express để khởi động máy chủ.

Đây là chi tiết của 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}!'))

Để khởi động máy chủ, hãy sử dụng lệnh sau:

node server.js.

Máy chủ sẽ bắt đầu ở cổng 3000. Bạn có thể sử dụng http://localhost:3000/ để xem giao diện người dùng trong trình duyệt của bạn.

Cấu trúc thư mục cuối cùng như hình dưới đây:

Thư mục node_modules / có tất cả các gói được cài đặt cho mobile_angular_ui, anglejs và angle-route.

Các src/thư mục sẽ có các tệp HTML và js cần thiết để phát triển giao diện người dùng. Index.html là điểm bắt đầu sẽ được nhìn thấy khi bạn nhấnhttp://localhost:3000/.

Bây giờ các gói yêu cầu đã được cài đặt. Bây giờ chúng ta hãy nói về các tệp css và js quan trọng mà chúng ta cần. Mặc dù khuôn khổ dành cho Ứng dụng di động, nó cũng có thể được sử dụng cho các ứng dụng dành cho máy tính để bàn.

Sau đây là các tệp css quan trọng bắt buộc phải có trong tệp .html của bạn.

Sr.No	Mô tả tập tin
1	mobile-angular-ui-base.css Tệp css này dành cho thiết bị di động và máy tính bảng.
2	mobile-angular-ui-desktop.css Tệp css đáp ứng có nghĩa là được sử dụng trên máy tính để bàn và thiết bị di động.
3	mobile-angular-ui-hover.css Điều này có quy tắc css cho di chuột.
4	angular.min.js Tập tin AngularJS mà chúng ta cần để bắt đầu với dự án.
5	mobile-angular-ui.min.js Đây là tệp js UI góc cạnh di động mà chúng ta cần sử dụng trong mô-đun phụ thuộc trong mô-đun AngularJS. Đây là mô-đun cốt lõi.
6	angular-route.min.js Đây là tệp AngularJS Route được sử dụng để Định tuyến.

Tất cả các tệp trên đều có bên trong node_modules/. Chúng tôi đã hoàn tất việc thiết lập dự án, bây giờ chúng tôi sẽ sử dụng dự án này trong chương tiếp theo để phát triển ứng dụng đầu tiên của chúng tôi.