Create Your First Angular Application

Navinda Lankesh — Thu, 03 Jun 2021 16:14:03 +0000

Hi guys! I am going to explain you to how to setup your local environment and workspace for create your first Angular application locally using Angular CLI tool. Simply following my steps finally, you can create Angular applications and configure application yourself. I am using my Windows pc to show you to understand the commands I used to create Angular application.

Step 01

Before create application there are some prerequisites.

1. You should be familiar with following.

JavaScript
HTML
CSS
TypeScript (Not required)

2. To install Angular on your local system, you must install following.

Node.js (Version: Current, Active LTS or Maintenance LTS)

You can download and install Node.js follow this link. If you already installed Node.js you can run this command on terminal window.

node -v

Then you should see the image as below. (Do not consider the version in screenshot. Maybe it changes when you create application in future.)

NPM package manager

Normally npm package manager installed with Node.js by default. To check that you have the npm client installed, you can run this command on terminal window.

npm -v

Then you should see the image as below. (Do not consider the version in screenshot. Maybe it changes when you create application in future.)

Step 02

Now install the Angular CLI on your pc.

Using Angular CLI you can create project, generate application and library code, and variety of development tasks such as testing, bundling, and deployment. To install Angular CLI, use this command on your terminal window.

npm install -g @angular/cli

When installing Angular CLI, you get question as this ‘’Would you like to share anonymous data with the Angular Team …”. In my opinion I preferred ‘No’. Doesn’t matter answer is YES or No. You can choose your opinion.

Then you should see the image as below. (Do not consider the version in screenshot. Maybe it changes when you create application in future.)

Step 03

Create a workspace for your new application.

First you have navigate where you want to save your Angular application. Then you must open terminal window for that particular location. Now you can use this CLI commands to create new workspace for your application.

ng new my-application-name

my-application-name is name of your application.

ng new command prompt question you for about features to include in your application. Then Angular CLI installs the necessary Angular packages and other dependencies in application workspace. This can take some time to install.

When you run ng new command, you get the question as below. For this question I preferred ‘y’(YES) as the answer. Because that answer is best option for that.

? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? This setting helps improve maintainability and catch bugs ahead of time. For more information, see https://angular.io/strict (y/N)

Then you get the question as below. For this question I preferred ‘y’(YES) as the answer.

? Would you like to add Angular routing? (y/N)

Then you get the question as below. For this question you can chose what style sheet language you going to use your application. You can use keyboard arrows to choose an option.

After answered all those questions, packages installation start. You should see the image as below.

After few minutes later you should see the image as below.

Now you created your Angular application without any errors.

Step 04

Run your Angular application.

Using Angular CLI server, you can build and serve your application locally. First you have to navigate to the application workspace folder. Run this command on your terminal, that you create application before.

cd my-application-name

Then run ng serve command to launches the server, watch your files, and rebuild your application.

ng serve --open

(--open or -o for automatically open your application on browser to http://localhost:4200)

After run this commands you should see the image as below. And browser should open automatically to your application.

If you install and setup was successful, you should see the image as below.

Congratulations! Finally, you created your first Angular application. Some useful command and reference documentation links below for you.

New component

ng generate component xyz

Angular Material

ng add @angular/material

Add PWA Support

ng add @angular/pwa

Add Dependency

ng add _____

Run and Watch Tests

ng test

Build For Production

ng build –prod

Reference documentation links.

https://angular.io/docs
https://angular.io/tutorial
https://angular.io/cli
https://blog.angular.io
https://docs.npmjs.com

So I hope you understand how to create Angular application locally. Thank you! Happy reading.

#Angular #Programming #JavaScript #WebApplication

An Introduction to JavaScript Programming

Navinda Lankesh — Tue, 02 Mar 2021 18:16:29 +0000

JavaScript is a high-level, lightweight, interpreted programming language. And it is most well known as the scripting language for Web pages, and non-browser environments. JavaScript is a prototype based, weakly typed, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative styles. JavaScript was designed by Brendan Eich in 1995. The standard for JavaScript is ECMAScript. ECMAScript 6 (or ES6) is the latest major version of the ECMAScript standard.

JavaScript is the programming language of HTML and the Web. Alongside HTML, CSS, and JavaScript is 3 core technologies of World Wide Web.

JavaScript Frameworks

There are many JavaScript frameworks available. JavaScript is versatile and can be used for both frontend and backend development as well as for testing websites or applications as well.

Below frameworks are the most popular JavaScript frameworks in the current time on worldwide webs.

React JS, Vue JS, Angular JS, Ember JS, Preact JS, Svelte Js, Meteor JS, Mithril, Node JS, Polymer, Aurelia, Backbone JS, Express JS, Next JS, Gatsby JS, Nuxt JS, jQuery, Jest, Mocha, Jasmine.

Advantages of JavaScript

Speed

JavaScript tends to be very fast because it is often run immediately within the client's browser. So long as it doesn't require outside resources, JavaScript isn't slowed down by calls to a backend server. Also, there's no need to compile the code before running it.

Simplicity

JavaScript is relatively easy to learn and implement compared to other popular languages.

Popularity

JavaScript is everywhere on the web. There are countless resources to learn JavaScript.

Interoperability

JavaScript can be inserted into any web page. JavaScript can be used in many kinds of applications because of support in other languages.

Server Load

JavaScript is client-side, it reduces the demand on servers overall, and simple applications may not need a server at all.

Rich interfaces

JavaScript can be used to create features like drag and drop and components such as sliders, all of which greatly enhance the user interface and experience of a site.

Extended Functionality

Developers can extend the functionality of web pages by writing snippets of JavaScript for third party add-ons.

Disadvantages of JavaScript

Client-Side Security

Because code is executed on the client-side, bugs and oversights can sometimes be exploited for malicious purposes. Because of this, some people choose to disable JavaScript entirely.

Browser Support

Different browsers sometimes interpret JavaScript code differently. This makes it somewhat difficult to write code for cross browser.

DEV Community: Navinda Lankesh

Create Your First Angular Application

Step 01

Step 02

Step 03

Step 04

An Introduction to JavaScript Programming

JavaScript Frameworks

Advantages of JavaScript

Speed

Simplicity

Popularity

Interoperability

Server Load

Rich interfaces

Extended Functionality

Disadvantages of JavaScript

Client-Side Security

Browser Support