Getting started with Angular 4

reshma — Tue, 19 Sep 2017 11:42:19 +0000

Angular is a most popular platform for building applications with the web. Angular empowers developers to build applications that live on the web, mobile, or the desktop. The AngularCLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. As compared to the older versions of Angular, there are many new things added to the list. Not only new features but also some twists are there that enhance old features. Forget Angular 3, Google jumps straight to Angular 4 after Angular 2. Angular4 applications are much faster and less space consuming. Angular4 is compatible with TypeScript’s newer versions 2.1 and 2.2. Components are the basic building blocks of your application. Every component has an associated template, style sheet, and a class with logic.

Prerequisites

1. NodeJS ( 6.x.x or greater ) 2. npm (3.x.x or greater )

Installation

1. You have to install AngularCLI globally.

npm install -g @angular/cli

2. Create a new project.

ng new my-app

3. To serve the application, get into the project repo and run :

cd my-app
ng serve --open

For launching our server and for rebuilding our app when there are any changes we are using “ng serve”. When using “–open” or “–o”, it will open in “http://localhost:4200/” automatically.

And that’s it!

Your basic app is ready!

What’s New In Angular 4

Router ParamMap

In the previous versions, we were using a simple key-value object for storing route parameters. But in Angular4, it is possible to query a so-called ParamMap in the router, that is a request for the route- and query parameter assigned to a route.

class MyComponent {
 sessionId: Observable;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
   this.sessionId = this.route
     .queryParams
     .map(params => params['session_id'] || 'None');
 }
}

Now, we can run them as simple method calls (parameterMap.get(‘parameter-name’)).

class MyComponent {
 sessionId: Observable;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
   this.sessionId = this.route
     .queryParamMap
     .map(paramMap => paramMap.get('session_id') || 'None');
 }
}

The parameters are also available as a map. This brings advantage in terms of type security. The old key-value structure is unsafe since it can take all possible values. In the map, the parameter value is either string or array of strings depending upon the method used. Hence it is safe.

Animation Package

All the functions of animation were provided in @angular/core module. So it was always there with our application even if we didn’t use it and many unnecessary bundles were created. To avoid this, these functions have been put into its own packages. So that this extra code will not end up in your production bundles if you didn’t use that. We can add animations ourselves in the main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations.

Improved ngIf and ngFor

It’s now also possible to use an else syntax in your templates. In the else-case, a separately referenced template is used in place of the element marked with *ngIf.

Races
No races.

Another addition to the template syntax is the as keyword, to simplify the let syntax. We can store the result in a variable of the template so that we can use it in the element.


  {{i+1}}/{{total.length}}: {{pony.name}}

TypeScript 2.1 & 2.2 compatibility

Version 4 is compatible with these new versions of TypeScript. This will improve the speed of ngc and give better type checking in your application.

Universal

With Angular Universal, we can do the server side rendering. It was maintained by the community until now, but after this release, it’s now an official Angular project.

Conclusion

The new release brings some good features and a really great improvement of the generated code size, for the price of very few breaking changes that should not impact you a lot and also makes the migration quite smooth. So Angular 4 is here and it’s time to learn one of the most popular and powerful javascript frameworks.

References

https://angular.io/ https://jaxenter.com/angular-4-top-features-133165.html https://coursetro.com/courses/12/Learn-Angular-4-from-Scratch Happy Coding!!]]>

Angular4 – redpanthers.co