من شخصاً اطمینان ندارم که همهٔ زبانهای CLI از همین Collectionها استفاده کنند و البته این نمودار با Syntax سیشارپ بود به همین دلیل سیشارپ نوشته بودم با این حال آن را به Collectionهای CLI تبدیل کردم.
اشتراکها
نگاهی به Duende IdentityServer 5
Securing your application is bloody important. With so much jargon to sift through, it’s easy to get lost, for example there’s SSO, OAuth2, SAML 2.0, OpenID Connect, Federated Identity, 2FA, & MFA. Just to name a few! 😱 In this talk, Anthony will take an in depth look at Federated Identity using OpenID Connect and OAuth2 Framework for ASP. NET Core using Duende IdentityServer (aka IdentityServer 5). You will walk away knowing how to navigate the security options and avoid the madness.
نظرات مطالب
Vue.js - نصب و راهاندازی اولیه - قسمت اول
نکته تکمیلی:
به
تغییر نموده.
The package name changed from
میتوان از طریق npm ساختار و تمپلیتهای اولیه برنامه ای مبتنی بر Vue.js را دریافت کرد.
در ورژن جدید دستور
npm install -g vue-cli
npm install -g @vue/cli
The package name changed from
vue-cli
to @vue/cli
. بعد از نصب cli با دستور
vue create my-app
اشتراکها
Visual F# Tools 3.1.1 منتشر شد.
تغییر loadChildren در نسخه 8
در نسخه 8، استفاده از syntax رشتهای برای loadChildren در lazy loading، منسوخ شدهاست:
const routes: Routes = [{ path: 'lazy', // The following string syntax for loadChildren is deprecated loadChildren: './lazy/lazy.module#LazyModule' }];
const routes: Routes = [{ path: 'lazy', // The new import() syntax loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }];
import مجزای componentهای Material
اگر ازAngular Material استفاده میکنید باید Component های مورد استفاده را بطور مجزا import کنید. به عنوان مثال اگر از button استفاده کردهاید، باید @angular/material/button را import کنید . البته در اینجا نیز دستور ng update این کار را بطور خودکار انجام میدهد.
بهبود CLI با تولید بستههای متفاوت ES 5 و ES 6
در نسخه 8، دستور build ارائه شده توسط CLI میتواند دو خروجی متفاوت با ES2015 مخصوص مرورگرهای جدید را با حداقل polyfills و ES5 سازگار با مرورگرهای قدیمی را بدهد. در صورتی که بخواهیم build سازگاری با نسخههای قدیمی داشته باشیم، میتوانیم گزینه target در فایل tsconfig.json را به ES5 تغییر دهیم.
برای بروزرسانی پروژههای جاری خود میتوانید از ابزار کمکی ارائه شده توسط تیم angular استفاده کنید.
روش فعالسازی کامپایلر جدید Angular
برای ساخت پروژهای با قابلیت استفاده از ivy compiler میتوانیم از دستور زیر استفاده کنیم:
ng new angularProjectName --enable-ivy
توجه داشته باشید نیاز است nodejs نسخه 10.9 یا 10.9 به بعد نصب باشد.
پس از ساخت پروژه قسمتی با نام angularCompilerOptions در فایل tsconfig.json مشاهد میشودکه نشان دهندهی فعال بودن کامپایلر ivy است:
"angularCompilerOptions": { "enableIvy": true }
نظرات مطالب
شروع کار با Angular Material ۲
از نسخه 2.0.beta-11، ماژول MaterialModule حذف شده است. این ماژول تمامی کامپوننتهای پیاده سازی شده را جهت استفاده وارد میکرد. از این نسخه به بعد بایستی کامپوننتهای مورد استفاده یکی یکی وارد شوند. به عنوان مثال اگر در برنامه خود فقط از کامپوننت دکمه و چک باکس استفاده میکنیم، به شکل زیر عمل میکنیم.
به جهت جلوگیری از شلوغی ماژول اصلی برنامه بهتر است ماژول دیگری به شکل زیر تعریف کنیم که کامپوننتهای مورد استفاده در برنامه را مدیریت میکند و ماژول اصلی برنامه تنها از این ماژول استفاده خواهد کرد. (این روش در راهنمای استفاده از Angular Material Design به عنوان یک روش مطرح شده است.)
در این صورت کافی است در AppModule فقط MyOwnCustomMaterialModule را در قسمت imports ذکر کنیم.
import { MatButtonModule, MatCheckboxModule } from "@angular/material";
import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ imports: [MatButtonModule, MatCheckboxModule], exports: [MatButtonModule, MatCheckboxModule], }) export class MyOwnCustomMaterialModule { }
در بین توسعه دهندگان، خیلی رایج است، چند نسخه از Application خود را داشته باشند که Environmentهای مختلفی را مورد هدف قرار میدهد؛ مثل development که مربوط به حالت توسعه میباشد و production که مربوط به حالت ارائه نهایی است. هر Environment تعدادی متغیر منحصر بفرد خود را خواهد داشت؛ مثلAPI Endpoint ، app version و ... . انگیولار تنظیمات Environment را فراهم کرده است تا بتوانیم متغیرهای منحصر بفردی را برای هر Environment، تعریف کنیم.
اگر شما میخواهید به صورت خودکار یک flag را اعمال کنید، اجازه بدهید بگوییم prod-- ، در این حالت angular compiler متغیر API endpoint را با API endpoint مربوط به حالت ارائه نهایی برای شما جایگزین میکند. چیزی که شما نمیخواهید این است که به صورت دستی endpoint را قبل از build پروژه، تغییر دهید. این موضوع شانس دچار اشتباه شدن را کاهش میدهد.
Dealing with only 2 Environments
به صورت پیش فرض انگیولار از دو Environment پشتیبانی میکند. فایلهای Environment در دایرکتوری environment آن قرار دارند که در مسیر زیر میباشد:
داخل دایرکتوری src، در ریشه WorkSpace یا پوشه پروژه شما( آشنایی با مفهوم WorkSpace در انگیولار ).
در داخل دایرکتوری environment، دو فایل با نامهای environment.ts و environment.prod.ts وجود دارند. همانطور که ممکن است حدس زده باشید، فایل دوم برای حالت ارائه نهایی میباشد؛ در حالیکه فایل اول برای حالت توسعه است و همچنین به عنوان Environment پیش فرض نیز میباشد. Angular CLI compiler ، به صورت خودکار فایل اول را با فایل دوم، هر زمان که شما build را با prod-- انجام میدهید، جایگزین میکند:
ng build --prod
اگر فایل environment.ts را باز کنید، خصوصیت production به false تنظیم شده است؛ درحالیکه در environment.prod.ts خصویت production به true تنظیم شدهاست. همه متغیرها بر اساس Environment مشخصی، تفاوت ایجاد میکنند که به صورت مناسب باید در دو فایل قرار داده شوند:
// environment.ts environment variables export const environment = { production: false, APIEndpoint: 'https://dev.endpoint.com' }; // environment.prod.ts environment variables export const environment = { production: true, APIEndpoint: 'https://prod.endpoint.com' };
برای دستیابی به این متغیرها، environment را import کرده و از آن همانند زیر استفاده میکنیم:
import { environment } from './../environments/environment';
که به صورت زیر از آن استفاده میشود:
const APIEndpoint = environment.APIEndpoint;
Dealing with 3 or More Environment
این موضوع خیلی رایج است که برای Application های خود، بیش از دو Environment داشته باشیم. ممکن است که شما نیاز داشته باشید به:
staging environment ، beta environment ، production environment ، development environment و ... . انگیولار یک راه را برای ما فراهم کرده است که به صورت دستی Environmentهای بیشتری را که ممکن است نیاز داشته باشیم، اضافه کنیم. در اینجا ما نیاز به دو Environment دیگر به نامهای staging و beta داریم. کار را با ایجاد کردن دو فایل دیگر در کنار environment های موجود شروع میکنیم:
1-environment.staging.ts
2-environment.beta.ts
سپس هر کدام از آنها را به صورت زیر ویرایش میکنیم:
// environment.staging.ts environment variables export const environment = { production: true APIEndpoint: "https://staging.endpoint.com" }; // environment.beta.ts environment variables export const environment = { production: true, APIEndpoint: "https://beta.endpoint.com" };
در ادامه نیاز است در فایل angular.json، تنظیمات را تغییر دهیم ( که در ریشه Workspace میباشد) . با انجام اینکار، این امکان به Angular CLI داده خواهد شد که دو environment جدید ایجاد شده را شناسایی و در صورت نیاز از آنها استفاده کند.
در ابتدا فایل angular.json را باز میکنیم و کلید configurations را مییابیم که در مسیر زیر میباشد:
projects -> yourappname -> architect -> build -> configurations
"configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "serviceWorker": true } }
سپس از کلید production و تنظمیات درون آن، یک نمونه تهیه میکنیم و در زیر کلید production قرار میدهیم. سپس کلید production را به staging تغیر میدهیم. در قسمت fileReplacements مقدار کلید with را از
"with":"src/environments/environment.prod.ts"
"with":"src/environments/environment.staging.ts"
اکنون تنظیمات جدید شما برای staging environment باید به صورت زیر باشد:
"configurations": { "production": { // ... }, "staging": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.staging.ts" }], "optimization": true, "outputHashing": "all", "sourceMap": true, "extractCss": false, "namedChunks": false, "aot": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "serviceWorker": true } }
در ادامه همین روال را برای beta environment هم تکرار کنید.
نکته
ممکن است شما نیاز داشته باشید تا تنظیمات بالا را به حالتی دقیقتر نسبت به environment مورد نظر اصلاح کنید. مثلا ممکن است نیاز داشته باشید، Service worker را در حالت staging فعال نگه دارید و در حالت beta آن را غیر فعال کنید که این تضمین میکند وقتی ریفرش انجام میشود، app ، Service worker و منابع مربوط به آن را در مرورگر کش نکرده باشد.
Building your App
در نهایت برای build کردن application خود با environmentهای سفارشی ایجاد شده، میتوانید از پرچم configurations-- استفاده کنید؛ همانند زیر:
//for staging environment ng build --configuration=staging //for beta environment ng build --configuration=beta
و در نهایت برای استفاده کردن از environment پیش فرض، استفاده از دستور زیر به تنهایی کافی میباشد:
//for production environment ng build --prod //for dev environment ng build
اکنون شما میتوانید پروژه انگیولار خود را با هر تعداد environment ای که دوست دارید، configure کنید.
اشتراکها
Angular 2 نسخهی 2.0.0-rc.0 منتشر شد
- To import various symbols please adjust the paths in the following way:
- angular2/core -> @angular/core
- angular2/compiler -> @angular/compiler
- angular2/common -> @angular/common
- angular2/platform/browser -> @angular/platform-browser (applications with precompiled templates) + @angular/platform-browser-dynamic (applications that compile templates on the fly)
- angular2/platform/server -> @angular/platform-server
- angular2/testing -> @angular/core/testing (it/describe/..) + @angular/compiler/testing (TestComponentBuilder) + @angular/platform-browser/testing
- angular2/upgrade -> @angular/upgrade
- angular2/http -> @angular/http
- angular2/router -> @angular/router-deprecated (snapshot of the component router from beta.17 for backwards compatibility)
- new package: @angular/router - component router with several breaking changes