Today, after six RC releases, Angular releases 4.0.0. This release is an update to the main version (following the adoption of semantic versions), and for the most part, Angular4.0 is backward compatible with Angular2.0.

So what are the major updates in this Angular4 release?

  • Angular applications are getting smaller and faster, and the framework will be further improved in the coming months.
  • The better templating engine improves AoT, reducing the size of the generated code by about 60%. The more complex the template, the more code will be optimized. (Translator’s note: Of course, this is completely transparent to the user, and the public API has not changed.)
  • The animation module improvement separates animation from @Angular /core, separates core module from animation module, and reduces core module size.

Let’s take a look at what Angular4 brings to the table.

  • Several useful changes have been made to the enhanced ngIf and ngFor syntax template binding syntax. You can now use if/else style syntax and assign local variables, such as when expanding an Observable.

    <div *ngIf="userList | async as users; else loading"> <user-profile *ngFor="let user of users; count as count" [user]="user"> </user-profile> <div>{{count}} total users</div> </div> <ng-template #loading>Loading... </ng-template>Copy the code

  • Server rendering (Angular Universal) The original Angular Universal was maintained by the community and adopted by Angular. Currently in version 4.0.0, most of the code is integrated into the @angular/platform-server module. To bring you a better server-side rendering experience, simpler Api calls. See angular4-based server rendering demo: github.com/z827101859/… . Later, officials will bring you better and more comprehensive examples.

  • Angular has been updated to newer versions of TypeScript with improved NGC speed and better type checking.
  • When something in a template goes wrong, Angular generates Source Maps that provide meaningful context for the original template.

More content, please see presents the original official: angularjs. Blogspot. Hk / 2017/03 / ang…

Finally, there is an Angular4 template project for those who want to learn Angular. The project is packaged with WebPack and contains many new features in the current Angular framework.Github.com/ntesmail/an…
  1. git clone [email protected]:ntesmail/angular-webpack-template.git
  2. NPM install (for reasons you understand, this step may fail to install and everyone will have to climb the wall)
  3. npm run start

Please reprint @sweetyx