What is Angular 4 and from where I can learn more about it?

JavascriptAngular

Javascript Problem Overview


Recently someone told me about Angular 4, what is it? How is it different from Angular 2? I am learning Angular 2. I tried to find the official website of Angular 4 but I didn't get the result. I am very curious about it.

EDIT

Angular 4 website is now available here.

EDIT 2

Angular 5 (beta) is now available here.

EDIT 3

Angular 5 is now available here, the changes are available here

EDIT 4

Angular 6 is now available here.

EDIT 5

Angular 7 is now available.

EDIT 6

Angular 8 is now available here.

For updates and new features, please visit Angular blog post for version 8

Edit 7

Angular 9 documentation can be found here https://next.angular.io/docs

For updates and new features, please visit Angular blog post for version 9

Javascript Solutions


Solution 1 - Javascript

Angular 4 is just a newer version of Angular than Angular 2.

Angular 2.x.x, and Angular 4.x.x are also named Angular, while the previous version (1.x.x) is named AngularJS.
This name difference indicates that there are major differences, while Angular 4.x.x is only a newer version of Angular than Angular 2.x.x is.

Angular uses semantic versioning since Angular 2, which requires the major number being increased when breaking changes were introduced.

The Angular team postponed features that cause breaking changes, which will be released with Angular 4.

Angular version 3.x.x was skipped to be able to align the version numbers of the core modules, because the Router already had version 3.

To see what changes will be introduced in Angular4 see https://github.com/angular/angular/blob/master/CHANGELOG.md

See also this blog post http://angularjs.blogspot.co.at/2016/10/versioning-and-releasing-angular.html

Solution 2 - Javascript

1)What’s New?

1.1 Smaller & Faster

1.2 Animation Package

Pulled animations out of @angular/core and into their own package. This means that if you don’t use animations, this extra code will not end up in your production bundles.

2) New Features

2.0) View engine

The new view engine significantly improves the compilation step which results in smaller application size compared to earlier iterations.

2.1 Improved *ngIf and *ngFor You can now use an if/else style syntax, and assign local variables such as when unrolling 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>

2.2 Angular Universal

2.3 TypeScript 2.1 and 2.2 compatibility

2.4 Source Maps for Templates

Now when there is an error caused by something in one of your templates, it generate source maps that give a meaningful context in terms of the original template.

3) Packaging Changes

3.1 Flat ES Modules (Flat ESM / FESM)

This format should help tree-shaking, help reduce the size of your generated bundles, and speed up build, transpilation, and loading in the browser in certain scenarios.

3.2 Experimental ES2015 Builds

This option is experimental and opt-in. Developers have reported up to 7% bundle size savings when combining these packages with Rollup.

3.3 Experimental Closure Compatibility

making it possible to take advantage of advanced Closure optimizations, resulting in smaller bundle sizes and better tree shaking.

I got this information from this blog...... for more information refer here

Solution 3 - Javascript

What is Angular 4 ?

Angular 4 is an open source web development framework written and maintained by angular team at Google .

In order to embrace angular's capabilities better, let's look at some of the important points about angular.

  1. Angular 4 or simply Angular is the next logical version of Angular2 but it has nothing in common with Angular 1 also called AngularJS

  2. Angular is written in TypeScript and so it comes with all the capabilities that typescript offers

  3. Angular is also utilized in the cross platform mobile development framework called IONIC and so it's not limited to web apps only

To keep upgrading Angular , angular community has announced angular releases every 6 months

Here's the source for this answer and a beginner friendly tutorial on Angular 4 ::

Angular 4 Tutorial

Solution 4 - Javascript

These are the list of important changes in angular 4

  1. Skipping angular 3.0 to angular 4.0 so we can align core with the router which is already 3.0
  2. Compiler is faster compared to angular 2
  3. Some of the bugs which are in angular 2 are rectified in angular 4
  4. Else clause has been introduced enter image description here
  5. Render has been renamed to Renderer2 (Reason this was done is because under the hood there were lot of changes)

For more information -> http://www.prathapkudupublog.com/2017/04/important-changes-in-angular-4.html#more

Solution 5 - Javascript

Angular 2 there is no any path breaking changes. But yes there are some extra feature had come to make angular 4 more powerful framework.

  • Reduce the size of view engine :- There are more advanced change in AOT of angular so improve the compilation time. These changes also reduce almost 60% size of app.
  • Introduce new Pipe :- Angular 4 introduce new ‘titlecase’ pipe ‘|’ so using this pipe you can change the first later capital of any words.
  • ngIf and else :- Previously ‘ngIf’ is there but in angular 4 they also introduce ‘else’ so, now you can use if else block in html DOM.
  • As keyword :- Angular 4 introduce new keyword called ‘As’ for simplification of ‘let’ as previous defined
  • Animation packages :- Separate animation package from angular core. Now animation have their own package i.e. @angular/platform-browser/animations.
  • Rename Template :- Now template become ‘ng-template’. You should use ng-template tag instead of template.
  • Search params :- In angular 4 you can give search params in http request. This become easy to use.
  • New Form Validators :- There are many form validation given by angular 2 but there is one which is more concurrently use i.e. email validator. So now use email validator which is introduce in angular

Solution 6 - Javascript

Angular 2 is modern it takes advantages of features provided in the latest javascript standards and some beyond such as classes, API modules & decorators.yet it supports legacy browsers.Angular 2 has a simplifiAPIit has fewer built-in directives to learn, simpler binding.

They are not releasing Angular 3 because as they follow semantic versioning all of the libraries in github repository of Angular are versioned the same way, i.e 2.4.9 but Due to misalignment of the angular router package’s version, the team decided to go straight for Angular v4.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionArpit KumarView Question on Stackoverflow
Solution 1 - JavascriptGünter ZöchbauerView Answer on Stackoverflow
Solution 2 - JavascriptJose KjView Answer on Stackoverflow
Solution 3 - JavascriptRishabh.IOView Answer on Stackoverflow
Solution 4 - JavascriptPrathap KudupuView Answer on Stackoverflow
Solution 5 - JavascriptSimranView Answer on Stackoverflow
Solution 6 - JavascriptDivyanshu RawatView Answer on Stackoverflow