قبل از اینکه این آموزش انگولار را شروع کنیم، دوست دارم کمی توجه‌تان را به موضوعی جلب کنم. حتماً از اپلیکیشن‌های موبایلی و تحت وب بسیاری استفاده کرده‌­اید که ریسپانسیو و پویا (Responsive and Dynamic) هستند.
این برنامه­‌ها کل صفحه را ری­لود (Reload) نمی­‌کنند و تنها بخش‌­های لازم را لود می­‌کنند. برای مثال جی­میل را درنظر بگیرید. ممکن است متوجه شده باشید که وقتی روی یک ای­میل کلیک می­‌کنید، تنها بخش body صفحه ری­لود می­‌شود و قسمت­‌های دیگر صفحه مانند منوی کناری و navigation bar دوباره لود نمی‌­شوند.
این نوع برنامه­‌ها، برنامه­‌های تک ­صفحه‌­ای (Single Page Application aka. SPA) نامیده و با استفاده از Angular نوشته می­‌شوند. Netflix، PayPal، Freelancer نمونه‌های معروف از این نوع برنامه‌­ها هستند.

در این آموزش angular، ابتدا درباره­ سیر تکاملی انگولار صحبت خواهیم کرد. در ادامه، درباره­ قسمت­‌های اصلی سازنده­ی Angular یاد خواهیم گرفت که ما را برای یادگیری کامل Angular آماده خواهند کرد.
ما به جای گفتن Angular 2 یا Angular 4 تنها از واژه­Angular استفاده خواهیم کرد، چون اعضای انجمن انگولار، بعد از انگولار ۲ تصمیم گرفتند که هر ورژن Angular را فقط با اسم انگولار عنوان کنند.

بیایید جلوتر برویم و تحول انگولار را بفهمیم.

دوره های مرتبط در فرانش

 

سیر تکاملی Angular

Angular یک فریمورک متن ­باز (Open Source) جاوا اسکریپت برای نوشتن برنامه‌­های سمت کلاینت است. پس بیایید اول درباره­ JavaScript صحبت کنیم. Javascript در سمت کلاینت وب اجرا می‌­شود و می­‌توان از آن برای طراحی و برنامه‌نویسی نحوه­ رفتار صفحات وب در مواجه با یک رویداد (event) استفاده کرد.
اغلب از Javascript برای تعاملات واسط (interface interactions)، اسلایدشو­ها (Slideshow) و دیگر کامپوننت­‌های تعاملی (interactive component) استفاده می­‌شود.
Javascript به‌­سرعت پیشرفت کرد و حتی از آن برای برنامه­‌نویسی سمت سرور (مانند Node.js)، برنامه‌­نویسی بازی‌­ها و غیره استفاده شد.

پیشنهاد فرانش به شما
آموزش Node.js رایگان – راهنمای جامع مبتدیان پروژه محور

JavaScript با محتوای پویا (dynamic content) سروکار دارد که جنبه­ مهم برنامه­‌نویسی تحت وب است. منظور از محتوای پویا، محتوایی است که مداوم تغییر می­‌کند و خود را با کاربرانی مشخص سازگار می­کند. برای مثال، می­توانیم از جاوا اسکریپت استفاده کنیم تا با چک کردن دستگاه موبایلی که به سایت دسترسی دارد، از ورژن آن رندر بگیریم.

این مسئله موجب شد که برنامه ­نویسان به فکر نوشتن کتابخانه‌­های Javascript خود بیفتند تا با آن تعداد خط کدهای خود را کمتر کنند و به­ سادگی برخی عملکردهای پیچیده را پیاده ­سازی کنند. JQuery یکی از کتابخانه‌­های سریع و کوچک Javascript است که دارای ویژگی­‌های بسیاری است. JQuery پیمایش اسناد HTML و تغییر آنها، مدیریت eventها، انیمیشن و استفاده از AJAX را با APIای آسان بسیار ساده‌­تر می­‌کند. JQuery به معروف­‌ترین کتابخانه­ Javascript تبدیل شد، چون استفاده از آن بسیار ساده و قوی است.

چون JQuery ساختاری واقعی ندارد، برنامه ­نویس کاملاً آزاد است که پروژه­‌هایی کامل به دلخواه خود بنویسد. با این وجود، نبود ساختار، افتادن در تله­ ” اسپاگتی کد” (spaghetti code) را آسان­­‌تر می­‌کند. این مسئله می­‌تواند منجر به سردرگمی در پروژه­‌های بزرگ­‌تر شود، چون کدها مسیر طراحی مشخص و maintainability (قابلیت تغییر آسان) ندارند. در چنین شرایطی، Angular می­‌تواند کمک بزرگی باشد.

