Skip to main content

You can find the associated code samples for all the sections here: https://github.com/xrusu/angular-practice.

What is Angular?

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Angular2 vs AngularJS

Angular2 is a complete rewrite of AngularJS. Angular2 is not a version upgrade, but a complete rewrite. Angular2 is written in TypeScript, which is a superset of JavaScript.

Angular vs React

Angular and React are both popular JavaScript 'frameworks' for building interactive applications. React is a library for building user interfaces, while Angular is a framework for building large-scale applications. React is maintained by Facebook, while Angular is maintained by Google.

Requirements

  • Node.js
  • Angular CLI
  • Code editor (WebStorm, VS Code, etc.)

Installing Node.js​

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required to run JavaScript on the server. You can download Node.js from here.

Installing Angular CLI​

Angular CLI is a command-line interface for Angular. Angular CLI is used to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

To install Angular CLI, run the following command in your terminal:

npm install -g @angular/cli

Installing a code editor​

You can use any code editor you like. I personally use WebStorm, but you can use VS Code or any other code editor.

Creating a new Angular project​

To create a new Angular project, run the following command in your terminal:

ng new my-app

where my-app is the name of your project.

You can also create a new project using your code editor. For example, in WebStorm, you can go to File > New > Project and select Angular CLI from the left sidebar. Then, you can enter the name of your project and click Create.

Running the project​

To run the project, run the following command in your terminal:

ng serve

This will start a development server and open your project in the browser. You can also open your project in the browser by going to http://localhost:4200.

Project structure​

The project contains the following files and folders:

  • e2e: This folder contains end-to-end tests.
  • node_modules: This folder contains all the dependencies of the project.
  • src: This folder contains the source code of the project.
  • .editorconfig: This file contains the configuration for the code editor.
  • .gitignore: This file contains the files and folders that should be ignored by Git.
  • angular.json: This file contains the configuration for Angular CLI.
  • package.json: This file contains the dependencies of the project.
  • package-lock.json / yarn.lock: These files contain the exact versions of the dependencies of the project.

src folder structure​

The src folder contains the following files and folders:

  • app: This folder contains the source code of the application.
  • assets: This folder contains static assets such as images, fonts, etc.
  • environments: This folder contains the environment configuration files.
  • index.html: This file is the entry point of the application.
  • main.ts: This file is the entry point of the application.
  • styles.scss: This file contains the global styles of the application.
  • favicon.ico: This file is the icon of the application.

app folder structure​

The app folder is the main folder of the application. It contains the following files and folders:

  • app.component.html: This file contains the HTML template of the root component.
  • app.component.scss: This file contains the styles of the root component.
  • app.component.spec.ts: This file contains the unit tests of the root component.
  • app.component.ts: This file contains the TypeScript code of the root component.
  • app.module.ts: This file contains the root module of the application.
  • app-routing.module.ts: This file contains the routing configuration of the application.
  • other folders such as components, directives, models, pipes, services, etc.