Angular 6 Tutorial: New Features with New Power

Angular 6 is out! The most outstanding changes are in its CLI and how services get injected. If you are looking to write your very first Angular 6 app—or Angular/Firebase app—in this tutorial, we’ll go over the basic steps of initial setup and create a small diary app.

Angular 6: The Basics

If you’ve never used Angular before, let me give you a short description of it and how it works.

Angular is a JavaScript framework designed to support the building of single-page applications (SPAs) for both desktop and mobile.

The framework includes a full suite of directives and modules that allow you to easily implement some of the most common scenarios for a web app, like navigation, authorization, forms, and reporting. It also comes with all the necessary packages to add tests using the Jasmine framework and run them using the Karma or Protractor test runners.

Angular architecture is based on components, templates, directives, and services. It provides a built-in dependency injection mechanism for your services, as well as two-way data binding to connect your views with your component code.

Angular uses TypeScript, a typed superset of JS, and will make some things easier, especially if you come from a typed language background.

Angular 6: New Features

A brief summary of new features in Angular 6:

  • A policy of synchronizing major version numbers for the framework packages (@angular/core, @angular/common, @angular/compiler, etc.), CLI, Material, and CDK. This will help to make cross-compatibility clearer going forward: You can tell from a quick glance at the version number whether key packages are compatible with each other.
  • New ng CLI commands:
    • ng update to upgrade package versions smartly, updating dependencies versions and keeping them in sync. (E.g. when running ng update @angular/core all frameworks will be updated as well as RxJS.) It will also run schematics if the package includes them. (If a newer version includes breaking changes that require changes in code, the schematic will update your code for you.)
    • ng add to add new packages (and run scripts, if applicable)
  • Services now reference the modules that will provide them, instead of modules referencing services, as they used to have it.

As an example of what this last change means, where your code used to look like:

@NgModule({
  // ...
  providers: [MyService]
})

…with this particular change in Angular 6, it will look like:

@Injectabe({
  providedIn: 'root',
})

These are called tree-shakeable providers and allow the compiler to removed unreferenced services resulting in smaller size bundles.

Angular 6 CLI

The ng command-line interface is a very important piece of Angular and allows you to move faster when coding your app.

With the CLI you can scaffold your initial app setup very easily, generate new components, directives, etc, and build and run your app in your local environment.

Creating an Angular 6 Project

Okay, enough talk. Let’s get our hands dirty and start coding.

To start, you’ll need Node.js and npm installed on your machine.

Now, let’s go ahead and install the CLI:

npm install -g @angular/cli

This will install the ng CLI command globally, due to the -g switch.

Once we have that, we can get the initial scaffold for our app with ng new:

ng new my-memories --style=scss

This will create a my-memories folder, create all the necessary files to get your initial setup ready to start, and install all necessary packages. The --style=scss switch is optional and will set up the compiler to compile SCSS files to CSS, which we’ll need later.

Once the install is complete, you can cd my-memories and run.ng serve This will start the build process and a local web server that serves your app at http://localhost:4200

What’s happening behind the scenes is that the CLI transpiles all the .ts (TypeScript files) to vanilla JS, gathers all the required dependencies from the packages folder,node_modules and outputs the result in a set of files that get served via a local web server that runs on port 4200.

 

Our Services

© All rights reserved BITCS

Made by BITCS​​

Translate »