آموزش Angular - مقایسه انگولار و جی کوئری
مقایسه angular و JQuery

انگولار یک فریمورک Javascript سمت کلاینت است که خصوصاً برای کمک به برنامه­ نویسان در طراحی SPA (Single-page Application: برنامه‌های تک ­صفحه­‌ای) مطابق با بهترین رویکردهای برنامه ­نویسی تحت وب طراحی شده است.
با ارائه­ محیطی ساختار یافته برای نوشتن SPAها، شانس نوشتن “اسپاگتی کد” بسیار کاهش یافته است. پس، احتمالاً می­‌خواهید بدانید SPA چیست؟

پیشنهاد فرانش به شما
چگونه یادگیری جاوا اسکریپت را شروع کنیم؟

برنامه­‌های تک­ صفحه‌­ای (یا SPA) برنامه‌­هایی هستند که می­‌توانید مانند سایر وب­سایت­‌ها از طریق یک مرورگر به آنها دسترسی داشته باشید، اما با داشتن ظاهری مشابه با نرم‌افزار­های کامپیوتری و نیتیو موبایل، امکان داشتن تعاملات پویای بیشتری را فراهم می­‌کنند.
کاهش بسیار زیاد تعداد رفرش‌­های یک صفحه، تفاوت اصلی یک وب­سایت معمولی و SPA است. SPA از AJAX استفاده­ زیادی می­‌کند تا بدون انجام یک رفرش کامل به سرورها وصل شود و داده­‌های لودشده را به برنامه بیاورد. در نتیجه، فرایند رندر گرفتن از صفحات اغلب در سمت کلاینت صورت می­‌گیرد.

برنامه‌های تک صفحه ای-آموزش Angular
برنامه‌های تک صفحه ای

