همونطور که انگولار یه فریمورک خوب برای جاوا اسکریپت حساب میشه، بوت استرپ ها یه فریمورک خوب و کار آمد هست که هم کار CSS و هم کار جاوا اسکریپت رو تا حدودی راحت کنه، ولی استفاده از ویژگی های JQuery در انگولار اصلا توصیه نمیشه، چون که انگولار کارایی که JQuery انجام میده رو به روش بهتر هندل میکنه پس ما تمام حرف هامون در رابطه با موارد CSS در بوت استرپ هست نه js. همچنین برای زیبایی کار fontawesome هم به کار خواهیم برد. برای نصب بوت استرپ و fontawesome از دستور زیر استفاده کنید:

npm install bootstrap font-awesome

اگه مراحل نصب به خوبی پیش رفتند میتونیم الان ازشون استفاده کنیم. در فایل src/styles.css میتونیم استایل های سراسری رو ایمپورت کنیم، چون ما به این دو تا بصورت سراسری میخایم دسترسی داشته باشیم اونها رو توی این فایل ایمپورت میکنیم:

@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

به همین راحتی تونستیم بوت استرپ و فونت آوسام رو به پروژه انگولارمون اضافه کنیم…

ساخت طرح کلی برنامه انگولار با بوت استرپ

خب حالا میخایم یه طرح کلی برای صفحه هامون در انگولار طراحی کنیم، یک ماژول بصورت زیر ایجاد میکنیم:

ng generate module ui --module app.module

بعد میتونیم کامپوننت هایی که لازم داریم رو اضافه کنیم، فرض کنید به سه کامپوننت هدر فوتر و دربرگیرنده نیاز داریم :

ng generate component ui/layout
ng generate component ui/header
ng generate component ui/footer

فایل src/app/ui/layout/layout.component.html رو به صورت زیر ادیت کنید که دو تا کامپوننت هدر و فوتر توی اون باشه:

<app-header></app-header>
<div class="container">
  <ng-content></ng-content>
</div>
<app-footer></app-footer>

و ماژولی که ساختیم رو بصورت زیر اصلاح کنید:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout/layout.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [LayoutComponent, HeaderComponent, FooterComponent],
  exports: [LayoutComponent]
})
export class UiModule { }

حالا میتونید فایل src/app/app.component.html رو اصلاح کرده و در واقع قسمت اصلی که بدنه صفحه هست رو بهش اضافه کنید.

<app-layout>
  <div class="jumbotron">
    <h1>Angular CLI v6 + Bootstrap & FontAwesome</h1>
    <p>
      In this tutorial you learn how to use Angular CLI v6 with Bootstrap and FontAwesome!
    </p>
  </div>
</app-layout>

و فایل src/app/ui/header/header.component.html رو بصورت زیر اصلاح کنید:

<nav class="navbar navbar-dark bg-dark mb-5">
  <a class="navbar-brand" href="/">Angular & Bootstrap</a>
  <div class="navbar-expand mr-auto">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>
  </div>
  <div class="navbar-expand ml-auto navbar-nav">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="https://github.com/tuytoosh" target="_blank">
        <i class="fa fa-github"></i>
      </a>
      <a class="nav-item nav-link" href="https://twitter.com/tuytoosh" target="_blank">
        <i class="fa fa-twitter"></i>
      </a>
    </div>
  </div>
</nav>

و نهایتا src/app/ui/header/header.component.html رو بصورت زیر اصلاح کنید:

<nav class="navbar navbar-dark bg-dark mt-5 fixed-bottom">
  <div class="navbar-expand m-auto navbar-text">
    Made with <i class="fa fa-heart"></i> by <a href="http://haamid.ir">Hamid</a>
  </div>
</nav>

حالا اگه پروژه رو سرو کنید باید یچیزی مثل اسکرین شات بالا رو ببینید، موفق باشید

کامپوننت ها در انگولار در واقع یک کلاس تایپ اسکریپت هستند که توسط اون ها ما میتونیم منطق برنامه رو کنترل کنیم. بخش های مختلف یک برنامه انگولار از کامپوننت تشکیل میشه و شما میتونید هر بخش رو در کامپوننت های جدا قرار بدید، مثلا میتونید در ساده ترین حالت هدر، فوتر و یا سایدبار رو در کامپوننت خودش بذارید.

کامپوننت ها بخش های تقریبا مستقل از هم هستند و میتونن با ارسال داده به همدیگه با هم تعامل داشته باشن که حالا در پست های بعدی در مورد نحوه این تعامل بیشتر صحبت خواهیم کرد. برنامه انگولار شما بصورت پیشفرض دارای یک کامپوننت به نام app هست که در ابتدای ران شدن برنامه این کامپوننت لود میشه که البته میتونید به انگولار بگید که کامپوننت دیگه ای رو لود کنه. با قرار دادن انتخابگر کامپوننت های دیگه توی این کامپوننت کامپوننت های دیگه توی این کامپوننت لود میشن.

