Angular 5 is a new version of the Angular framework developed by Google. Angular 5 comes with improvements including optimized builds and faster compile times, but in this Angular 5 tutorial, we are going to build a notes app from scratch. If you’ve been waiting lớn learn Angular 5, this tutorial is for you.

Bạn đang xem: Angular 5 tutorial: guide to your first angular 5 app

Sergey is a full-stack software engineer with experience developing complex web projects. He has extensive skills as an analyst.
Angular is a new version of the AngularJS framework, developed by Google. It comes with a complete rewrite, và various improvements including optimized builds và faster compile times. In this Angular 5 tutorial, we are going to build a notes phầm mềm from scratch. If you’ve been waiting khổng lồ learn Angular 5, this tutorial is for you.

An Angular 5 Tutorial: Step by Step Guide khổng lồ Your First Angular 5 App

The final source code for the app can be found here.

There are two major versions of the framework: AngularJS (version 1) & Angular (version 2+). Since version 2, Angular is no longer a JavaScript framework, so there’s a huge difference between them, warranting a fundamental name change.

Should I Use Angular?

It depends. Some developers will tell you that it’s better to lớn use React & build your own components without much additional code. But that may be a problem, too. Angular is a fully integrated framework that allows you to lớn start working on your project quickly without thinking about which libraries khổng lồ select và how to deal with everyday problems. I think of Angular as being for the front-end, as RoR is for the back-end.


If you don’t know TypeScript, don’t be scared. Your JavaScript knowledge is enough lớn learn TypeScript quickly, và most modern editors are quite effective in helping with that. The most preferable options nowadays are VSCode & any of the JetBrains IntelliJ family (e.g., Webstorm or, in my case, RubyMine). For me, it’s preferable to use a smarter editor than vim, as it will give you an extra heads-up on any mistakes in the code as TypeScript is strongly typed. Another thing to mention is that Angular CLI with its Webpack takes care of compiling TS khổng lồ JS, so you shouldn’t let the IDE compile it for you.

Xem thêm: Phân Biệt Đột Biến Và Thường Biến Và Đột Biến, Phân Biệt Thường Biến Và Đột Biến

Angular CLI

Angular now has its own CLI, or command line interface, which will bởi vì most of the routine operations for you. Lớn start using Angular, we have to install it. It requires Node 6.9.0 or higher as well as NPM 3 or higher. We are not going to lớn cover their installation for your system, as it’s better to find up-to-date documentation for installation on your own. Once they are both installed, we are going to lớn install Angular CLI by running the following:

npm install -g
angular/cliAfter the installation is successful, we can generate a new project by running the ng new command:

ng new getting-started-ng5 create getting-started-ng5/ (1033 bytes) create getting-started-ng5/.angular-cli.json (1254 bytes) create getting-started-ng5/.editorconfig (245 bytes) create getting-started-ng5/.gitignore (516 bytes) create getting-started-ng5/src/assets/.gitkeep (0 bytes) create getting-started-ng5/src/environments/ (51 bytes) create getting-started-ng5/src/environments/environment.ts (387 bytes) create getting-started-ng5/src/favicon.ico (5430 bytes) create getting-started-ng5/src/index.html (304 bytes) create getting-started-ng5/src/main.ts (370 bytes) create getting-started-ng5/src/polyfills.ts (2405 bytes) create getting-started-ng5/src/styles.css (80 bytes) create getting-started-ng5/src/test.ts (1085 bytes) create getting-started-ng5/src/ (211 bytes) create getting-started-ng5/src/tsconfig.spec.json (304 bytes) create getting-started-ng5/src/typings.d.ts (104 bytes) create getting-started-ng5/e2e/app.e2e-spec.ts (301 bytes) create getting-started-ng5/e2e/app.po.ts (208 bytes) create getting-started-ng5/e2e/tsconfig.e2e.json (235 bytes) create getting-started-ng5/karma.conf.js (923 bytes) create getting-started-ng5/package.json (1324 bytes) create getting-started-ng5/protractor.conf.js (722 bytes) create getting-started-ng5/tsconfig.json (363 bytes) create getting-started-ng5/tslint.json (3040 bytes) create getting-started-ng5/src/app/app.module.ts (316 bytes) create getting-started-ng5/src/app/app.component.css (0 bytes) create getting-started-ng5/src/app/app.component.html (1141 bytes) create getting-started-ng5/src/app/app.component.spec.ts (986 bytes) create getting-started-ng5/src/app/app.component.ts (207 bytes)Installing packages for tooling via yarn.yarn install v1.3.2info No lockfile found.<1/4>