برای مثال، اگر به جی­میل بروید، متوجه خواهید شد که با باز کردن یک ایمیل در صندوق ورودی، فقط ایمیل از سرور گرفته (fetch) شده و در لیست ایمیل­‌ها نشان داده می‌­شود. بقیه­ کامپوننت­‌ها مثل sidebar، navigation bar و غیره، لود نمی‌­شوند. یعنی DOM (Document Object Model را فقط برای بخش موردنیاز رفرش می‌­کند. درنتیجه، بار لودِ وب­سایت کاهش می‌­یابد.

خُب، حالا می­دانیم که JavaScript و JQuery چیست و جای Angular در این داستان کجاست. با جلوتر رفتن در آموزش Angular، درباره­ ویژگی‌­­های Angular و چگونگی کار با آن یاد می­‌گیریم.

 

آموزش انگولار (Angular)

Angular یک پلتفرم سمت کلاینت متن­ باز و مبتنی بر تایپ ­اسکریپت (Typescript) برای نوشتن برنامه­‌های تحت وب است. تیم Angular در شرکت گوگل و انجمنی متشکل از برنامه­ نویسان و سازمان­‌ها آن را مدیریت می­‌کنند. تیم برنامه­ نویسان انگولار­ جی ­اس (Angular JS) انگولار را از نو نوشته‌اند. اما باید بگویم که Angular کاملاً با Angular js فرق دارد. بیایید درباره­ تفاوت­‌های انگولار و انگولار جی ­اس بخوانیم.

آموزش نصب Angular 8 در ویندوز ۱۰

 

تفاوت­‌های انگولار و انگولار جی­ اس (Angular vs. Angular js)

  • برنامه­‌های انگولار معماری متفاوتی در مقایسه با برنامه­‌های Angular js دارند. ماژول‌­ها، کامپوننت­‌ها، تمپلت­‌ها، متادیتا، دیتا بایندیگ، directiveها، سرویس­‌ها و dependency injection قسمت­‌های اصلی سازنده­ی Angular هستند. کمی جلوتر درباره‌­­شان صحبت خواهیم کرد.
  • Angular، نسخه­ کاملاً از نو نوشته­ شده­ Angular js است.
  • Angular مفاهیمی مثل “scope” یا controller ندارد و درعوض معماری اصلی آن ساختار سلسله ­مراتبی کامپوننت­‌هاست.
  • انگولار سینتکس ساده­ تری دارد، از “[]” برای property binding و از “()” برای event binding استفاده می­‌کند.
  • توسعه­ برنامه‌­های موبایلی اگر اول مشکلات سرعت موبایل برطرف شوند، توسعه­ برنامه­‌ها موبایلی بسیار ساده‌­تر می­‌شود. به همین دلیل Angular ابتدا توسعه­ برنامه­‌های موبایلی را مدیریت می­‌کند.
  • ماژولاریتی (Modularity): ECMAScript 6 (ES6) از مفهوم ماژولاریتی پیروی می­کند. عملکردهایِ مشابه کنار هم در یک ماژول نگه داشته می­‌شوند. این مسئله هسته­ انگولار را سبک­‌تر و سریع­‌تر می­‌کند.

(ECMAScript 6 (ES6 زبان تایپ ­اسکریپ شرکت مایکروسافت را پیشنهاد می­‌کند. این زبان ویژگی‌­های زیر را عرضه می­‌کند:

  • برنامه ­نویسی شئ­ گرا مبتنی بر کلاس
  • static typing

تایپ­ اسکریپت زیرمجموعه‌­ای بزرگ از (ECMAScript 6 (ES6 است و با نسخه­ پیشین یعنی ECMAScript 5 سازگار است. Angular دارای مزایای ES6 نیز هست:

  • شمارنده­‌ها (iterator)
  • حلقه­‌های For/Of
  • Reflection
  • dependency injection بهبود یافته – با بایندینگ، dependencyها می­‌توانند نام­گذاری شوند.
  • لودینگ پویا (Dynamic Loading)
  • کامپایل template آسنکرون
  • روتینگ ساده‌­تر (Routing)
  • قرار گرفتن کامپوننت­‌ها و directiveها به جای controllerها و $scope. کامپوننت یک directive دارای template است.
  • با استفاده از RxJS از برنامه­ نویسی واکنش­گر (Reactive) پشتیبانی می­‌کند.

در ادامه­ این آموزش Angular، درباره­ ویژگی‌­­های Angular می‌­آموزیم.

ویژگی­‌های انگولار

کراس ­پلتفرم (Cross Platform)

  • برنامه­‌های تحت وب پیشرونده (Progressive web apps)

از قابلیت‌­های مدرن پلتفرم وب برای ارائه­ تجربه‌­ای مشابه با برنامه­‌های موبایلی استفاده می­‌کند. نصبی با سرعت بالا، آفلاین و بی­‌مرحله دارد. به همین دلیل کار با Angular بسیار ساده است.

  • نیتیو (Native)

می­توانید با استفاده از فریمورک Lonic، نیتیواسکریپت (NativeScript) و ری­اکت نیتیو (React Native) برنامه­‌های نیتیو موبایلی حرفه‌­ای بنویسید.

  • دسکتاپ

می­‌توانید با استفاده از همان متدهای انگولاری که برای WebPlus یاد می­‌گیرید، برنامه‌­های دسکتاپی مک، ویندوز و لینوکس بنویسید.

پیشنهاد فرانش به شما
آموزش React Native: برنامه نویسی اندروید با جاوا اسکریپت

سرعت و کارایی

  • تولید کد (Code generation)

Angular تمپلت­‌هایتان را به کدهایی تبدیل می­‌کند که برای ماشین­‌های مجازی جاوا اسکریپت بسیار بهینه شده­‌اند. این مسئله به شما تمامی مزایای کدهای دستی را در کنار کارایی یک فریمورک می­دهد.

  • جامع (Universal)

می­‌توانید از هر فناوری دیگری در کنار انگولار برای کمک به Node.js، .NET، PHP و سرورهای دیگر استفاده کنید.

  • تفکیک کد (Code Splitting)

برنامه‌­های انگولار با روتر جدید کامپوننت سریع لود می‌­شوند. این مسئله موجب تفکیکِ کدِ خودکار می­‌شود و کاربران تنها قسمتی از کد را، که برای رندرگیری view موردنظر لازم است، لود می­‌کنند.

بهره‌وری مناسب

  • تمپلیت­‌ها

با سینتکس­‌های ساده و قدرتمند تمپلت­، سریعاً UI View می‌­سازد.

  • Angular CLI

ابزارهای دستوری: می­‌توانیم با استفاده از Angular CLI سریعاً شروع به ساخت کامپوننت­‌ها کنید، آنها را اضافه و تست­ کنید و سپس بلافاصله به توسعه­ (deploy) آنها بپردازید.

  • IDE

قابلیت intelligent code completion، instant error و سایر فیدبک­‌ها معروف را در برنامه­‌های ویرایش متن و IDEهای معروف مانند VS Code شرکت مایکروسافت فعال کنید.

ماجرایِ توسعه­ کامل

  • تست

با استفاده از Karma برای یونیت تست (Unit test)، می­‌توانید اشتباهات خود را در حال اجرا بفهمید. Protractor تست­‌های سناریو را سریع­‌تر و مطمئن‌­تر اجرا می­‌کند.

در ادامه به مهم‌­ترین بخش آموزش Angular می‌­رسیم. بیایید درباره­ قسمت­‌های سازنده­ی Angular حرف بزنیم.

 

قسمت‌­های سازنده‌­ی Angular

اصلی­‌ترین قسمت­‌های سازنده­ی Angular به صورت زیرند:

  • ماژول­‌ها (Modules)
  • کامپوننت‌­ها (Components)
  • تمپلت­‌ها (Templates)
  • متادیتا (Metadata)
  • دیتا بایندینگ (Data Binding)
  • Directives
  • سرویس­‌ها
  • Dependency Injection

آموزش انگولار – معماری

در ادامه­ این آموزش Angular ، درباره­ هریک از موارد بالا مفصلاً صحبت خواهیم کرد. بیایید اول ببینیم که ماژول­‌ها واقعا چه هستند؟

ماژول­ ها

برنامه­‌های Angular ماژولار هستند و برای ماژولاریتی داشتن، از Angular Module (ماژول انگولار) استفاده می­‌کنیم، یا می­‌توانیم بگوییم NgModule. هر برنامه­ انگولار حداقل یک ماژول Angular دارد، مثلا root module (ماژول ریشه). به طور کلی، این ماژول AppModule نامیده می­‌شود. ماژول ریشه می‌­تواند تنها ماژول برنامه‌­های کوچک باشد. اما بسیاری از برنامه‌­ها دارای چندین ماژول هستند. می‌­توانیم بگوییم که یک ماژول، بلوک‌­های ب­هم چسبیده­ کد با مجموعه‌­ای از قابلیت­‌های مرتبط است که دارای حوزه­ یا جریان کاری مشخصی در برنامه هستند. هر ماژول Angular کلاسی است که دارای دکوراتور decorator @NgModule است.

decoratorها عملگرهایی هستند که کلاس­‌های Javascript را تغییر می­‌دهند. از decoratorها اغلب برای دادن متادیتا به کلاس‌­ها استفاده می‌شود. با این­کار، برنامه کانفیگریشن (configuration) این کلاس­‌ها و شیوه­ی عملکرد آنها را می­‌فهمد. NgModule، decoratorای است که شئ متادیتایی را، که properyهایش یک ماژول را توصیف می­‌کنند، می‌­گیرد. propertyهای آن به شرح زیر است:

  • declaration: کلاس­‌هایی که به view وابسته و مربوط به این ماژول هستند. سه نوع کلاس Angular می­تواند دارای view باشد: کامپوننت‌ها، directiveها و pipeها. کمی بعد درباره­ این­‌ها صحبت خواهیم کرد.
  • export: کلاس­‌هایی که کامپوننت­‌های سایر ماژول­‌ها بتوانند به آنها دسترسی داشته باشند.
  • import: ماژول­‌هایی که ماژول کنونی به کلاس­‌هایشان نیاز دارد.
  • provider: سرویس­‌هایی که در یک ماژول موجودند و کامپوننت­‌ها و ماژول­های دیگر قصد استفاده از آنها را دارند. وقتی سرویسی در یک provider قرار می­گیرد، از تمام قسمت­‌های برنامه می­‌توان از آن استفاده کرد.
  • bootstrap: root component (کامپوننت ریشه) که view اصلی برنامه است. این ماژول ریشه تنها دارای این property است و نشان­دهنده این است که این کامپوننت می­بایست bootstrap شود.

بیایید ببینیم که ماژول ریشه (src/app/app.module.ts) چگونه است:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
@NgModule({
imports:[ BrowserModule ],
providers: [ BookList ],
declarations: [ AppComponent ],
exports: [],
bootstrap: [ AppComponent ]
})
 
export class AppModule { }

یک ماژول ریشه معمولا کلاس­‌هایش را export نمی‌­کند، چون به عنوان ماژول ریشه ماژول‌­ها و کامپوننت­‌های دیگر کلاس­‌ها را import می­‌کند تا از آن‌ها استفاده کند. ما AppModule را در فایلی به نام main.ts، bootstrap می­‌کنیم. در این فایل ماژول bootstrap را مشخص می­‌کنیم و این ماژول دارای کامپوننت bootstrap است.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
 
if (environment.production) {
enableProdMode();
}
 
platformBrowserDynamic().bootstrapModule(AppModule);

کتابخانه­‌های Angular

Angular مجموعه­‌ای از ماژول­‌های Javascript (ماژول­‌های کتابخانه) را عرضه می­‌کند. هر کدام از آنها قابلیت­‌های متعددی را ارائه می‌­کنند. هر کتابخانه­ Angular پیشوند @angular دارد، مانند @angular/core، @angular/compiler، @angular/compiler-cli، @angular/http، @angular/router. می­‌توانید با استفاده از مدیر پکیج­‌های npm آن را نصب کنید و قسمت­‌هایی از آن را با دستورات import جاوا اسکریپت به داخل کلاس ایمپورت کنید.

import { Component } from '@angular/core';

در مثال بالا، component decorator انگولار از کتابخانه­ @angular/core ایمپورت شده است.

در ادامه­ این آموزش انگولار ، بیایید قسمت سازنده­ی بعدی انگولار و یکی از مهم­‌ترین قسمت­‌های آن را به نام کامپوننت بشناسیم.

مزایا و معایب ۸ Angular

کامپوننت­ ها (Components)

یک کامپوننت یک یا چند بخشِ صفحه را به نام view کنترل می­کند. برای مثال، اگر می­‌خواهید برنامه­ لیست فیلم‌­ها را بنویسید، می­‌توانید این کامپوننت­‌ها را داشته باشید: کامپوننت App (کامپوننت bootstrap)، کامپوننت Movielist، کامپوننت Move Description و غیره.

درون یک کامپوننت، منطق برنامه­ کامپوننت را تعریف می­‌کنید، برای مثال چگونه از view درون یک کلاس پشتیبانی می‌­کند. کلاس با استفاده از APIای از properyها و متدها با view ارتباط دارد.

هر برنامه یک کامپوننت اصلی دارد که درون ماژول اصلی boorstrap شده است، به عبارت دیگر AppComponent.

import { Component } from '@angular/core';
 
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.css']
})
 
export class AppComponent{
title = 'app works!';
}

 

خب، بیایید بعد از دیدن کامپوننت bootstrap، حالا نگاهی به کامپوننت دیگری بیندازیم. کامپوننت Movies. می­خواهیم بیشتر کامپوننت‌­ها را بفهمید.

import { Component, OnInit } from '@angular/core';
 
@Component({
selector: 'app-movies',
templateUrl: './movies.component.html',
styleUrls: ['./movies.component.css']
})
 
export class MoviesComponent implements OnInit {
  movies: any[];
  ngOnInit() {
    getMovies()({
    this.movies = movies;
    })
  }
}

در اینجا اول با استفاده از کلیدواژه­ import، کامپوننت­‌ها و dependencyهای مورد نیازِ کامپوننت را ایمپورت می­‌کنیم. بعد با استفاده از دکوراتور @Component متادیتای کامپوننت را به آن می­‌دهیم. اولین property یک selector است.
یک selector کلیدواژه­ موردنظر را می‌­گیرد و داده­ درون تگ انتخاب شده را دور می­ریزد. با دو روش می‌­توانیم view را به کامپوننت بچسبانیم (attach): می­توانیم تمپلت را به آن بدهیم و آن را در اینجا تعریف کنیم یا از templateUrl استفاده کنیم و مسیر فایلی که تمپلت در آن است را به آن بدهیم. در ادامه درباره­ تمپلت مفصلاً توضیح خواهیم داد. سومین property یک styleUrls است که مسیر فایل CSS را می­دهد.

بعد از متادیتا، منطق کامپوننت را تعریف می‌­کنیم که درون یک کلاس قرار می­‌گیرد. سازنده­ی (constructor) کلاس را تعریف می­‌کنیم و داخل آن، متغیرها و متدی را تعریف می­‌کنیم که در زمان ساخته شدن کلاس باید مقداردهی اولیه شوند. هم­چنین ngOnInit را داریم که زمانی که یک نمونه از کامپوننت ساخته می­‌شود، فراخوانی می­‌شود.

حالا به سراغ قسمت سازنده­ی دیگری در آموزش انگولار­مان می­رویم: Templates.

Templates

view یک کامپوننت را به همراهش یعنی تمپلت وصل می­‌کند. تمپلت تنها فرمی از تگ­‌های HTML است که به انگولار شیوه­ رندرگیری از کامپوننت را می‌­گوید. یک تمپلت شبیه HTML عادی است و تنها کمی با هم فرق دارند. کد پایین تمپلتی است برای کامپوننت Movie که در بالا درباره‌­اش صحبت کردیم:

<app-navbar></app-navbar>
 
 
<div class ="container">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>

در اینجا تگ­‌های سفارشی (custom) مانند <app-navbar> داریم.

پیشنهاد فرانش به شما
۵ دلیل برای یاد گرفتن HTML

متادیتا

متادیتا به Angular می­گوید که چگونه کلاسی را پردازش کند. برای اینکه به Angular بگوییم کامپوننت MovieList یک کامپوننت است، متادیتا را به کلاس دادیم. در زبان تایپ ­اسکریپت برای دادن یک متا دیتا به کلاس از decorator استفاده می­‌شود. در کد پایین می­بینید که متادیتا به کامپوننت Movie داده شده است:

import { Component, OnInit } from '@angular/core';
 
@Component({
selector: 'app-movies',
templateUrl: './movies.component.html',
styleUrls: ['./movies.component.css']
})

اینجا دکوراتور @Component را داریم که کلاس بعد از خود را به عنوان یک کلاس کامپوننت درنظر می­‌گیرد. دکوراتور @Component شئ کانفیگریشن لازم را برمی­دارد. انگولار برای ایجاد و نمایش کامپوننت و view آن، به این شئ نیاز دارد.

مهم‌­ترین کانفیگریشن­‌های یک دکوراتور @Component به شرح زیرند:

  • selector: به آموزش angular – دیتا بایدینگ می­‌گوید که در هر جایی که تگ <app-movies> را دید، نمونه‌­ای از این کامپوننت را ایجاد و اضافه کند. برای مثال، اگر فایل HTML برنامه‌­ای دارای <app-movies></app-movies> باشد، انگولار نمونه­‌ای از view کامپوننت MovieList را بین این دو تگ قرار می­دهد.
  • templateUrl: شامل مسیرِ تمپلت این کامپوننت HTML است.
  • provider: آرایه­‌ای از dependency injection provider برای سرویس­‌هایی است که این کامپوننت لازم دارد. این کار یکی از راه‌­هایی است که می­‌توان به آموزش angular – دیتا بایدینگ گفت سازنده­ی این کامپوننت برای گرفتن و نمایش لیستی از فیلم­‌ها به یک MovieService نیاز دارد.

متا دیتای موجود در @Component به انگولار می­گوید که از کجا قسمت­‌های اصلی سازنده­ای را، که برای کامپوننت مشخص می­­‌کنید، پیدا کند. تمپلت، متا دیتا و کامپوننت با هم یک view را تعریف می­‌کنند. نکته­ اصلی معماری این است که باید متادیتا را به کدتان اضافه کنید تا آموزش angular دیتا بایدینگ بداند که باید چه­‌کاری انجام دهد.

تفاوت Angular و React

دیتا بایندینگ

در صورت استفاده نکردن از یک فریمورک، باید مقادیر داده­‌ها را به HTML controlها بفرستید و از پاسخ­‌های کاربران برای انجام برخی کارها و آپدیت مقادیر استفاده کنید. نوشتن این منطق push/pull، خسته­ کننده، پر از خطا و خواندن آن کابوسی است.
Angular از دیتا بایندینگ پشتیبانی می‌کند. دیتا بایندینگ مکانیزمی است برای هماهنگ کردن بخش‌­هایی از تمپلت با بخش‌­هایی از یک کامپوننت. باید نشانه­ بایندینگ را به HTML تمپلت اضافه کنید تا به انگولار بگویید که در کجا این دو را به هم وصل کند.

آموزش angular - دیتا بایدینگ
data binding

هر فرم دارای مسیری است- مسیرش به DOM، از DOM یا هردو.

<li> {{movie.name}}</li>
 
 
<movie-detail [movie]="selectedMovie"></movie-detail>
 
 
<li (click)="selectMovie(Movie)"></li>
  • movie.name}} interpolation}} مقدار property نام کامپوننت را درون المنت <li> نمایش می­‌دهد.
  • movie] property binding] مقدار selectedMovie را از MovieListComponent والد به movie property فرزند در MovieDetailComponent می­فرستد.
  • event binding کلیک، با کلیک کاربر روی نام یک فیلم، متد selectMovie را فرامی‌­خواند.

