/

April 9, 2024

Get Started With Angular JS: First Angular App with Halton (GDA Africa)

Credit: wezeo.com

Today, we will guide you through a fail-proof process to get started with AngularJS development on Windows and run your first “Hello World” app. We will set up Angular JS Development Environment on Windows, Create an App and Run it on our windows system.

Step 1: Setting Up Your Environment

Install Node.js and npm

AngularJS, like many modern web frameworks, relies on Node.js. npm (Node Package Manager) will be used to install packages and dependencies.

  1. Download Node.js: Visit Node.js official website and download the latest stable version for Windows. This will also install npm.
  2. Install Node.js: Run the downloaded installer and follow the prompts to install Node.js and npm.

Verify Installation

Open a command prompt or PowerShell window and type the following commands to verify that Node.js and npm are correctly installed.

node -v
npm -v

Step 2: Install AngularJS CLI

AngularJS CLI (Command Line Interface) is a tool that allows you to initialize, develop, scaffold, and maintain AngularJS applications.

In your command prompt or PowerShell, run:

npm install -g @angular/cli

This installs the Angular CLI globally on your machine, allowing you to use it from any directory.

Step 3: Create Your AngularJS App

Now that you have Angular CLI installed, you can create a new AngularJS application.

  1. Create a New App: In your command line, navigate to the directory where you want your project to be and run:
ng new hello-world

This command creates a new directory named hello-world with all the necessary Angular files.

  1. Navigate into Your App Directory:
cd hello-world

Step 4: Serve Your Application

Angular CLI comes with a built-in server to run your application locally.

  • Start the Server: In your project directory (hello-world), run:
ng serve

This command compiles the application and starts a web server.

  • Open Your App: Open a web browser and go to http://localhost:4200. You should see your new Angular app running. By default, you’ll see the Angular welcome page.

Step 5: Edit Your App to Display “Hello World”

To customize your app:

  1. Open Your Project in a Text Editor: Any text editor will do, but Visual Studio Code is a popular choice for web development.
  2. Modify the App Component: Navigate to src/app/app.component.html. This is the main HTML template for your app.
  3. Edit the File: Replace the existing code with the following to display “Hello World”:
<h1>Hello World!</h1>
  1. Save Your Changes: After saving, Angular CLI will automatically reload the app in the browser, and you should now see “Hello World!” displayed.

Congratulations!

You’ve successfully set up your development environment, created an AngularJS app, and modified it to display “Hello World”. This is just the beginning of your journey with AngularJS. From here, you can start exploring more complex components, services, and routing to build dynamic single-page applications.

From the same category