Angular v4.0 is out! #angular #webdevelopment #webdesign #frontenddesign #js #javascript…

  • The good news is that Angular 4 is almost exactly the same as Angular 2, from a developer’s point of view.
  • Upgrading is as simple as installing the new dependencies

    Igor Minar (who works on Angular) requests developers to stop calling it AngularJS,

    Angular2 and Angular4.

  • Everything after Angular 1 (which will now be referred to as AngularJS) is simply “Angular“.
  • The versions only denote Angular’s growth over time.
  • Let’s talk about some of the major improvements in the newer version of Angular 4.0

The good news is that Angular 4 is almost exactly the same as Angular 2, from a developer’s point of view. Most of the changes are “in” the framework. Upgrading is as simple as installing the new dependencies
Igor Minar (who works on Angular) requests developers to stop calling it AngularJS,
Angular2 and Angular4. Everything after Angular 1 (which will now be referred to as AngularJS) is simply “Angular“. The versions only denote Angular’s growth over time.

@yudizsolutions: Angular v4.0 is out!

#angular #webdevelopment #webdesign #frontenddesign
#js #javascript…

The good news is that Angular 4 is almost exactly the same as Angular 2, from a developer’s point of view. Most of the changes are “in” the framework. Upgrading is as simple as installing the new dependencies

Igor Minar (who works on Angular) requests developers to stop calling it AngularJS,

Angular2 and Angular4. Everything after Angular 1 (which will now be referred to as AngularJS) is simply “Angular“. The versions only denote Angular’s growth over time.

Angular 4 is going to be faster.The Angular team talks about an average 60% reduction in your application size.

Let’s talk about some of the major improvements in the newer version of Angular 4.0

With the new syntax, you can provide an “else” clause. This is a more convenient way to express a conditional.

Here, we wrap our “else” clause in a “ng-template” component – a new component introduced in Angular 4.

using else:

< ng - template #other_content>other content here…

you can also use then else:

< ng - template #content>content here…

or then alone:

< ng - template #content>content here…

One of the reasons we all love Angular so much is it’s DOM abstraction capabilities. We don’t need to document.querySelector(‘#id’) anymore. So why should we have to get access to the DOM element when we need to manipulate the UI.

That’s why we use the Renderer service. It’s an abstraction for UI rendering manipulations.

What is Render service: Separate Angular 2 runtime into two layers, application layer and render layer. The application layer only contains APIs and runtime that application code interacts with directly. The rendering layer provides common protocol for performing UI updates. This two layers allow Angular 2 applications to run in different platforms while providing the same set of abstractions to application.

Coming back to the deprecation…

The old Renderer will still work, but it will be removed at some point in the future. it’s recommended that you switch to the new Renderer 2.

Making the switch is as simple as updating the name of the injected component (from Renderer to Renderer2) and updating the names of methods (if the method names have changed).

The Angular Universal project allows you to render your Angular app server side. If you aren’t familiar with this library you can check out the git repo or this really nice video by Nir Kaufman.

The originally community driven project was taken up by the Angular team and is now up to date with Angular v4.

We’ve updated Angular to a more recent version of TypeScript. This will improve the speed of ngc and you will get better type checking throughout your application

The Angular team has made some serious changes to the AOT (Ahead Of Time compilation) engine.

If you don’t already know this, Angular can be rendered in 2 ways –

All the Angular documentation and most of the demo apps you’ll find online use JIT.

This means that the application is compiled in your user’s browsers.

What it really means is that your application isn’t as fast as it can be. The weight of the application is higher than it needs to be because –

The templates are not pre-compiled, which means the browser has to do a lot of work before it can show the user something.

AOT compilation, on the other hand compiles your code before the user gets it. That means that the code –

is executed faster (because the browser doesn’t need to spend time compiling the application).

If you want to learn more about how you can add AOT in your application, check out Angular’s docs on AOT.

Allright. So you have decided that you want the potential 60% size reduction in your application and you want to blow your users away with even better load times.

How do you make the move?

The Angular team says that it’s as simple as –

1. Upgrading the Angular dependencies to the latest version.

– browser – dynamic , platform – server , router , animations } @ latest typescript @ latest — save

cli @ latest @ angular / core @ latest @ angular / forms @ latest @ angular / http @ latest @ angular / platform – browser @ latest @ angular / platform – browser – dynamic @ latest @ angular / platform – server @ latest @ angular / router @ latest @ angular / animations @ latest typescript @ latest — save

Then run whatever ng serve or npm start command you normally use, and everything should work.

Even though version 4 doesn’t bring any breaking changes, future versions might. It’s best to keep making your app run as fast as possible.

As always console.log(‘happy coding!’);

Angular 4

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.