دیتا بایندینگ دوطرفه قسمتی بسیار مهم است، چون با استفاده از تنها یک نماد، یعنی ngModel directive، property و event binding را با هم تلفیق می­‌کند. در زیر مثالی را از تمپلت MovieDetailComponent می­بینید:

<input [(ngModel)]="movie.name">

در باندینگ دو طرفه، مانند property binding، مقدار یک property داده از کامپوننت به input box می­‌رود. مانند event binding، تغییرات کاربر نیز به کامپوننت برمی­‌گردد و مقدار property را به آخرین مقدار تغییر می­‌دهد. Angular تمامی دیتا بایندینگ­‌ها را، از ریشه­ کامپوننت برنامه تا تمامی کامپوننت­‌های فرزند، در یک حلقه­ event جاوا اسکریپت پردازش می­کند.

دیتا باندینگ نقشی اساسی در ارتباط بین یک تمپلت و کامپوننت­ش دارد. دیتا بایندینگ در ارتباط کامپوننت‌­های والد و فرزند نیز نقشی مهم دارد.

در بخش بعدی این آموزش Angular ، در باره­ قسمت سازنده­ی بعدی یعنی directiveها توضیح خواهیم داد.

Directiveها

تمپلت­‌های Angular پویا هستند. وقتی Angular از آنها رندر می­‌گیرد، طبق دستوراتِ directiveها، DOM را تغییر می­دهد. یک directive کلاسی با دکوراتور @Directive است. یک کامپوننت، یک directive دارای تمپلت است. یک دکوراتور @Component درواقع یک دکواتور @Directive توسعه یافته است که دارای ویژگی­‌های تمپلت­‌گرا (template oriented) است.

