Environment Setup and folder structure for AngularJS application

What Is angularJS?

  • Angular is developed by Google.
  • Angular is a design framework written in TypeScript(Superset of JavaScript)that allows you to develop responsive and efficient single-page applications.

We can understand like this, Cricket has many frameworks or versions of T-20, World cup, etc. Similarly, JS has frameworks Angular, React.

What are Single Page Applications?

Basically, single-page applications are those which work inside a browser and do not need reloading during use. In other words, they are web pages whose content remains mostly the same and only a few pieces need to be updated at a time.

Example – Your Gmail is an example of SPA (Single Page Application). While browsing through your email, you’ll note that the sidebar and header do not vary much as you navigate through your inbox.

AngularJS Environment Setup

How to set up an Environment to develop a Single Page Application using Angular. Below are the steps to set up the environment –

Step 1:- Install Visual Studio Code IDE or JetBrains WebStorm.

Angular application requires an IDE, such as Visual Studio Code IDE or JetBrains WebStrom.

In this course, I will use Visual studio code as the text editor because It is light and easy to set up, it has a great range of built-in code editing and refactoring features.

You can download VS code from here: https://code.visualstudio.com

Download the code editor for your machine and for the specific Operating System.

Step 2:- Install Node.js

You also have to install Node.js to run the angular applications. When you install Node.js npm(node package manager) is installed. It provides the required libraries to run angular projects. Running Node.js locally means that it serves your runtime environment.

To download Node.js: https://nodejs.org/en/

  • LTS version is recommended for beginners. Download the version as per your operating system.
  • After successful installation, open the command prompt (by pressing Windows + R and type cmd and then click ok) and run the following command-
C:\User\abc> node –v

Step 3:- Install Angular CLI using the command

Install Globally:

npm install –g@angular/cli

Install Locally:

npm install @angular/cli

This command will install the latest version of angular CLI.

To update Angular CLI:

If you have Angular CLI already installed and to update Angular CLI Command is:

npm install –g @angular/cli@latest

Install Specific Version:

If you want to install a specific version of angular then the command will be

npm install –g @angular/cli@6.1.1

Or just go to Angular CLI official website https://cli.angular.io/

These steps are the same for Windows and Mac.

Guide to create a new AngularJS project

In order to develop the app, we use Angular CLI.

With an Angular CLI, you can create a readymade project template instead of starting from scratch. It saves time since you can use the CLI to get a readymade project template.

If the Angular CLI version is 12.1.1, then,

  • 12    –   Major version number
  • 1      –   Minor version number
  • 1     –    Path version number

Creating a new Angular Application

Step 1:To create an Angular Application, Launch the terminal/command prompt, navigate to the folder where you want to create an application, and execute the following command.

ng new <Project name>

Step2:With ng the new command, you will be prompted to specify which features you would like to include in the initial project.

Would you like to add routing? Press N. You will learn routing later in the course and Select CSS as styleSheet.

It might take 2-3 minutes to create an Angular project and install the necessary libraries with the command above.

After completion of the above step, It will create a folder named <Project Name> or FirstAngularApp.

Step 3: To open the project in visual studio

Navigate to the project folder using the cd command and Run command  “code .”, it will open the project in visual studio.

Step 4: Run Angular Application

Run the “ng serve” command to run the Angular Application in command prompt/ Terminal.

Your server is running on localhost:4200. Now, go to the browser and launch it.

To directly open this in your default browser:

ng serve –o

AngularJS Project Folder Structure

The root folder of an angular application contains node_modules and src folder. It also includes few configuration files.

  1. e2e – Stands for end to end. This folder includes the files required for end-to-end testing by using a protractor (Protractor is an end-to-end testing framework for Angular). You will find this e2e folder in node_modules\@schematics \ e2e.
  2. node_modules– npm package manager downloads and copies all of our external dependencies here or in other words, when you run the command “ng new FirstAngularApp” then it creates a new folder, and then it took a while to come back to prompt because doing the installation and all installation done in node_modules.
    When you hit ng build/npm build command, the dist folder has been created.
  3. json – This file includes project-related metadata. package.json provides information to npm so that npm can identify the project and handles its dependencies. It also contains project description, development dependencies, project version information, copyright information.
  4. angular.json – It specifies the structure of your application and contains any settings related to it. Here, you can declare the production/ development environments for this file, and also we can add the bootstrap file.
  5. json – This is the configuration file for typescript.
  6. spec.json –This contains all specs files for unit testing.
  7. src-This is the folder containing the main code files for your angular application. src contains app, assets, environments folder, and few other files.
    1. assets –Here, you can include both static files as well as static data such as images, translations, etc.
    2. environments – The environments folder contains the environment configuration files. One is environment.prod.ts for production environment and the other is environment.ts for a development environment.
    3. favicon.ico–This file contains an icon with a .ico extension which shows on the upper side of the tab bar.
    4. index.html–Angular is a framework that allows us to construct “Single Page Applications”, and index.html is the server’s single page.

In this way, we saw the Introduction to Angular JS in detail.