Managing Angular Projects with CLI

1. Introduction

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

2. Step-by-Step Guide

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.

3. Code Examples

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.

4. Summary

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.

5. Practice Exercises

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!