درحالی که اساساً یک کامپوننت یک directive است، کامپوننت­‌ها آنقدر در یک برنامه­ Angular خاص و حیاتی هستند که این معماری کامپوننت‌ها را از directiveها جدا می­‌کند.

دو نوع دیگر از directiveها نیز موجودند: structural و attribute.

directiveها گاهی مانند شناسه­‌ها (attribute) به وسیله­ یک نام، درون یک المنت تگ قرار می­‌گیرند، اما بیشتر هدف یک تخصیص یا بایندینگ هستند.

Structural directiveها، DOM را با اضافه، حذف یا جایگزینی المنت­‌ها تغییر می­‌دهند.

مثال زیر از دو built-in structural directive استفاده می­‌کند.

  • *ngFor به Angular می­گوید که یک <li> را به ازای هر فیلم در Movies برگرداند.
  • *ngif تنها اگر فیلم انتخاب شده موجود باشد، دارای کامپوننت MovieDetail است.

Attribute directiveها ظاهر یا رفتار یک المنت موجود را تغییر می‌­دهند. Attribute directive های موجود در تمپلت­‌ها، شبیه شناسه­‌های معمول HTML هستند. ngModel directive، که یک دیتابایندینگ دو طرفه است، نمونه‌­ای از یک attribute directive است. ngModel رفتار یک المنت موجود را با تعیین display value property آن و پاسخ به تغییرات event تغییر می­‌دهد.

