DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Getting Started With Angular 7.0

Getting Started With Angular 7.0

Angular 7 has been released! Read on to learn how to get started with the latest version of this great framework, and the new bits the Angular team has added in.

Ankit Sharma user avatar by
Ankit Sharma
·
Oct. 22, 18 · Tutorial
Like (2)
Save
Tweet
Share
26.90K Views

Join the DZone community and get the full member experience.

Join For Free

Introduction

Angular has released its latest version, Angular 7.0. In this article, we will explore the following points:

  • What's new in Angular 7.0.
  • Creating your first Angular 7.0 application using the Angular CLI.
  • How to update existing Angular applications to Angular 7.0.

What's New in Angular 7.0

  • While creating a new Angular application, the Angular CLI will prompt the user to select if they want to add features like Angular routing or the format of stylesheets they want to use in their application.
  • Angular 7.0 applications will use the Bundle Budget feature of the Angular CLI to warn developers if the application bundle size exceeds the predefined limit. The default value for the warning is set to 2MB and for error is 5MB. This value is configurable and can be changed from the angular.json file. This feature enhances the application performance considerably.
  • The Component Dev Kit (CDK) of Angular Material also receives some new features as part of this update. The two newly added feature of CDK is mentioned below:

1. Virtual Scrolling

If you are trying to load a large list of elements then it can affect the application performance. The can be used to load only the visible part of the list on the screen. It will render only the items that can fit on the screen. When the user scrolls through the list then the DOM will load and unload the elements dynamically based on the display size. This feature is not to be confused with infinite scrolling which is altogether a different strategy to load elements. You can read more about Virtual Scrolling here.

2. Drag-and-Drop

We can easily add a drag-and-drop feature to an item. It supports features such as free dragging of an element, reordering items of a list, moving items between lists, animation, adding custom drag handle, and restricted dragging along X or Y axis. You can read more about Drag-and-Drop here.

  • The mat-form-field will now support the use of the native select element. This will provide enhanced performance and usability to the application. Read more about this feature here.
  • Angular 7.0 has updated its dependencies to support TypeScript 3.1, RxJS 6.3 and Node 10.

We will proceed to create our first Angular 7 application.

Prerequisites

  • Install the latest version of Node.js from here.
  • Install Visual Studio Code from here.

Installing Node.js will also install npm on your machine. After installing Node.js, open the command prompt and run the following set of commands to check the version of node and npm installed on your machine.

Refer to the image below:

Installing the Angular CLI

The Angular CLI is the Command Line interface for Angular. It helps us to initialize, develop, and maintain Angular applications easily.

To install Angular CLI, run the following command in the command window:

npm i -g @angular/cli

This will install Angular CLI 7.0 globally in your machine. Refer to the image below:

Image titleTo check the version of angular CLI installed in your machine, run following command:

ng version

Refer to the image below:

Create an Angular 7 App

Open Visual Studio Code and navigate to View >> Terminal. This will open the VS code terminal window. Alternatively, you can also use the keyboard shortcut ctrl+` to open the terminal window.

Type the following sequence of commands in the terminal window. These commands will create a directory with name "ng7Demo" and then create an Angular application with the name "ng7App" inside that directory.

As you run the ng new command, the Angular CLI will ask you to select the following two option:

  1. Would you like to add Angular routing? (Y/N)
  2. Which stylesheet format would you like to use?

Once you select the options and hit enter, the Angular 7.0 application will be created.

Refer to the below gif image for better understanding.

Once the application creation is successful, run the following command to open the project.

Refer to the image below:

This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

Open the package.json file and you can observe that we have the latest Angular 7.0.0 packages installed in our project.

{
  "name": "ng6-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.0",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/forms": "^7.0.0",
    "@angular/http": "^7.0.0",
    "@angular/platform-browser": "^7.0.0",
    "@angular/platform-browser-dynamic": "^7.0.0",
    "@angular/router": "^7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^7.0.0",
    "@angular-devkit/build-angular": "~0.6.0",
    "typescript": "~3.1.1",
    "@angular/cli": "~7.0.1",
    "@angular/language-service": "^7.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

Execution Demo

The name of our Angular application is ng7App which is inside ng7Demo directory.

So, we will first navigate to our application using the below commands.

Now, we use the following command to start the web server.

Refer to the image below:

After running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

How to Upgrade to Angular 7

The Angular team has provided an Angular Update Guide to ensure smooth upgrade of angular versions. Navigate to https://update.angular.io/ to access it. It is self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update.

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

ng update @angular/cli @angular/core

Conclusion

We have learned about the new features of Angular 7.0. We also installed Angular CLI 7.0. To create and execute Angular 7.0 app we have used Angular CLI and VS Code. We also explored the method to upgrade an existing application to Angular 7.0.

AngularJS Command-line interface application Visual Studio Code Command (computing)

Published at DZone with permission of Ankit Sharma, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Agile Transformation With ChatGPT or McBoston?
  • What Is Policy-as-Code? An Introduction to Open Policy Agent
  • Why It Is Important To Have an Ownership as a DevOps Engineer
  • The Role of Data Governance in Data Strategy: Part II

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: