Welcome to this tutorial on managing AngularJS projects using Angular CLI. The goal of this tutorial is to introduce you to the Angular CLI tool and guide you through the basic operations such as creating, serving, and running an Angular project.
By the end of this tutorial, you will learn:
- How to install Angular CLI
- Creating a new Angular project
- Serving the project locally
Prerequisites:
- Basic knowledge of JavaScript and AngularJS
- Node.js and npm (Node Package Manager) installed on your local development machine
Angular CLI is the command-line interface for Angular. It is used to automate your development workflow. It helps you to create a new Angular application, generate components, directives, services, etc.
Step 1: Installing Angular CLI
To install Angular CLI, run the following command in your terminal:
npm install -g @angular/cli
-g flag is used to install the package globally.
Step 2: Creating a New Angular Project
To create a new Angular project, navigate to the directory where you want to create your project and run:
ng new my-app
Replace my-app with your desired project name.
Step 3: Serving the Project Locally
To serve the project locally, navigate to the project directory and run:
cd my-app
ng serve
The ng serve command builds the application and starts a web server.
Example 1: Creating a new component
To generate a new component, run:
ng generate component my-component
This will create a new component directory, my-component, with four files:
my-component.component.ts: This is the main file where your component's logic will go.my-component.component.html: This is the template file for your component.my-component.component.css: This is the stylesheet for your component.my-component.component.spec.ts: This is the test file for your component.Example 2: Building the application
To build your Angular application for production, run:
ng build --prod
This will generate a dist/ directory with everything you need to deploy to a server.
In this tutorial, we have covered how to manage Angular projects with CLI. We have learned how to create a new Angular project, generate a component, and serve the project locally.
To continue your learning journey, you can explore more about Angular CLI commands, how to create services, routing, etc.
Exercise 1: Create a new Angular project and serve it locally.
Solution:
Create the project using ng new exercise-app. Then navigate to the project directory using cd exercise-app and serve the application using ng serve.
Exercise 2: Create a new component named 'test' and inspect the generated files.
Solution:
Generate the component using ng generate component test. This will create a new directory named 'test' with four files: test.component.ts, test.component.html, test.component.css, and test.component.spec.ts.
Exercise 3: Build your project for production.
Solution:
Build the application using ng build --prod. This will create a 'dist/' directory with the production-ready files.
Remember, practice is key to mastering any skill, so keep practicing. Happy coding!