<input [(ngModel)]="movie.name">

انگولار directiveهای دیگری نیز دارد که یا ساختار layout (مثلا ngSwitch) را تغییر می­‌دهند یا قسمت­‌های مختلفی از المنت‌­ها و کامپوننت­‌های DOM را عوض می­‌کنند (مثلاً ngStyle و ngClass).

می­‍توانند directiveهای خودتان را هم بنویسید: Custom Directive

پیشنهاد فرانش به شما
آموزش HTML به زبان ساده

 

سرویس ­ها

سرویس گروهی بزرگ شامل هرگونه مقدار، عملکرد یا ویژگی است که برنامه­‌تان به آنها نیاز دارد. یک سرویس معمولاً کلاسی با هدفی کاملاً مشخص است. هرچیزی می‌­تواند یک سرویس باشد. مانند:

  • logging service
  • data Service
  • message bus
  • tax calculator
  • application configuration

آموزش انگولار - سرویس ها

Angular تعریفی برای یک سرویس ندارد. هیچ کلاس پایه­ سرویس نداریم و جایی برای ثبت یک سرویس وجود ندارد. با این حال سرویس­‌ها نقشی اساسی در یک برنامه­ انگولار دارند. کامپوننت‌­ها از سرویس‌­ها خدمات می­‌گیرند.

