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.

Download Visual Studio 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.

1. Navigate to the workspace folder, such as my-app.
2. 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.

The post Angular Getting Started | Software Installation and App Setup | Part 2 appeared first on Learn Smart Coding.

Angular Getting Started is a beginner-level course that takes you on a journey through the basic features of Angular. The course will guide you through the right path and make you feel more pleasant and productive.

In this course, we build a sample application E.g. Restaurant. so you can code along or use it as a reference for your own development. Also, you will see how Angular provides a consistent set of patterns for building components, templates, modules, and services which will help come up to speed quickly.

This course covers the following

1. Setup local development environment starting from stratch.
2. How to build components
3. How to create the user interface for your application in a template, and power it up with data binding and directives.
4. Build services for logic needed across components and inject those services where they are needed.
5. Learn how to send requests to a web server using HTTP and observables.
6. Set up routing to navigate between the views of your application
7. Last but not least, during the course you will learn Angular command line interface, or CLI, to generate, execute, test, and at the end how to deploy your Angular application.

At the end of the course, you will know the basics you need to get started building your own Angular applications.

Introduction

Angular is a framework for building both small and large web applications. With Angular, you can build a simple, small website in a few hours or build rich full-featured enterprise-level product management and inventory application.

Angular is a JavaScript framework for building client-side applications. These are applications that run entirely in the user’s browser. We use techniques we already know including HTML and CSS to build the user interface, and we write our code in TypeScript, which is an enhanced version of JavaScript.

Why Angular and not some other JavaScript framework?

There are a lot of other JavaScript frameworks out there however, Angular makes our HTML more expressive.

We can embed features, such as if conditions, for loops, and local variables, directly into our HTML. Angular has powerful data binding that lets us connect data directly to our UI. Angular promotes modularity.

We build our applications as a set of building blocks, making it easier to create and reuse content. And Angular has built‑in support for communication with a back‑end server.

This makes it easy for our web applications to get and post data or execute server‑side business logic.

Angular Getting Started

This is a beginner-level course/tutorial. However, this course assumes you have some basic knowledge of JavaScript for code, HTML for building a user interface, and Cascading Style Sheets, or CSS for styling.

You do not need any prior knowledge of Angular or TypeScript. We’ll cover what you need in this course. If you have a working knowledge of each of these will help you learn this course faster.

Whats Next?

In the next chapter/post, I will cover all the steps that are required to set up a local environment and run the initial application.

Short video tutorial

Summary

This Angular Getting Started post covered the overview of the course. Also, we looked at what is Angular, the JavaScript framework, and why Angular framework is. I hope you enjoyed it and are excited to learn the next module.

The post Angular Getting Started | Course overview and Introduction | Part 1 appeared first on Learn Smart Coding.