وحید نصیری وحید نصیری
مطالب
Angular CLI - قسمت ششم - استفاده از کتابخانه‌های ثالث
در قسمت قبل با نحوه‌ی ساخت و توزیع برنامه‌های Angular، توسط Angular CLI آشنا شدیم. یکی از فایل‌هایی که توسط سیستم build آن تولید می‌شود، فایل vendor.bundle.js است که شامل کدهای اصلی Angular و همچنین کتابخانه‌های ثالث مورد استفاده‌است و با توجه به اینکه در حالت پیش فرض کار با Angular CLI قرار نیست فایل تنظیمات webpack آن‌را استخراج و ویرایش کنیم، چگونه باید سایر کتابخانه‌های ثالث مورد نیاز را به این سیستم build معرفی کرد؟


استفاده از کتابخانه‌های جاوا اسکریپتی ثالث

برای استفاده از کتابخانه‌های جاوا اسکریپتی ثالث، نیاز است آن‌ها را به فایل angular-cli.json. معرفی کنیم:
  "apps": [
    {
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "styles": [
        "styles.css"
      ],
      "scripts": [],
در اینجا امکان معرفی فایل‌های اسکریپت و همچنین شیوه‌نامه‌های اضافی بیشتری (علاوه بر فایل src\styles.css پیش فرض پروژه) جهت معرفی آن‌ها به سیستم build برنامه موجود است.
به علاوه تعریف پوشه‌ی src\assets را نیز در اینجا مشاهده می‌کنید؛ به همراه فایل‌های اضافی دیگری مانند src\favicon.ico که ذیل آن ذکر شده‌است.


یک مثال: معرفی کتابخانه‌ی ng2-bootstrap به Angular CLI

دریافت و نصب بسته‌های مورد نیاز
مرحله‌ی اول کار با یک کتابخانه‌ی ثالث نوشته شده‌ی برای Angular مانند ngx-bootstrap، دریافت و نصب بسته‌ی npm آن می‌باشد. به همین جهت به ریشه‌ی پروژه وارد شده و دستورات ذیل را صادر کنید تا بوت استرپ و همچنین کامپوننت‌های +Angular 2.0 آن نصب شوند:
> npm install bootstrap --save
> npm install ngx-bootstrap --save

پرچم save در اینجا سبب به روز رسانی خودکار فایل package.json می‌شود:
"dependencies": {
   "bootstrap": "^3.3.7",
   "ngx-bootstrap": "^1.6.6",

معرفی بسته‌های نصب شده به تنظیمات Angular CLI
پس از آن، همانطور که عنوان شد نیاز است به فایل angular-cli.json. مراجعه کرده و شیوه‌نامه‌ی بوت استرپ را تعریف کنیم:
  "apps": [
    {
      "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

چون از ngx-bootstrap استفاده می‌کنیم، نیازی به مقدار دهی مستقیم []:"scripts" فایل angular-cli.json. نیست. ولی اگر خواستید اینکار را انجام دهید، روش آن به صورت ذیل است (که البته نیاز به نصب بسته‌ی jQuery را نیز خواهد داشت):
"scripts": [
   "../node_modules/jquery/dist/jquery.js",
   "../node_modules/bootstrap/dist/js/bootstrap.js"
],

بنابراین تا اینجا بسته‌های بوت استرپ و همچنین ngx-bootstarp نصب شدند و شیوه‌نامه‌ی بوت استرپ به فایل angular-cli.json اضافه گردید (نیازی هم به تکمیل قسمت scripts نیست).


استفاده از ماژول‌های مختلف بسته‌ی نصب شده در برنامه
در ادامه نیاز است تا ماژولی را از ngx-bootstarp را به قسمت imports فایل src\app\app.component.ts اضافه کرد. هرکدام از کامپوننت‌های این بسته به صورت یک ماژول مجزا تعریف شده‌اند. بنابراین برای استفاده‌ی از آن‌ها نیاز است برنامه را از وجودشان مطلع کرد. برای مثال روش استفاده‌ی از AlertModule آن به صورت ذیل است:
import { AlertModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    AlertModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
در اینجا ابتدا AlertModule از ngx-bootstrap دریافت شده و سپس به قسمت imports فایل src\app\app.component.ts اضافه گردیده‌است.

آزمایش برنامه و اجرای آن
برای آزمایش مراحل فوق، فایل src/app/app.component.html را گشوده و به صورت ذیل تغییر دهید:
<h1>
  {{title}}
</h1>

<button class="btn btn-primary">Hello!</button>

<alert type="success">Alert success!</alert>
در اینجا یک دکمه‌ی جدید با شیوه‌نامه‌های بوت استرپ اضافه شده‌اند (جهت بررسی عملکرد بوت استرپ) و همچنین یک Alert نیز از مجموعه کامپوننت‌های ngx-bootstrap به صفحه اضافه شده‌است.
اکنون اگر دستور ng serve -o را اجرا کنیم، خروجی ذیل حاصل خواهد شد:



مستندات و مثال‌های بیشتری را از ماژول‌های ngx-bootstarp، در اینجا می‌توانید بررسی کنید.
‫۷ سال و ۶ ماه قبل، جمعه ۲۵ فروردین ۱۳۹۶، ساعت ۱۷:۳۵
وحید نصیری وحید نصیری
نظرات مطالب
استفاده از کتابخانه‌های ثالث جاوا اسکریپتی در برنامه‌های AngularJS 2.0
KendoUI در اساس یک سری کامپوننت است که به صورت افزونه‌های jQuery تهیه شده‌اند (که به همراه فایل‌های تعاریف TypeScript هم هستند). بنابراین مطلب «روش استفاده‌ی از jQuery در برنامه‌های AngularJS 2.0» در مورد آن صادق است. همچنین تیم KendoUI به صورت اختصاصی در حال تهیه‌ی کامپوننت‌های مخصوص AngularJS 2.0 است: Kendo UI for Angular 2
در مورد این کامپوننت‌های ویژه در «Kendo UI R3'16 Release Webinar» یک دموی مفصل ارائه شده‌است.
‫۸ سال قبل، یکشنبه ۲۵ مهر ۱۳۹۵، ساعت ۲۰:۴۶
محمد رعیت پیشه محمد رعیت پیشه
اشتراک‌ها
پروژه فروشگاه پیاده سازی شده با microservice و container
Easy to get started sample reference microservice and container based application. Cross-platform on Linux and Windows Docker Containers, powered by .NET Core 2.0 and Docker engine. Supports Visual Studio 2017, VS for Mac and CLI based environments with Docker CLI, dotnet CLI, VS Code or any other code editor.  
پروژه فروشگاه پیاده سازی شده با microservice و container
‫۶ سال و ۸ ماه قبل، دوشنبه ۲۳ بهمن ۱۳۹۶، ساعت ۱۶:۴۱
مهدی سعیدی فر مهدی سعیدی فر
اشتراک‌ها
دریافت کتاب مرجع ng-book: The Complete Book on AngularJS
کتاب ng-book: The Complete Book on AngularJS راه حل هایی که برای حرفه ای شدن در AngularJS نیاز است را در خود دارد. AngularJS یک فریمورک حرفه ای front-end است که توسط تیمی در گوگل انتشار یافته است و شما را قادر می‌سازد تا یک تجربه‌ی غنی front-end را ساده و به سرعت ایجاد کنید. 
طبق بررسی‌های شخصی بنده واقعا این کتاب کامل‌ترین مرجع شناخته شده برای AngularJS به حساب می‌آید و حجم 600 صفحه ای آن گواهی بر این مدعاست. تمام موارد این framework را پوشش داده است؛ حتی مباحثی از قبیل SEO Optimization و Animation و ...
طبق گفته‌ی نویسنده اگر می‌خواهید که در AngularJS حرفه ای شوید حتما این کتاب را مطالعه کنید!
دریافت کتاب مرجع ng-book: The Complete Book on AngularJS
‫۱۰ سال و ۹ ماه قبل، سه‌شنبه ۱ بهمن ۱۳۹۲، ساعت ۲۰:۱۷
وحید نصیری وحید نصیری
نظرات مطالب
کنترل دسترسی‌ها در Angular با استفاده از Ng2Permission
این خطا عنوان کرده که با فرمت استاندارد «ایجاد پروژه‌ی «کتابخانه» توسط Angular CLI 6.0» سازگاری ندارد. بهتر است با توجه به سورس باز بودن پروژه، این فرمت خاص را ایجاد کنید و به عنوان یک pull request جدید ارسال نمائید:
‫۶ سال و ۱ ماه قبل، شنبه ۳ شهریور ۱۳۹۷، ساعت ۱۷:۰۴