در پایین مثالی از یک کلاس سرویس را می­‌بینید که در آن Firebase گوگل پایگاه­ داده­ ماست و movie-list را ایمپورت می‌­کنیم:

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { Movie } from '../interfaces/movie'
 
@Injectable()
 
export class FirebaseService {
movies: FirebaseListObservable<any[]>;
movie: FirebaseObjectObservable<any>;
titles: FirebaseListObservable<any[]>;
term: string = 'Incep';
 
constructor(privateaf: AngularFire) { }
 
getMovies()
{
    this.movies = this.af.database.list('/movies') asFirebaseListObservable<Movie[]>;
    returnthis.movies;
}
 
getMovieDetails(id)
{
    this.movie = this.af.database.object('/movies/'+id) asFirebaseObjectObservable<Movie>;
    return this.movie;
}
 
searchMovies()
{
    this.movies = this.af.database.list('/movies',{
    query: {
        orderByChild:'title',
        startAt:this.term,
        endAt:this.term + "uf8ff",
        value:'once'
}
} ) as FirebaseListObservable<Movie[]>;
return this.movies;
}
}

سرویس‌­ها همه‌­جا هستند. کلاس‌­های کامپوننت، داده را مستقیماً از سرور نمی‌­گیرند، ورودی‌­های کاربر را اعتبارسنجی نمی‌­کنند یا مستقیماً لاگ‌های کنسول را لاگ نمی­‌کنند. آنها این وظایف را به سرویس‌­ها می­‌دهند.

