Steps on How to Setup Angular JS

0
855

To set up an Angular development environment, you'll need to install a few tools and follow some steps. Here's a detailed guide to get you started:

1. Install Node.js and npm

Angular requires Node.js and npm (Node Package Manager) to work.

  • Install Node.js: Visit Node.js website and download the latest stable version (LTS).
  • Verify installation:
    node -v
    npm -v
    

2. Install Angular CLI

The Angular CLI is a command-line tool for generating and managing Angular applications.

  • Install the Angular CLI globally:
    npm install -g @angular/cli
    
  • Verify installation:
    ng version
    

3. Create a New Angular Project

Once Angular CLI is installed, you can create a new project.

  • Run the following command:
    ng new my-angular-app
    
    It will prompt you with some questions:
    • Would you like to add Angular routing? (Yes/No)
    • Which stylesheet format would you like to use? (CSS, SCSS, etc.)
    Once you've made your selections, Angular CLI will set up the project structure.

4. Navigate to the Project Folder

Once the project is generated, navigate into the project folder:

cd my-angular-app

5. Serve the Application

To run the application on a development server:

ng serve

By default, the application will run on http://localhost:4200/. You can open your browser and navigate to that address.

6. Explore the Project Structure

Here's a quick overview of some key folders and files:

  • src/app/: Contains your application components, services, and modules.
  • src/assets/: For static assets like images.
  • angular.json: Configuration for the Angular CLI.
  • package.json: Lists your project dependencies.

7. Build the Application

When you are ready to deploy the application, you can build it for production:

ng build --prod

This will create an optimized production build in the dist/ directory.

Optional Setup:

  1. Code Editor: Use a code editor like Visual Studio Code with Angular-specific extensions like "Angular Language Service."
  2. Testing: Angular comes with built-in testing frameworks (Jasmine and Karma). Run tests using:
    ng test
    

This will get your Angular environment up and running!