در این مقاله با Angular 4.0 Kickstarter همراه با مثال آشنا خواهیم شد و تغییرات نسخه های مختلف را برای شما کاربران گرامی توضیح خواهیم داد و دید کلی نسبت به این نسخه از Framework پیدا خواهیم کرد.

برای شروع مطالبی را که راجب Angular.js 4.0 لازم است که بدانید:

به نقل از یکی از بیانیه ها : Angular.js 4.0 یک باز نویسی کامل از Angular.js 2 نیست.

همراه با انتشار angular 4.0 در ماه مارس 2017، اگر شما بعنوان یک برنامه نویس با Angular.js Famework کار کرده باشید، قبلا اگر که قصد داشتید که این فریم ورک را آموزش ببینید حتما نیاز بود تا تمام مطالبی که از Angular.js 1.0 تا Angular.js.2 وجود داشت را فرا بگیرید. زیرا فقط بدلیل اینکه Angular.js 2 یک باز نویسی کامل از Angular.js1  بوده و هست.اما این مورد درباره ی Angular.js 4.0 صدق نمیکند.زیرا این فریم ورک یک بازنویسی کامل از Angular.js.2 نیست.و در این کتابخانه ی جدید هسته اصلی تغییر پیدا کرده است همچنین نیازهای مفهومی این نسخه تغییر کرده است،به زودی کاربران از Angular.js 2 ناراضی خواهند شد  به تازگی اخباری مبنی بر انتشار نسخه Angular.js 4.5 در آینده منتشر خواهد شد.

در واقع  تغییرات این نسخه منجر به ازکار افتادن تمام کدهای شما نمی شود بستگی دارد به نوع آنها، و همچنان در این نسخه قابلیتهایی هستندکه هنوز قابل استفاده اند، اما به زودی از نسخهای جدید Angular.js پاک خواهند شد.

چرا ابتدا Angular.js 4.0 ارائه شد و نه Angular.js 3.0 ...!؟

اگر به اندازه ی زیادی کنجکاو هستی که بدانید چرا ابتدا نسخه ی 4 ارائه شده است باید بگوئیم که طبق مطالب گفته شده ی بالا قصد بر این بوده است که این نسخه را تنها نسخه ای معرفی کنند که از نسخه قبلی پیروی نمی کند و نیاز به استفاده از نسخه های قبلی نیست. منابع کتابخانه های این نسخه درGitHub(شبکه اشتراک مخصوص برنامه نویسان)وجوددارد.در تمام آنها از همان روش نگارش یکسان استفاده شده است اما با عنوانی مختلف که در NPM (ابزاری است برای مدیریت ماژول های Node.js ) ارائه شده اند.

وباتوجه به تصویر بالا و این چیدمان بی نظم در مسیر بسته ها، این تیم تصمیم گرفت تا یک روش مستقیم را برای Angular.js  4.0 انتخاب کند. در این مسیر تمام هسته ی پکیج ها بسیار ساده مرتب شده اند، تا برای نگهداری و ارائه ی نسخه های بعدی مشکلی وجود نداشته باشد.

چطور بروزرسانی کنیم Angular-cli؟(مختص مک و لینوکس)

[sudo] npm uninstall -g @angular/cli or angular-cli
npm cache clean
[sudo] npm install -g @angular/cli

sudo is only required for [mac/linux user]

 آیا امکانات و یا ویژگی های جدیدی در این نسخه وجود دارد ؟

*ngif

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

    [code language=”html”]  
    <button (click)="value=!value">Toggel Button</button>  
      
    <h1 *ngIf="value" >shows if value is true</h1>  
    <h1 *ngIf="!value" >shows if value is false</h1>  
      
    <h1>New Way to write if else in angular4.x</h1>  
    <p>but that doesn't mean older way will not work.   
    It still can work with new version of angular but that will deprecate soon</p>  
    <button (click)="value=!value">Toggel Button</button>  
      
    <h1 *ngIf="value; else falseBlock" >True block</h1>  
    <ng-template #falseBlock>  
    <h1>false Block</h1>  
    </ng-template>  
   [/code]  

اجرا و یا ارائه ی دوم (Renderer2)

در نسخه های قبل فقط یک روش اجراءشدن یا همان (Renderer) وجود داشت

که از هسته ی Angular.js وارد شده بود، ولی در حال حاضر روش اجراء جدیدی ارائه شده است با نام  (Renderer2) که این روش نیز به هسته Angular.js وارد شده است.

در ابتدای مسیر (روش اجرا شدن یا نحوه ی استفاده از Renderer): 

    [code language=”typescript”]  
      
    import { Component,Renderer2 } from '@angular/core';  
      
    @Component({  
        selector:'app-root',  
        template:``  
      
    })  
    export class AppComponent{  
        value=true;  
        constructor(private renderer:Renderer2){  
      
        }  
        onChangeBackground(element:HTMLElement){  
            this.renderer.setStyle(element,'background-color','blue');  
      
        }  
    }  
      
    [/code]   

مسیر جدید (در حال حاضر روش اجرا شدن یا نحوه ی استفاده از Renderer2): 

[code language=”typescript”]  
  
import { Component,Renderer2 } from '@angular/core';  
  
@Component({  
    selector:'app-root',  
    template:``  
  
})  
export class AppComponent{  
    value=true;  
    constructor(private renderer:Renderer2){  
  
    }  
    onChangeBackground(element:HTMLElement){  
        this.renderer.setStyle(element,'background-color','blue');  
  
    }  
}  
  
[/code]

روش اعتبار سنجی ایمیل:

درگذشته ما می توانستیم با یک الگوهای خاصی، اعتبار سنجی و یاهمان درستی  آدرس ایمیل وارد شده را بررسی کنیم ولی در این نسخه ما می توانیم به سادگی از یک اعتبار سنجی مختص آدرس ایمیل استفاده کنیم.

روش قدیمی برای اعتبار سنجی ایمیل:

    [code language=”html”]  
    <input type="email" name="email" required   
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />  
    [/code]  

روش جدید برای اعتبارسنجی ایمیل:

[code language=”html”]  
  
<input type="email" name="email" required   
email />  
  
[/code] 

همانطور که گفته شد بسته ی انمیشن در حال وارد شدن به  Angular.js می باشد و می توان آن را به هسته برنامه اضافه کرد.

روش وارد کردن بسته ی انیمیشن در گذشته:

    import { Component,Renderer,animate,state,style,transition,trigger } from '@angular/core';  

روش وارد کردن بسته ی انیمیشن در حال حاضر:

import { Component,Renderer2 } from '@angular/core';  
import { animate,state,style,transition,trigger } from '@angular/animations';

همانطور که مشاهده می کنید برای برنامه نویسان تغییرات آنچنانی در کدها وجود ندارد، که ملزم به تغییر کلی ساختار برنامه و یا مقدار کدها یا اینکه عملکرد آن بشود.

آموزش angular