Steps on How to Setup Angular JS

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:
It will prompt you with some questions:ng new my-angular-app
- Would you like to add Angular routing? (Yes/No)
- Which stylesheet format would you like to use? (CSS, SCSS, etc.)
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:
- Code Editor: Use a code editor like Visual Studio Code with Angular-specific extensions like "Angular Language Service."
- 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!