آموزش Angular 2

آموزش Angular 2 – محیط

در این فصل راجع به محیط طراحیِ Angular 2  صحبت خواهیم کرد.

  •  Angular از TypeScript استفاده می کنه. TypeScript، زبان اصلیِ طراحی نرم افزارهای Angular است.
  • TypeScript مجموعه ی بزرگی از کدهای جاوا اسکریپته که به TypeScript انتقال داده شدن. کدهای نوشته شده با TypeScript، خطای زمان اجرای کمتری دارن.

برای تنظیم و راه اندازی محیط برنامه نویسی، مراحل زیر را انجام بدین:

مرحله ی (1): با نوشتن دستورات زیر در خط فرمان (command prompt)، یک فولدرِ پروژه در درایو محلی تان ایجاد کنین.

mkdir angular2-demo
cd angular2-demo

ایجاد فایل های پیکربندی

مرحله ی (2): باید فایل tsconfig.json را ایجاد کنین. این فایل یک فایل پیکربندیِ کامپایلرِ TypeScript است و کامپایلر را راهنمایی می کنه تا فایل های جاوا اسکرپت ایجاد کنه.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

مرحله (3): بصورت زیر یک فایل به نام typings.json در پوشه ی پروژه تان به نام angular2-demo ایجاد کنین.

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

تعداد زیادی کتاب خانه ی حاویِ ویژگی ها و دستورالعمل ها هستن که برای توسعه ی محیط جاوا اسکریپت به کار می رن  و کامپایلرِ TypeScript بصورت محلی، آن ها را تشخیص نمیده. در برنامه ی Angular، فایلِ typings.json برای شناسایی فایل های تعریف شده در TypeScript استفاده میشه.

در کد بالا، سه فایلِ typing بصورت زیر وجود داره:

  •  core-js: قابلیت های ES2015/ES6 را به مرورگرهای ES5 می آورد.
  •  jasmine: این typing، برای فریم ورک آزمایشیِ Jasmine است.
  •  node: در کدی که در محیطِ nodejs، به اشیاء ارجاع میده به کار میره.

این typingها در تولیدِ برنامه های بزرگِ Angular به کار میرن.

مرحله ی (4): مثل کد زیر، فایل package.json را به فولدر پروژه تان به نام angular2-demo اضافه کنین:

package.json

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent "npm run tsc:w" "npm run lite" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

package.json، حاوی پکیج هاییه که نرم افزارمان به آن ها احتیاج داره. این پکیج ها توسط npm (مدیر پکیجِ نود)، نصب و نگهداری میشن. برای نصب npm اینجا کلیک کنین.

مرحله ی (5): برای نصب پکیج ها، در خط فرمان (command prompt) دستورات npm زیر را اجرا کنین:

npm install

ممکنه هنگام نصب npm، پیغام های خطای قرمز رنگی ظاهر بشن، آن ها را نادیده بگیرین.

ایجاد اولین مؤلفه ی angular

مؤلفه، مفهوم اصلیِ Angular است. مؤلفه، کلاسیه که الگویِ view – بخشی از صفحه ی وب که به کاربر اطلاعات را نمایش میده و به بازخوردهای کاربر پاسخ میده- را کنترل می کنه.  برای ساخت برنامه های Angular، مؤلفه ها ضروری اند.

مرحله ی (6): در پوشه ی پروژه، زیر پوشه ای به نام app/ ایجاد می کنه تا مؤلفه های برنامه ی Angular را در آن قرار بده. برای ایجاد این پوشه از دستورات زیر استفاده کنین:

mkdir app
cd app

مرحله ی (7): فایل هایی که ایجاد می کنین باید با پسوندِ .ts ذخیره بشن. با استفاده از کد زیر، در پوشه ی app/، فایلی به نامِ environment_app.component.ts ایجاد کنین.

environment_app.component.ts

import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: '<h2>My First Angular 2 App</h2>'
})

export class AppComponent {

}
  •  کد بالا مؤلفه و پکیجِ View را از angular2/core، import می کنه.
  •  @Component یک Angular 2 decorator است که امکان اختصاص metadata بهمراه کلاسِ component را فراهم می کنه.
  •  my-app، می تواند برای تزریق، مثل تگِ HTML استفاده بشه و همچنین می تواند بعنوان مؤلفه استفاده بشه.
  •  @view، الگویی داره که نحوه ی تفسیر view را به Angular میگه.
  •  export مشخص می کنه که مثلاً یک مؤلفه، در خارج از فایل قرار داره.

مرحله ی (8): سپس با استفاده از کد زیر، فایلِ environment_main.ts را ایجاد می کنیم.

environment_main.ts

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"

bootstrap(AppComponent);
  •  فایلِ environment_main.ts، به Angular میگه که مؤلفه را بارگذاری کنه.
  •  برای اجرای برنامه، باید توابعِ بوت استرَپِ مرورگرِ Angular و مؤلفه ی ریشه ی برنامه را Import کنیم.
  •  بعد از import کردن، بوت استرَپ، با پاس دادن مؤلفه ی ریشه (مثلاً AppComponent) فراخوانی میشه.

مرحله ی (9): اکنون، با استفاده از کد زیر، index.html را در پوشه ی پروژه به نامِ angular2-demo/، ایجاد کنین.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}},
        map: { 'app': './angular2/src/app' }
      });
      System.import('app/environment_main')
            .then(null, console.error.bind(console));
    </script>
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

Angular، با مؤلفه ی ما، برنامه را در مرورگر اجرا می کنه و آن را در مکان مشخصی از index.html قرار میده.

کامپایل و اجرا

مرحله (10): برای اجرای برنامه، در پنجره ی ترمینال، دستور زیر را وارد کنین:

npm start

دستور بالا، همانطور که در ادامه آمده، پردازش دو نود را بصورت هم زمان اجرا می کنه:

  •  کامپایلرِ TypeScript در حالتِ watch.
  • lite-server (سرورِ ایستا)، index.html را در مرورگر بارگذاری می کنه و در حالی که فایل های برنامه تغییر می کنن، مرورگر را بازسازی (refresh) می کنه.
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش Angular 2

Learn Angular 2

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...