Welcome to CodeYourCraft's in-depth Angular tutorial! Today, we'll be diving into the ng new command ā a fundamental step in every Angular project. By the end of this lesson, you'll be well-versed in creating your very own Angular applications. šÆ
ng newng new is an Angular CLI command that helps you create a new Angular application. It sets up the project structure, installs necessary dependencies, and configures the environment for development. Let's see how it works step-by-step. š
npm install -g @angular/cliTo create a new Angular application, navigate to your desired project directory in your terminal and run:
ng new my-first-angular-appReplace my-first-angular-app with the name you'd like to give your new project. The ng new command will take a few moments to complete. Once done, you'll see a message like this:
Successfully created project my-first-angular-appNow, let's take a look at the project structure that ng new has created for us. š
my-first-angular-app (root folder)
node_modules (contains dependencies)src (source files)
app (contains application files)
app.module.ts (application module)app.component.ts (default component)app.component.html (default template)app.component.css (default styles)assets (static files like images, fonts, etc.)environments (environment files for development, production, etc.).angular (Angular specific configuration files).gitignore (ignored files for Git)package.json (project metadata and dependencies)tsconfig.json (TypeScript configuration)š” Pro Tip: Familiarize yourself with this structure as it'll be the foundation for every Angular project you create.
To run your new Angular application, navigate to the project directory and run:
cd my-first-angular-app
ng serveAfter a few seconds, you'll see a message:
** NGROK URL: http://127.0.0.1:4200 **Now, open your web browser and visit the given URL to see your Angular application in action! ā
Let's make some changes to the default application to get a feel for how Angular works.
src/app/app.component.html<h1>Welcome to My First Angular App!</h1>ng generate component aboutsrc/app/about/about.component.ts and make some changes to the code:import { Component } from '@angular/core';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent {
title = 'About This App';
}src/app/about/about.component.html and add the following content:<h1>{{ title }}</h1>src/app/app.module.ts and import the newly created AboutComponent:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
@NgModule({
declarations: [
AppComponent,
AboutComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }What is the purpose of the `ng new` command?
That's it for today! You've successfully created and run your first Angular application. In the following lessons, we'll dive deeper into Angular concepts, helping you build powerful, scalable web applications. Stay tuned! šÆ