وظیفه­ یک کامپوننت تنها امکان­ پذیر کردن تجربه­ کاربری (user experience) است. آنها بین view (که تمپلت از آن رندر می­گیرد) و لایه­ منطق برنامه (application logic) قرار می­‌گیرند. یک کامپوننت خوب propertyها و متدهایی برای دیتا بایندینگ ارائه می­‌کند.
انگولار به شما کمک می­‌کند از این قوانین پیروی کنید. Angular به شما اجازه می­‌دهد به سادگی منطق برنامه را به سرویس بدهید و با استفاده از dependency injection این سرویس‌ها را دراختیار کامپوننت‌­ها قرار دهید.

پس بیایید با هم در این آموزش انگولار ، dependency injection را یاد بگیریم.

دوره های مرتبط در فرانش

Dependency Injection

Dependency injection روشی برای دادن نمونه­‌ای جدید از یک کلاس به همراه تمامی dependencyهای کاملِ موردنیازش است. بیشتر dependencyها سرویس هستند. Angular از dependency injection برای فراهم کردن سرویس‌های موردنیاز کامپوننت­‌ها استفاده می­‌کند. انگولار با نگاه به نوع پارامترهای سازنده­ی کلاس یک کامپوننت، می­تواند بفهمد که به چه سرویس­‌هایی نیاز دارد.

وقتی Angular یک کامپوننت می­‌سازد، اول از یک injector سرویس‌­های موردنیاز کامپوننت را درخواست می­‌کند.

آموزش انگولار- Dependency Injection
Dependency Injection

 

یک injector دارای یک container از نمونه­‌هایی از سرویس­‌هایی است که قبلاً ساخته است. اگر نمونه­ سرویس درخواستی در container نباشد، injector پیش از فرستادن سرویس به انگولار، یکی از آن می‌­سازد و به container اضافه می­‌کند.
وقتی تمامی سرویس‌­های درخواستی به انگولار فرستاده شدند، انگولار می­‌تواند سازنده­ی کلاس کامپوننت را، با آن سرویس­‌ها به عنوان آرگومان­‌هایش، فراخوانی کند. این همان dependency injection است.

در مثال زیر می‌­توانید ببینید که یک  provider سرویس Firebase را به وسیله­ یک injector ثبت می­‌کنیم.
provider چیزی است که می­‌تواند یک سرویس را ساخته و برگرداند. معمولاً خود کلاس سرویس را برمی­گرداند. می­‌توانید providerها را در ماژول­‌ها یا کامپوننت­‌ها ثبت کنید.

به طور کلی مانند کد زیر providerها را به ماژول ریشه اضافه کنید تا نمونه­‌ای مشابه از سرویس در همه­ جا قابل دسترسی باشد.

@NgModule({
declarations: [
AppComponent,
HomeComponent,
MoviesComponent,
NavbarComponent,
MovieDetailsComponent,
AboutComponent,
BoldTextDirective,
MovieSearchComponent,
],
 
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(routes),
AngularFireModule.initializeApp(firebaseConfig,firebaseAuthConfig),
FlashMessagesModule
],
 
providers: [FirebaseService],
bootstrap: [AppComponent]
})
 
export class AppModule { }

هم­چنین می­‌توانید یک سرویس را در سطح کامپوننت و در provider property دکوراتورِ @Component ثبت کنید:

import { Component } from '@angular/core';
import { FirebaseService } from './services/firebase.service';
 
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.css'],
providers: [FirebaseService]
})
export class AppComponent {
title = 'app works!';
}

ثبت در سطح یک کامپوننت به این معناست که با ایجاد هر نمونه­ جدید کامپوننت، نمونه­‌ای جدید نیز از سرویس دریافت می­‌کنید.

در نتیجه­ گیری dependency injection، می­‌توانیم بگوییم که:

  • dependency injection درون فریمورک انگولار قرار دارد و در همه­ جا استفاده می­‌شود.
  • injector مکانیسم اصلی است.
    • یک injector دارای یک containerای از نمونه­ سرویس‌­هایی است که ساخته است.
    • یک injector می­‌تواند یک نمونه­ جدیدِ سرویس را از یک provider بسازد.
  • provider دستورالعمل ساخت یک سرویس است.
  • providerها را با injectorها ثبت کنید.

این پایان آموزش Angular ماست. امیدوارم این آموزش برایتان مفید بوده و به اطلاعات‌تان افزوده باشد. حالا باید با قسمت­‌های سازنده­ی انگولار آشنا شده و آماده­ نوشتن برنامه­ انگولار خود باشید.

 

ویدیو آموزش Angular :

اگر این آموزش Angular برای شما مفید بوده است:

می‌توانید برای یادگیری بیشتر برنامه‌نویسی نرم‌افزارهای تک‌صفحه‌ای وب با انگولار ۷ را مشاهده نمایید.

دوره های مرتبط در فرانش