Beginner's Angular 4|5 Tutorial Series and Angular 6 New Features

In the previous tutorial, we've learned how to integrate Angular 4 with Python & Django. This tutorial (now, updated to Angular 6) will be dedicated to teach you how to get started with Angular 4|5. Throughout this beginner's series, you'll learn how you can use Angular 4|5|6 to build client side web applications for mobile and desktop with a Django backend.

Angular 6, was just released and has a lot of changes and new features under the hood particularly regarding Angular CLI v6 buit-in tools. The new set of tools, are especially useful for helping Angular developers upgrade from previous versions and easily building new Angular libraries. In this tutorial series we’ll also see what’s new with the new Angular 6 version and also learn how to upgrade our previously built Angular 5 to Angular 6.

This Angular 6 tutorial is a part of a tutorial series that contains the following tutorials:

Beginner's Angular 4|5 Tutorial Series and Angular 6 New Features

Angular 5 has been released (on October 2017) so this tutorial series is updated to reflect any updates. This tutorial will provide you with all of the fundamentals to help you get started quickly developing Angular 5 applications without prior knowledge of Angular.

Angular is a powerful front-end Javascript/TypeScript framework developed by Google. It allows you to build structured client side applications and PWAs (Progressive Web Apps).

Prior knowledge of Angular is not required for this tutorial series but you'll need to have a few requirements:

  • Prior working experience or understanding of HTML & CSS.
  • Prior working experience or understanding of JavaScript.

Angular 6 New Features

Angular 6 brings a set of new features and additions. Let's brievely go over the most important ones:

Angular CLI 6 ng add and ng update Commands

The Angular CLI v6 introduces two useful commands:

  • ng add: This new commands allows you to quickly add or install new libraries including adding configuration for you behind the curtain. Popular libraries such as Angular Material or ng-bootstrap can now be added on the fly without adding any settings manually from your part. For example, to add Bootstrap to your project you only to issue the following command:
ng add @ng-bootstrap/schematics

You can also add new libraries by using Angular 6 Schematics to create schematics for new libraries.

  • Using ng update, It's easy than before to update your Angular 4|5 projects to use Angular 6. And you can also use Schematics to make it easy to integrate third-party libraries with ng update.

New Angular CLI Configuration File angular.json instead of .angulac-cli.json

With Angular 6, the configuration file for the CLI .angular-cli.json is renamed to angular.json. The overall strcuture of angular.json has also changed.

The Angular CLI 6 now generates a workspace which includes multiple apps, among them one default app. So you can have multiple apps per one project and you can also add libraries as a part of the project (ng g library my-lib).

Angular 6 Schematics

Schematics is a powerful workflow tool for Angular. It can be used to apply transforms to your project, such as creating new components, updating old code automatically etc. This will allow you to build frameworks on top of your project which can boost your productivity like never before.

Ivy: The New Angular 6 Renderer

The Angular team has done a re-write of the Angular renderer. It's code named Ivy. This new renderer will allow you to produce smaller bundles in size like Preact for example. Ivy has experimental support in Angular 6 and can be enabled with a configuration option.

Angular 6 Elements

With Angular 6 Elements, we can develop standard web components or custom elements that can be used natively in modern web browsers with other Angular projects and also with any other framework such as React or Vue or even with plain vanilla JavaScript.

Support for TypeScript 2.7

Angular 6 depends on TypeScript 2.7.

Support for RxJS 6

Angular 6 has support for RxJS 6. RxJS brings new changes and features such as new import paths, tree-shakablility resulting in even smaller Angular bundles etc.

Angular 4 Features

Angular 4 is available and comes with many improvements and new features such as:

  • Size and performance: Angular 4 applications are smaller by hundreds of kilobytes, thanks to the improvements to the View Engine which have reduced the size of generated components code by around 60% .

  • The Animations are no longer part of Angular core which means that the apps which don't use them don't need to include the extra code in their final bundles. You can use animations in your apps by using BrowserAnimationsModule which can be imported from @angular/platform-browser/animations.

  • Improved *ngIf and *ngFor: *ngIf now supports the else syntax, for example it's easy now to write templates in this way

<div *ngIf="ready ; else loading">
    <p>Hello Angular 4</p>
</div>
<ng-template #loading>Still loading</ng-template> 

If the ready variable is false Angular will show the loading template.

You can also assign and use local variables inside both *ngIf and *ngFor expressions, for example:


<div *ngFor="let el of list as users; " >
        { { el } }
</div>
  • The adoption of Angular universal as part of Angular: the Angular team has adopted Angular Universal which is a community driven project that allows developers to use server side rendering for Angular apps. It's available from @angular/platform-server.

You can find more information on:Angular 4.0.0 now available official Angular blog post and Angular 4.1.0 now available official Angular blog post

Getting Started with Angular 4/Angular 5

If you want to get started developing Angular 4/5 web applications, you have multiple options:

  • Install Angular by hand,
  • Install and use Angular CLI,
  • Upgrade from an existing Angular 2+ project.

Before you can install Angular you need to have Node.js and NPM installed on your development machine.

So go ahead and open your terminal and type the following

node -v

If you get the version of an installed Node.js then you already have the platform installed. If the command is unknown by your terminal then you need to install Node.js.

Installing Node.js is easy and straightforward, you just need to visit their official website then grab the installer for your operating system and follow the instructions.

Now if you open your terminal under Linux/MAC or command prompt under Windows and execute

node -v 

You should get an output displaying your Node.js installed version

