Overview
In this post, I will cover software installation steps and app setup from scratch.
Software Installations
In this course, I introduce TypeScript, which is the programming language we’ll use.
TypeScript is the language we use when working with Angular. Let me take a moment to tell you what is TypeScript.
“TypeScript is JavaScript with syntax for types.” TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
check out more here
What is TypeScript?
1. TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
2. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.
3. TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.
typescriptlang.org
JavaScript:
JavaScript is the language for the web and is executed by all browsers. The JavaScript language specification standard is officially called ECMAScript, or ES.
Most modern browsers support ES5. ES 2015 is renamed from ES6 specification. It introduced many key new features, such as classes and arrow functions.
Any newer JavaScript features that we use but a browser doesn’t support must first be transpiles. Newer JavaScript features in our code must be compiled by a tool that converts the newer JavaScript syntax to comparable older syntax before the browser executes it.
Microsoft developed TypeScript which is open-source. It is a superset of JavaScript, meaning all JavaScript is valid TypeScript. TypeScript code transpiles to plain JavaScript.
Installing IDE Editor:
There are many editors that support TypeScript, either out of the box or with a plugin. We’ll select one of the most common editors used by Angular developers, Visual Studio Code, often just called VS Code.
Installing NPM:
We need to install npm (Node Package Manager) before we begin. Npm has become the package manager for JavaScript applications. With npm, we can install libraries, packages, and applications, along with their dependencies. We’ll need npm to install all the libraries for Angular.
Download and install Node.JS here
Install the Angular CLI
To install the Angular CLI, open a terminal window and run the following command:
npm install -g @angular/cli
Create a workspace and initial application
Run the CLI command ng new and provide the name my-app, as shown here
ng new my-app
Run the application
The Angular CLI includes a server, for you to build and serve your app locally.
- Navigate to the workspace folder, such as my-app.
- Run the following command
cd my-app ng serve --open
The ng serve command launches the server watches your files and rebuilds the app as you make changes to those files.
The –open (or just -o) option automatically opens your browser to http://localhost:4200/. In case you need to run on a different port, use –port <port number> E.g. –port 4300
If your installation and setup were successful, you should see a page similar to the following.
Short video tutorial
Summary
Hope you enjoyed learning this part of the course. This post explained the software required to be installed in our system to get started with angular application development.