ساخت کامپوننت در angular

برای ساخت اولین کامپوننت خودتون میتونید از cli کمک بگیرید و دستور زیر رو اجرا کنید.

ng generate component MyFirstComponent

با اجرای این دستور در دایرکتوری src/app یک دایرکتوری جدید با اسم my-first-component مربوط به این کامپوننت ساخته میشه که چهار تا فایل داخل اون وجود داره.

• my-first-component.component.css  : استایل های مربوط به کامپوننت درون این فایل نوشته میشه.
• my-first-component.component.html  : قالب html کامپوننت هست
• my-first-component.component.spec.ts  : فایل مربوط به تست برنامه هست که در ادامه بحث هامون بهش خواهیم پرداخت بیشتر
• my-first-component.component.ts  : فایل اصلی کامپوننت که درون اون کلاس تایپ اسکریپت مربوطه نوشته میشه

محتوای کلاس کامپوننت رو در زیر میبینید

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

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.css']
})
export class MyFirstComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

خط ۳ تا ۷ مربوط یه decorator کلاس هست که اولا میگه این کلاس یک کلاس معمولی نیست و یک کامپوننته و ثانیا مشخص میکنه که تگ انتخاب کننده، آدرس قالب و استایل این کامپوننت چی هست. کلاس های تایپ اسکریپت مثل همه زبون ها میتونن property و method های خودشونو داشته باشن. مثلا شما با تعریف یک پراپرتی در کلاس میتونید توی قالب که همون فایل html بود بهش دسترسی داشته باشید.

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

test = 'my test is here';

و محتوای فایل my-first-component.component.html رو پاک کنید و این رو بنویسید {{ test }} . میبینید که این مقدار درون قالب نمایش داده میشه. البته به شرطی که سلکتور اونو توی فایل app.component.html قرار داده باشید.

<app-my-first-component></app-my-first-component>

همونطور که میبینید ما تونستیم یک داده رو از منطق برنامه به قالب برنامه ارسال کنیم. روش هایی برای ارسال و دریافت داده در کامپوننت وجود داره که در بخش های بعدی به اونها خواهیم پرداخت.

موفق باشید 🙂

اصلا چرا اینجوری شد؟؟؟ چیه این زندگی؟ تموم تن من داره میلرزه… :))

من داشتم زندگیمو میکردم، وب کار میکردم و PHP و Laravel که یهویی اومدم دانشگاه و دارم درس میخونم… البته همچنان کارم میکنم که گشنه نمونم… این وسط پایتونم تا حدودی به اجبار یاد گرفتم و الان تا یه حدودی باهاش راحتم، پایتون کارای سخت رو با سینتکس ساده انجام میده و میشه گفت آدم خوبیه!

دیروز از سر کنجکاوی باید یه صفحه ای رو هی باز میکردم لاگین میشدم و یه فرمی رو پر میکردم و سابمیت میکردم و یه آیدی رو هی افزایش میدادم و توی صفحات جدید بازش میکردم. یکم که خسته شدم گفتم چرا برنامه ننویسم که این کارو بکنه. رفتم گشتم دیدم یه کتابخونه ای هست که تقریبا واسه همه زبونای اسکریپت نویسی دسکتاپ هم موجوده، اسمش سلنیومه! با این کتابخونه میتونید مرورگر های مختلف رو باز کنید به المنت هاش دسترسی داشته باشید و در کل اکثر کارایی که یه آدم پشت مرورگر میتونه انجام بده رو میتونید باهاش انجام بدید. سلنیوم برای پایتون رو میتونید اینجا ببینید : selenium-python.readthedocs.io

برای نصب میتونید از pip استفاده کنید : pip install selenium

درایور هر مرورگر رو هم باید نصب کنید تا با این کتابخونه مچ بشه، مثلا برای کروم میتونید از اینجا اقدام کنید

کاری که من با این ابزار استفاده کردم یکم پیچیده بود ولی شما برای شروع میتونید با این کد تست کنید که همه چی اوکی هست یا نه

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Firefox()
driver.get("http://www.python.org")
assert "Python" in driver.title
elem = driver.find_element_by_name("q")
elem.clear()
elem.send_keys("pycon")
elem.send_keys(Keys.RETURN)
assert "No results found." not in driver.page_source
driver.close()

بصورت خلاصه اگه بخوام بگم، کد بالا سایت پایتون.ارگ رو باز میکنه و توی سرچ باکسش یچیزی رو سرچ میزنه… بعضی وقتا خیلی به درد میخوره باور کنید 🙂