ساخت اولین برنامه در Aurelia.js
دوشنبه 16 مرداد 1396چارچوب Aurelia یک چارچوب جاوااسکریپتی front-end است. این چارچوب بسیار شبیه Angular، Ember و React است. در این مقاله یک آموزش کامل برای شروع به کار با این چارچوب آماده شده است.
در این آموزش ما نحوه نصب و راه اندازی اولین برنامه به کمک Aurelia، را خواهیم آموخت.
نصب
ابتدا اطمینان حاصل کنید که Node و npm روی دستگاه شما نصب باشد، اگر نصب نبودند توصیه می شود که از nvm استفاده کنید و Node و npm را روی دستگاه تان نصب نمایید. در صورت نصب بودن Node و npm به نصب فایل های Aurelia بپردازید.
همچنین ما به ابزار jspm نیاز داریم. این ابزار در واقع یک سیستم مدیریت پکیج هست.
خب ابتدا با ساخت فولدرها شروع می کنیم و سپس این ابزار را نصب می نماییم.
$ mkdir HelloWorld $ cd HelloWorld $ npm install jspm -g $ npm install http-server -g
دستور npm install jspm -g منجر به نصب jspm در کامپیوتر تان می شود. ما در آخر از http-server برای تست برنامه مان استفاده خواهیم کرد. حالا وقت ساخت برنامه مان است.
ساخت اولین برنامه با Aurelia
در این مرحله ما می توانیم از فایل های آماده (Aurelia starter files) استفاده کنیم ولی در این مثال، سعی می شود که تمامی فایل ها را خودمان بسازیم.
با اجرای دستور jspm init، کار را شروع می کنیم.
$ jspm init
در این مرحله از شما پرسیده می شود که آیا می خواهید فایل های config ساخته شود یا خیر، شما کافی است برای همه سوال ها فقط دکمه Enter را بفشارید.
دستور بعدی باعث می شود که jspm به صورت محلی(locally) نصب شود.
$ npm install jspm --save-dev
حالا ما می توانیم دو چارچوب مهم برای Aurelia را نصب نماییم. چارچوب اول aurelia framework و چارچوب دوم aurelia bootstrapper است.
$ jspm install aurelia-framework $ jspm install aurelia-bootstrapper
این قطعه کد باعث نصب تمامی وابستگی های Aurelia که در این مثال مورد نیاز هستند، می شود.
در مرحله بعدی یک فایل با نام index.html می سازیم. این فایل از SystemJS استفاده می کند تا app ما را بارگزاری کند.
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
مدنظر داشته باشید که در عنصر Body، از برچسب aurelia-app استفاده شده است. این برچسب به aurelia اعلام می کند که view-model و view برنامه ما را در این عنصر بارگزاری کند.
در مرحله بعدی، یک فولدر با نام src می سازیم.
$ mkdir src
حالا ما می توانیم view-model برنامه مان را بسازیم.
یک فایل با نام app.js در داخل فولدر src می سازیم.
// src/app.js
export class App{
message = 'Hello World Aurelia';
}
این فایل شامل پیامی است که قصد داریم در صفحه اصلی برنامه نمایش دهیم.
حالا باید یک فایل Html هم بسازیم.
// src/app.html
<template>
<h1>${message}</h1>
</template>
فایل Html ما باید داخل عنصر های <template> باشد. در واقع از استانداردی استفاده کرده ایم که بسیار شبیه استانداردی است که w3c برای وب کامپوننت ها استفاده می کند.
حالا که فایل های داخل src کامل شده اند، به فولدر اصلی برنامه برمی گردیم و فایل config.js را ویرایش می کنیم. ما باید مسیر فولدر src را در بخش path اضافه کنیم همچنین باید چند babelOptions به برنامه اضافه شود. در انتها فایل config.js شما شبیه قطعه کد زیر خواهد بود.
// config.js
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system",
"es7.decorators",
"es7.classProperties"
]
},
paths: {
"*": "src/*",
...
در واقع ما es7 decorators و class properties را به برنامه اضافه کرده ایم. همچنین مسیر فولدر src را به برنامه اضافه کرده ایم تا فایل های برنامه ما که در این فولدر قرار دارند، قابل دسترسی باشند.
حالا وقت اجرای برنامه و مشاهده نتیجه کار است.
$ http-server -o -c-1 -p 4200
با دستور بالا، یک وب سرور روی پورت 4200 اجرا می شود. حالا می توانیم مرورگر را باز کرده و نتیجه برنامه را مشاهده نماییم.
- Java Script
- 2k بازدید
- 2 تشکر