Updating to Angular 4 from Angular 2

If you have already an Angular 2 project and want to update it to Angular 4, you can do that by simply installing a few npm packages.

Windows

Just copy and paste the following command in your prompt


npm install @angular/common@latest @angular/compiler@latest @angular/compiler-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

Linux and MAC

Copy and execute this on your terminal

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save 

Installing the Angular CLI

The Angular CLI is a handy command line utility built by the Angular team to easily and quickly generate new Angular applications and serve them locally. It can also be used to generate different Angular constructs such as components, services and pipes etc.

Before you can use the Angular CLI, you need to install it via npm, so go ahead and open your terminal or your command prompt then simply enter:

npm install -g @angular/cli

To check the version of your installed Angular CLI, type:

ng -v
You can also run ng -v from inside an Angular project to get the version of Angular

Generating an Angular 4 / Angular 5 Project Using the Angular CLI

Using the Angular CLI, you can generate an Angular 4+ project with a few commands, the CLI will take care of generating the project files and install all the required dependencies.

Open your terminal or your command prompt then run:

ng new angular4-project 

After finishing the installation enter:

cd angular4-project 
ng serve 

Your project will be served locally from http://localhost:4200.

Generating an Angular 4 from GitHub Repository

You can also clone a quick-start Angular project from GitHub to generate a new Angular 4 project.

So make sure you have Git installed then run the following:

git clone https://github.com/angular/quickstart  my-proj
cd my-proj
npm install
npm start

You can find more information here.

Angular 5 Features

Angular 5, code named pentagonal-donut, was just released. It has new features and internal changes which make Angular applications faster and smaller. In this section we will go over the most important changes and instructions on how to upgrade your existing Angular 2+ project to latest version.

  • As of Angular 5.0.0, the build optimizer is enabled by default which applies a series of optimizations to builds.

  • The Angular team has also improved the compiler which can make now faster rebuilds (especially for production and AOT builds) thanks to incremental compilation.

  • The Angular team has added many features to Angular decorators.

  • Developers can now ship faster and smaller bundles by removing white spaces.

  • The Angular compiler now supports TypeScript 2.3 Transforms a new feature that enables you to hook into the standard TypeScript compilation pipeline. Make sure to use the --aot switch to enable this feature.

ng serve --aot
  • You can now get rid of white spaces in template's code by setting preserveWhitespaces to false in the component's decorator. You can also turn it on globally by setting "preserveWhitespaces":falseunderangularCompilerOptions in tsconfig.json. This will help reduce your app's final bundle size.
  • You can now use lambdas inside Angular componet's decorator.
  • New improved number, date, and currency pipes that have better standardization support across browsers without i18n polyfills.
  • The old HTTP module is now deprecated in favor of HttpClient which was introduced in Angular 4.3

Changes before Upgrading

If you have an existing Angular 2 or Angular 4 project, you need to make sure you apply some changes to your project's source code before you can upgrade to Angular 5. This is the list of changes that need to be done.

https://angular-update-guide.firebaseapp.com/

  • First of all, upgrade essential Angular packages to latest version 5.0.0.

$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0

  • Upgrade to TypeScript 2.4.2 and RxJS 5.5.2. RxJS v5.5.2 is the default reactive library for Angular 5.

  • Change <template> to <ng-template> in your project's code.

  • Upgrade HTTP API to HttpClient API since HTTP module is deprecated in Angular 5.

  • If your project is making use of the Flex Layout module, you need to upgrade to its latest release which is compatible with Angular 5 (OpaqueToken was removed in Angular 5).

Getting Started with Angular 5 from Scratch

Fortunately for you, if you already have a previous working experience with Angular 2 or Angular 4, starting a new Angular 5 project is very much the same process.

In case you don't have any previous experience with Angular framework just follow the instructions below to install Angular 5 from scratch.

Prerequisites

Before you can install Angular 5, you need to have some prerequisites.

  • You need to have Node.js installed.
  • You need to have NPM (Node Package Manager) installed.

Don't worry both requirements can be installed by going to the official website and download the installer for your operating system.

Next install the latest CLI from npm by running the following command from your terminal:

npm install @angular/cli -g

Once the Angular CLI v1.5.0 is installed on your system. You can create Angular 5 applications using the ng command.

You can check for the installed version of the Angular CLI using:

$ ng -v

You should get an output like:

Angular CLI: 1.5.0
Node: 6.11.4
OS: linux ia32
Angular: 
...

You can create your first Angular 5 project using one command:

$ ng new a-new-project --style=scss --routing

You can notice the two flags at the end, --style=scss which instructs the Angular CLI to use SCSS for styling and --routing for adding basic routing support to the new Angular project.

Once the project is scaffolded, you can navigate inside your project then serve it.

$ cd a-new-project
$ ng serve

That's it, you now have a new Angular 5 project ready for you to build your next awesome Angular application.

Just like Angular 4, you can also use the quick start project from Github to generate Angular 5 projects.

git clone https://github.com/angular/quickstart angular5project
cd angular5project 
npm install
npm start

Conclusion

Thanks to Angular CLI 6, you can get started with Angular 6 by generating a new project quickly with a variety of flags to customize and control the generation process.

As a reacp, we have seen different ways to create a new Angular 6 project.

We have also seen the new features of Angular 6 such as ng add, ng update, Angular Schematics, Angular Elements etc. Now that we have created a new project.

In the next tutorial, we're going to start learning about the fundamentals of Angular 6 starting with components.


comments powered by Disqus