Angular 4 | Introduction

Angular 4 was released 5 years after the official release of AngularJS. Between these two versions, Angular 2 was introduced which was a complete re-write of AngularJS. The ‘MVC’ architecture of AngularJS was discarded a new ‘service-controller’ architecture was introduced in Angular 2. After Angular 2 came Angular 4 which was much more efficient than its predecessor. However, the architecture used in both the versions was the same and thus upgrading the project from v2 to v4 was comparatively easier, than upgrading from JS to v2.
Angular 3 was skipped because the router package was already in version 3.3.0. To avoid any further glitches, the team decided to skip v3.x and upgrade all the other modules directly to v4.0. The angular 4 initially release in March 2017.

Features:

  • Architecture: MVC architecture of AngularJS was replaced by a ‘service-controller’ architecture.
  • View Engine: The view engine helps in reducing the component code by 60%. This makes the application lightweight as the bundles are reduced in size by several kilobytes.
  • Animation: Animation now has a separate package. Animation can also be imported from the BrowserAnimationsModule from @angular/platform-browser/animations.
  • Typescript: Angular 4 uses Typescript v2.2. Typescript is considered to be the superset of Javascript.
  • New Keywords: Some new keywords like ‘as’ was introduced. This is generally used to store the output of a slice or a command in some variable. The ‘else’ condition was also introduced in Angular 4. The introduction of the ‘if-else; looping condition helped in code condensation.
    • Use of ‘as’ keyword:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <div *ngFor="let j of weeks | slice:0:5 as num">
         Months: {{j}} Num: {{num.length}}
      </div>

      chevron_right

      
      

    • Use of ‘if-else’ condition in Angular 4: The ‘ngIf’ outputs ‘Valid Condition’, whereas the ‘else’ condition outputs ‘Invalid Condition’.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <span *ngIf="isavailable; else condition1">
      Valid Condition.</span>
      <ng-template #condition1>
      Invalid Condition</ng-template>

      chevron_right

      
      

  • Mobile Support: Angular 4 is supported by almost every modern day mobile browser.
  • HTTP Search Parameter: There is no need to call the URLSearchParams for the HTTP search parameter.
  • Compatibility with the previous version: Angular 4 is compatible with Angular 2 and AngularJS. Projects developed in Angular 2 will work without any problem in Angular 4.
My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.