ساده شدهی این قسمت در اینجا: سری آموزشی Angular CLI
ساده شدهی این قسمت در اینجا: سری آموزشی Angular CLI
تب Script در FireBug مخصوص دیباگ کردن کدهای JavaScript است. امکاناتی که در این قسمت گنجانده شده بسیار کاربردی بوده و همچنین در بیشتر قسمتها با ابزارهای خطایابی دیگر مشابه است. برای مثال اگر با Visual Studio کار کرده باشید، با نحوهی ایجاد Break Point ، قسمتهای Watch,Stack و ... آشنا خواهید بود.
این پنل هم مشابه پنلهای دیگر فایرباگ دارای یک بخش با عنوان Options Menu هست که با راست کلیک کردن بروی عناون یا کلیک بروی مثلث کنار عنوان پنل قابل دسترسی است. تنظیماتی که در اینجا قابل تعیین است عبارتند از:
Panel Toolbar
نواری است که ابزارهای پنل بروی آن قرار دارند و به ترتیب عبارنتد از:
Context Menu
تنها قابلیت جدیدی که در این منو وجود دارد، Run To This Line است. هنگامی که پنل در حالت دیباگ است، با راست کلیک کردن بروی خط مورد نظر و انتخاب گزینهی Run to This Line میتوانید خطوط میانی را رد کرده و به خط مورد نظر بروید. البته خطوطی که رد میشوند ، اجرا میشوند.
این کار معادل این است که درخط مورد نظر یک Break Point اضافه کنید و دکمهی F8 را بزنید.
Breakpoints
توسط Break Pointها میتوانید خطوطی از برنامه را برای خطایابی مشخص کنید. زمانی که دیباگر به نقطهی مورد نظر برسد متوقف شده و میتوانید به بررسی برنامه بپردازید. میتوانید با بردن موس بروی متغییرها مقدار آن هارا بررسی کنید یا با کمک قسمتهای Watch و Stack در پنل جانبی اطلاعات بیشتری در مورد اجرای برنامه در نقطهی جاری بدست آورید.(در مورد پنلهای جانبی در قسمت بعدی توضیح خواهم داد.) همچنین با کمک دکمه هایی که در جدول فوق توضیح داده شده اند روند اجرای برنامه را خط به خط ادامه دهید.
برای ایجاد یک Break Point، بروی شمارهی خط مورد نظر کلیک کنید. نقطه ای قرمز رنگ نمایش داده خواهد شد. البته دقت کنید که همهی خطوط برنامه اجرا نمیشوند و نمیتوانید در آن خطوط از این امکان بهره ببرید. شمارهی خطوط فعال با رنگ سبز مشخص شده اند.
امکان مفید دیگری که همراه با این قابلیت ارائه شده است (که در محیطهای دیگر هم وجود دارد)، عبارت شرطی است. به این صورت که ضمن قرار دادن Break Point در یک نقطه از برنامه، میتوانید یک شرط هم برای توقف برنامه تعیین کنید.
فرض کنید یک حلقه دارید که 300 بار تکرار میشود و مثلا در اجرای 250ام آن مشکلی وجود دارد. در این حالت میتوانید از این قابلیت استفاده کنید و شرط توقف را i == 250 قرار بدهید.
برای تعیین یک شرط برای یک Break Point، بروی خط مورد نظر راست کلیک کنید و شرط را در قسمت مشخص شده وارد کنید.
امکان مفید دیگری که وجود دارد، Break Point خودکار است. اگر از مقالات قبلی دکمهی Break On All Errors در پنل Console و Break On Mutate در پنل HTML را بخاطر داشته باشید میدانید که در هر یک هنگام اجرای یک رخداد مورد نظر، دیباگر در خطی که موجب آن رخداد شده است متوقف شده و میتوانید کنترل برنامه را بدست بگیرید. در این حالت نیازی به ایجاد Break Point نیست و FireBug بصورت خودکار این کار را انجام میدهد.
Search
این بخش در همه پنلها وجود دارد با این تفاوت که در پنل Script و CSS دو گزینهی Multiple Files و Use Regular Expression وجود دارد که به ترتیب امکان جستجو در فایلهای js و css اضافه شده به صفحه هستند. قابلیت دیگری هم که فقط در پنل Script وجود دارد، پرش به یک خط در برنامه است به این صورت که با وارد کردن # و یک عدد به عنوان شمارهی خط، همان خط نمایش داده میشود.
در قسمت بعدی پنل جانبی که شامل سه بخش Watch، Stack و Breakpoints است را بررسی خواهیم کرد.
این پنل هم مشابه پنلهای دیگر فایرباگ دارای یک بخش با عنوان Options Menu هست که با راست کلیک کردن بروی عناون یا کلیک بروی مثلث کنار عنوان پنل قابل دسترسی است. تنظیماتی که در اینجا قابل تعیین است عبارتند از:
- Enabled/Disabled : برای فعال/غیرفعال کردن پنل است. فعال بودن این قسمت ممکن است موجب کاهش سرعت بارگزاری صفحات شود.
- Track Throw/Catch : در صورت فعال بودن این گزینه، در صورت رویدادن خطا در بلاک try/catch ، دیباگر در آن نقطه از برنامه متوقف شده و کنترل برنامه به شما داده میشود. (البته بنده موفق بررسی کامل این قابلیت نشدم. ظاهرا ورژنهای آخری باگ دارند. مثل غیرفعال شدن کامل همین پنل، "Debugger not activated"! اگر کسی موفقیتی در کار با این مورد داشت، سپاسگذار میشوم اطلاع بدهد.)
- Show Break Notifications : در صورت فعال بودن این گزینه، هنگام توقف کدی در صفحه، اطلاعاتی در مورد علت توقف آن در بالای پنل ارائه خواهد شد.
Panel Toolbar
نواری است که ابزارهای پنل بروی آن قرار دارند و به ترتیب عبارنتد از:
- Break On Next : این دکمه که مشابه آن در اکثر پنلها وجود دارد، هنگام اجرای یک دستور JavaScript آن را متوقف کرده و شما میتوانید به بررسی آن بپردازید.
- Script Type Menu : با انتخاب یکی از چهار گزینه موجود میتوانید نتیجه اسکریپتهای اضافه شده به صفحه که در قسمت Script Location Menu نمایش داده شده اند را فیلتر کنید. (متاسفانه این گزینه هم مشابه گزینه Track Throw/Catch برای بنده، ورژن 1.11.4 نتیجه ای نداشته است.)
- Script Location Menu : در این قسمت اسکریپت هایی که در صفحه وجود دارند نمایش داده میشوند. مشابه پنل HTML میتوانید هنگام بازبودن این لیست، با تایپ کردن نتایج را فیلتر کنید.
همچنین با راست کلیک کردن بروی این قسمت میتوانید آیتم یا فایل انتخاب شده را در ادیتور مورد نظر باز کنید، در پنل DOM بررسی کنید، فایل را در یک تب جدید باز کنید، آدرس فایل را در حافظه موقت کپی کنید. - Execution Control Buttons : این دکمهها زمانی که دیباگر به یک Break Point برسد یا به دلیل فعال بودن دکمههای Break On ... متوقف شود، فعال میشوند و با کمک آنها میتوانید عملیات خطایابی را ادامه دهید.
در جدول زیر این دکمهها و توضیحات تکمیلی هریک را مشاهده میکنید:نوع دکمه Shortcut توضیحات اجرای مجدد Shift + F18 Stack فعلی را مجدد اجرا میکند.
(Stack: لیستی از توابع به ترتیبی که با فراخوانی آنها تابع جاری فراخونی شده است. در مقاله بعدی توضیحات بیشتری ارائه خواهد شد.)ادامه F8 اجرای برنامه را (تا Break Point بعدی) ادامه میدهد. وارد شدن F11 در صورت رسیدن به یک تابع، با زدن این دکمه دیباگر وارد بندهی آن تابع میشود. رد شدن F10 اجرای برنامه را در سطح (Scope) فعلی ادامه میدهد.
مشابه قبلی وارد تابع نمیشود.خارج شدن Shift + F11 کنترل به تابعی که تابع جاری را فراخوانی کرده است بازمیگردد.
روشی سودمند زمانی که هنگام خطایابی وارد کدهای jQuery یا مثل آن میشوید :)
Context Menu
تنها قابلیت جدیدی که در این منو وجود دارد، Run To This Line است. هنگامی که پنل در حالت دیباگ است، با راست کلیک کردن بروی خط مورد نظر و انتخاب گزینهی Run to This Line میتوانید خطوط میانی را رد کرده و به خط مورد نظر بروید. البته خطوطی که رد میشوند ، اجرا میشوند.
این کار معادل این است که درخط مورد نظر یک Break Point اضافه کنید و دکمهی F8 را بزنید.
Breakpoints
توسط Break Pointها میتوانید خطوطی از برنامه را برای خطایابی مشخص کنید. زمانی که دیباگر به نقطهی مورد نظر برسد متوقف شده و میتوانید به بررسی برنامه بپردازید. میتوانید با بردن موس بروی متغییرها مقدار آن هارا بررسی کنید یا با کمک قسمتهای Watch و Stack در پنل جانبی اطلاعات بیشتری در مورد اجرای برنامه در نقطهی جاری بدست آورید.(در مورد پنلهای جانبی در قسمت بعدی توضیح خواهم داد.) همچنین با کمک دکمه هایی که در جدول فوق توضیح داده شده اند روند اجرای برنامه را خط به خط ادامه دهید.
برای ایجاد یک Break Point، بروی شمارهی خط مورد نظر کلیک کنید. نقطه ای قرمز رنگ نمایش داده خواهد شد. البته دقت کنید که همهی خطوط برنامه اجرا نمیشوند و نمیتوانید در آن خطوط از این امکان بهره ببرید. شمارهی خطوط فعال با رنگ سبز مشخص شده اند.
امکان مفید دیگری که همراه با این قابلیت ارائه شده است (که در محیطهای دیگر هم وجود دارد)، عبارت شرطی است. به این صورت که ضمن قرار دادن Break Point در یک نقطه از برنامه، میتوانید یک شرط هم برای توقف برنامه تعیین کنید.
فرض کنید یک حلقه دارید که 300 بار تکرار میشود و مثلا در اجرای 250ام آن مشکلی وجود دارد. در این حالت میتوانید از این قابلیت استفاده کنید و شرط توقف را i == 250 قرار بدهید.
برای تعیین یک شرط برای یک Break Point، بروی خط مورد نظر راست کلیک کنید و شرط را در قسمت مشخص شده وارد کنید.
امکان مفید دیگری که وجود دارد، Break Point خودکار است. اگر از مقالات قبلی دکمهی Break On All Errors در پنل Console و Break On Mutate در پنل HTML را بخاطر داشته باشید میدانید که در هر یک هنگام اجرای یک رخداد مورد نظر، دیباگر در خطی که موجب آن رخداد شده است متوقف شده و میتوانید کنترل برنامه را بدست بگیرید. در این حالت نیازی به ایجاد Break Point نیست و FireBug بصورت خودکار این کار را انجام میدهد.
Search
این بخش در همه پنلها وجود دارد با این تفاوت که در پنل Script و CSS دو گزینهی Multiple Files و Use Regular Expression وجود دارد که به ترتیب امکان جستجو در فایلهای js و css اضافه شده به صفحه هستند. قابلیت دیگری هم که فقط در پنل Script وجود دارد، پرش به یک خط در برنامه است به این صورت که با وارد کردن # و یک عدد به عنوان شمارهی خط، همان خط نمایش داده میشود.
در قسمت بعدی پنل جانبی که شامل سه بخش Watch، Stack و Breakpoints است را بررسی خواهیم کرد.
احتمالا این قطعه کد مستقیما از داخل سورس یکی از پروژههای شما بیرون آمده (مثال نیست؛ واقعی هست). میشد کمی اون رو refactor کرد مثلا یک متد از داخلش بیرون آورد که این متد داخلش مسیج باکس نباشه یا باز کردن یک صفحه دیالوگ و تغییر کرسر. try و catch هم نداشته باشه چون باید در یک سطح بالاتر catch بشه مشکلاتش. اون selectها مثلا میشدند چند پارامتر، برای اینکه این کد قابلیت استفاده مجدد بهتری پیدا کنه. یا مثلا اون sqlConnectionString از داخل کدها بیرون میاومد و میشد یک پارامتر جدید. نمایش کرسر هم داخل این متد قرار نمیگرفت. نام جدول نهایی هم مثلا یک پارامتر دیگر میشد برای سهولت استفاده مجدد و همچنین تست بهتر یک قطعه کوچک از کار. خود متد اصلی هم میشد دو متد کوچکتر؛ یکی کار load رو انجام میداد و دیگری کار insert سریع.
با پیشرفت HTML 5 و پدید آمدن چارچوبهای مختلف JavaScript توسعهی نرم افزارهای تک صفحه ای تحت وب (Single Page Applications) محبوب شده است.
اخیرا مطالب خوبی در رابطه با AngularJS در وبسایت جاری منتشر شده است. KnockoutJS توسط Microsoft معرفی شد و در قالب پیشفرض پروژههای SPA قرار گرفت ، بنابراین احتمالا این سوال برای افرادی مطرح شده است که تفاوت بین KnockoutJS و AngularJS چیست ؟
می توان پاسخ داد این مقایسه ممکن نیست.
KnockoutJS : یک پیاده سازی مستقل JavaScript از الگوی MVVM با امکانات Databinding میباشد. Knokcout یک کتابخانهی Databinding است نه یک کتاب خانهی SPA
AngularJS : طبق معرفی در این مطلب AngularJS فریم ورکی متن باز و نوشته شده به زبان جاوا اسکریپت است. هدف از به وجود آمدن این فریم ورک، توسعه هر چه سادهتر SPAها با الگوی طراحی MVC و تست پذیری هر چه آسانتر آنها است. این فریم ورک توسط یکی از محققان Google در سال 2009 به وجود آمد. بعدها این فریم ورک تحت مجوز MIT به صورت متن باز در آمد و اکنون گوگل آن را حمایت میکند و توسط هزاران توسعه دهنده در سرتاسر دنیا، توسعه داده میشود.
بنابراین شاید بهتر باشد ذکر شود AngularJS یک Presentation Framework مخصوص برنامههای وب تک صفحه ای میباشد در حالی که KnockoutJS کتاب خانه ای با تمرکز بر Databinding میباشد ، بنابراین مقایسهی اینها چندان صحیح نیست.
اگر قصد بر بررسی گزینههای دیگر در کنار Angular باشد ، میتوان از Durandal نام برد. Durandal یک چارچوب SPA میباشد ، این چارچوب بر فراز jQuery ، RequireJS و Knockout توسعه پیدا کرده است. (سابقا برای routing از SammyJS استفاده میکرد که در نسخههای اخیر از موتور خودش استفاده میکند.)
Durandal از Knockout جهت Databinding و از RequireJS برای مدیریت وابستگیها استفاده میکند.
Angular همهی امکانات بالا را مستقل پیاده سازی کرده و حتی نیازی به jQuery ندارد. اگر jQuery وجود داشته باشد Angular از آن استفاده میکند در غیر این صورت از jQuery Lite یا jqLite استفاده میکند. jqLite پیاده سازی توابع متداول jQuery برای دستکاری DOM میباشد. اطلاعات بیشتر در اینجا
بنابراین با استفاده تنها از KnockoutJS نمیتوان یک برنامهی کامل SPA توسعه داد ، در کنار آن نیاز به کتابخانههای دیگری مثل jQuery برای مدیریت درخواستهای AJAX و استفاده از دیگر APIها ، Sammy برای routing و RequireJS برای مدیریت وابستگیها میباشد.
در Knockout و در نتیجه Durandal عمل Databinding به این صورت است :
// JavaScript var vm = { firstName = ko.observable('John') }; ko.applyBindings(vm);
<!-- HTML --> <input data-bind="value:firstName"/>
در Angular :
// JavaScript // Inside of a personController this.firstName = 'John';
در Angular همچنین از یک روش Controller As استفاده میشود :
<!-- HTML --> <div ng-controller="personController as vm"> <input ng-model="vm.firstName"/> </div>
اگر تنها نیاز به یک کتابخانهی Databinding باشد ، Knockout گزینهی مناسبی است ، به خوبی از عمل مقید سازی دادهها پشتیبانی میکند و Syntax خوش دستی دارد اما اگر نیاز به چارچوبی برای توسعهی پروژههای SPA میباشد میتوان از Angular یا Durandal استفاده کرد.
مقایسهی Knockout با Angular همانند مقایسهی موتور بنز با ماشین پورشه میباشد.
همانطور که در مطلب قبل دیدیم، با اضافه کردن style ها و فایلهای Javascript ای حجم صفحات خروجی رو به افزایش بودند. اولین راه بهینه سازی، استفاده از feature module است. میخواهیم هر زمان که به ماژولی نیاز داریم، آن را import و استفاده کنیم.
و
و فایل app.component.ts :
و محتویات فایل app.component.scss را پاک میکنیم.
در ادامه دو فایل زیر را برای استفاده از ماژولهای Angular Material و Kendo Angular UI در مسیر app\modules تعریف میکنیم.
// angular-material-feature.module.ts import { NgModule } from '@angular/core'; // Import angular kendo angular import { MatFormFieldModule, MatInputModule, MatButtonModule, MatButtonToggleModule, MatDialogModule, MatIconModule, MatSelectModule, MatToolbarModule, MatDatepickerModule, DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatTableModule, MatCheckboxModule, MatRadioModule, MatCardModule, fadeInContent, MatListModule, MatProgressBarModule, MatTabsModule } from '@angular/material'; import { MatSidenavModule, MatSlideToggleModule, } from '@angular/material'; import { MatMenuModule } from '@angular/material/menu'; @NgModule({ declarations: [ // KendoGridPaginationComponent ], imports: [ MatSidenavModule, MatSlideToggleModule, MatInputModule, MatFormFieldModule, MatButtonModule, MatButtonToggleModule, MatDialogModule, MatIconModule, MatSelectModule, MatToolbarModule, MatDatepickerModule, MatCheckboxModule, MatRadioModule, MatCardModule, MatMenuModule, MatListModule, MatProgressBarModule, MatTabsModule ], exports: [ MatSidenavModule, MatSlideToggleModule, MatInputModule, MatFormFieldModule, MatButtonModule, MatButtonToggleModule, MatDialogModule, MatIconModule, MatSelectModule, MatToolbarModule, MatDatepickerModule, MatCheckboxModule, MatRadioModule, MatCardModule, MatMenuModule, MatListModule, MatProgressBarModule, MatTabsModule ], providers: [ ] }) export class AngularMaterialFeatureModule { }
// kendo-feature.module.ts import { NgModule } from '@angular/core'; // Import kendo angular ui import { ButtonsModule } from '@progress/kendo-angular-buttons'; import { GridModule, ExcelModule } from '@progress/kendo-angular-grid'; import { DropDownsModule } from '@progress/kendo-angular-dropdowns'; import { InputsModule } from '@progress/kendo-angular-inputs'; import { DateInputsModule } from '@progress/kendo-angular-dateinputs'; import { DialogsModule } from '@progress/kendo-angular-dialog'; import { RTL } from '@progress/kendo-angular-l10n'; import { LayoutModule } from '@progress/kendo-angular-layout'; import { WindowService, WindowRef, WindowCloseResult, DialogService, DialogRef, DialogCloseResult } from '@progress/kendo-angular-dialog'; import { SnotifyModule, SnotifyService, SnotifyPosition, SnotifyToastConfig, ToastDefaults } from 'ng-snotify'; @NgModule({ declarations: [ ], imports: [ ButtonsModule, GridModule, ExcelModule, DropDownsModule, InputsModule, DateInputsModule, DialogsModule, LayoutModule, SnotifyModule, ], exports: [ ButtonsModule, GridModule, ExcelModule, DropDownsModule, InputsModule, DateInputsModule, DialogsModule, LayoutModule, ], providers: [ { provide: 'SnotifyToastConfig', useValue: ToastDefaults }, SnotifyService, // Enable Right-to-Left mode for Kendo UI components { provide: RTL, useValue: true }, ] }) export class KendoFeatureModule { }
از این پس، هر زمانیکه به ماژولی نیاز داریم، feature module آن را import میکنیم.
در ادامهی بهینه سازی، از قابلیت Lazy-Loading استفاده میکنیم و فایل های زیر را جهت پیاده سازی lazy-loading تغییر میدهیم.
محتویات فایل styles.scss را پاک میکنیم.
فایل app.module.ts :
// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserAnimationsModule, RouterModule, AppRoutingModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
// app.component.ts import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None, }) export class AppComponent { title = 'HowToKeepAngularDeploymentSizeSmall'; constructor() { } }
و فایل app.component.html :
// app.component.html <router-outlet></router-outlet>
و فایل app-routing.module.ts
// app-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', loadChildren: './projects/home/home.module#HomeModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
نکته 1: سعی کنید کامپوننتهای کمتری را به app.module.ts اضافه کنید.
نکته 2: stylesheetها را در ماژولهایی که به آنها نیاز دارند import کنید.
تا به اینجای کار، ماژول اصلی پروژه را سبک کردیم. حال میخواهیم صفحهی اول پروژه را به module ای به نام home، در مسیر app\projects\home مسیردهی کنیم.
home.module.ts :
// home.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {AngularMaterialFeatureModule , KendoFeatureModule} from '../../modules/index'; import {HomeRoutingModule } from './home.routing'; import { HomeComponent } from './home.component'; import { IndexComponent } from './pages/index/index.component'; import {LoginComponent } from './pages/login/login.component'; @NgModule({ declarations: [ HomeComponent, IndexComponent, LoginComponent ], imports: [ CommonModule, HomeRoutingModule, AngularMaterialFeatureModule ], providers:[ ], entryComponents:[ LoginComponent ] }) export class HomeModule { }
home.routing.ts :
// home.routing.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home.component'; import { IndexComponent } from './pages/index/index.component'; const routes: Routes = [ { path: "", component: HomeComponent, children: [ { path: "", component: IndexComponent, data: { breadcrumb: " Index " } }, { path: "about", loadChildren: "./pages/aboutus/aboutus.module#AboutusModule" }, { path: "blog", loadChildren: "./pages/blog/blog.module#BlogModule" }, { path: "blog-detail", loadChildren: "./pages/blogdetail/blogdetail.module#BlogdetailModule" }, { path: "pricing", loadChildren: "./pages/pricing/pricing.module#PricingModule" }, { path: "contact", loadChildren: "./pages/contact/contact.module#ContactModule" } ] } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) export class HomeRoutingModule { }
و فایل home.component.ts :
// home.component.ts import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { LoginComponent } from './pages/login/login.component'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], encapsulation: ViewEncapsulation.None }) export class HomeComponent implements OnInit { constructor( private dialog: MatDialog) { } ngOnInit() { } public toggleModal(){ let dialogRef = this.dialog.open(LoginComponent, { }); } }
و فایل home.component.scss :
// home.component.scss @import '../../../assets/home/css/themify-icons.css'; @import '../../../assets/home/css/font-awesome.min.css'; @import '../../../assets/home/css/set1.css'; @import '../../../assets/home/css/bootstrap.min.css'; @import '../../../assets/home/css/style.css'; @import "~@angular/material/prebuilt-themes/indigo-pink.css";
و فایل home.component.html :
// home.component.html <!--============================= HEADER =============================--> <div> <div> <div> <div> <div> <nav> <a href="index.html"><img src="../../../assets/home/images/logo.png" alt="logo"></a> <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div id="navbarNavDropdown"> <ul> <li> <a target="_blank" [routerLink]="['/dashboard']">Dashboard</a> </li> <li> <a [routerLink]="['/about']">About</a> </li> <li> <a [routerLink]="['/contact']">Contact</a> </li> <li> <a [routerLink]="['/pricing']">Pricing</a> </li> <li> <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Blog <span></span> </a> <div> <a [routerLink]="['/blog']">Blog Listing</a> <a [routerLink]="['/blog-detail']">Blog Detail</a> </div> </li> <li> <a (click)='toggleModal()' style="cursor: pointer;">Login</a> </li> <li><a href="add-listing.html"><span></span> Add Listing</a></li> </ul> </div> </nav> </div> </div> </div> </div> </div> <!--//END HEADER --> <router-outlet></router-outlet> <!--============================= FOOTER =============================--> <footer> <div> <div> <div> <div> <i aria-hidden="true"></i> <p>503 Sylvan Ave, Mountain View<br> CA 94041, United States</p> </div> </div> <div> <div> <img src="../../../assets/home/images/footer-logo.png" alt="#"> </div> </div> <div> <ul> <li><a href="#"><i aria-hidden="true"></i></a></li> <li><a href="#"><i aria-hidden="true"></i></a></li> <li><a href="#"><i aria-hidden="true"></i></a></li> <li><a href="#"><i aria-hidden="true"></i></a></li> <li><a href="#"><i aria-hidden="true"></i></a></li> </ul> </div> </div> <div> <div> <div> <p>Copyright © 2017 Listed Inc. All rights reserved</p> <a href="#">Privacy</a> <a href="#">Terms</a> </div> </div> </div> </div> </footer> <!--//END FOOTER -->
پروژه را با دستور ng serve --open --prod اجرا کرده و خروجی را بررسی میکنیم. حجم خروجی صفحه اول را همراه با قالبی از پیش طراحی شده در تصویر زیر میبینیم:
سورس کامل پروژه در HowToKeepAngularDeploymentSizeSmall قرار دارد.
اشتراکها