Mobil Açısal Kullanıcı Arayüzü - Proje Kurulumu

Bu bölüm proje kurulumu üzerinde çalışacaktır. Bölümlerin geri kalanında örneklerle çalışmak için bu kurulumdan yararlanacağız.

Gerekli paketleri kurmak kolay olduğundan proje kurulumu npm kullanılarak yapılacaktır.

Komut isteminizi açın ve uiformobile / adlı bir dizin oluşturun ve cd komutunu kullanarak dizini girin.

Şimdi aşağıdaki komutu yürütün -

npm init

Npm init komutu, projeyi başlatacaktır -

Aşağıda gösterildiği gibi package.json oluşturacaktır -

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

Şimdi mobil açısal kullanıcı arayüzünü kurmak için aşağıdaki komutu çalıştırın.

npm install --save mobile-angular-ui

Mobile Angular UI ile çalışmak için AngularJS'ye ihtiyacımız var. Bunu aşağıdaki komutu kullanarak kuralım -

npm install --save-dev angular

Yönlendirme ile çalışmak için açısal rotaya da ihtiyacımız var. Yüklemek için komut -

npm install --save-dev angular-route

Uygulamamızı tarayıcıda çalıştıracak bir sunucuya ihtiyacımız olacak. Ekspres kullanacağız.

Ekspres yükleme komutu -

npm install --save-dev express

Kök klasörün içinde bir server.js dosyası oluşturun. Bu dosya, sunucuyu başlatmak için ekspres komuta sahip olacaktır.

İşte server.js'nin ayrıntıları -

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

Sunucuyu başlatmak için aşağıdaki komutu kullanın -

node server.js.

Sunucu 3000 bağlantı noktasında başlayacaktır. http://localhost:3000/ tarayıcınızda kullanıcı arayüzünü görmek için.

Son klasör yapısı aşağıda gösterildiği gibidir -

Node_modules / klasörü mobile_angular_ui, angularjs ve angular-route için kurulmuş tüm paketlere sahiptir.

src/klasörü, kullanıcı arayüzünün geliştirilmesi için gereken HTML ve js dosyalarına sahip olacaktır. İndex.html, tıkladığınızda görülebilecek başlangıç noktasıdırhttp://localhost:3000/.

Şimdi gerekli paketler kuruldu. Şimdi ihtiyacımız olan önemli css ve js dosyalarından bahsedelim. Çerçeve, Mobil Uygulama için tasarlanmış olsa da, masaüstü uygulamaları için de kullanılabilir.

Aşağıda, .html dosyalarınıza eklenmesi zorunlu olan önemli css dosyaları verilmiştir.

Sr.No	Dosya ve Açıklama
1	mobile-angular-ui-base.css Bu css dosyası, mobil cihazlar ve tabletler içindir.
2	mobile-angular-ui-desktop.css Duyarlı css dosyası, masaüstü ve mobil cihazlarda kullanılmak üzere tasarlanmıştır.
3	mobile-angular-ui-hover.css Bunun üzerine gelme için css kuralları vardır.
4	angular.min.js Proje ile başlamamız gereken AngularJS dosyası.
5	mobile-angular-ui.min.js Bu AngularJS modülünde bağımlılık modülünde kullanmamız gereken mobil açısal UI js dosyasıdır. Bu çekirdek modüldür.
6	angular-route.min.js Bu, Yönlendirme için kullanılan bir AngularJS Rota dosyasıdır.

Yukarıdaki dosyaların tümü içinde mevcuttur node_modules/. Proje kurulumunu tamamladık, şimdi ilk uygulamamızı geliştirmek için bir sonraki bölümde bu projeden yararlanacağız.