Creating an Angular Project using the Angular CLI is nothing easier. You only need (after installing Angular CLI):
- Navigate to the directory where you want to create the Angular project
- Open terminal in macOS, Linux or command-line in Window
- Enter the following statement:
|
1 |
ng new <project_name> |
with project_name is the name of the Angular project, then we can create an Angular project.
For example, run the following command:
|
1 |
ng new angular-example |
It will ask you whether you want to add the Angular Routing for your application or not?
Depending on your needs, please enter y or N! Here, I just created a simple project so I will enter N.
Next, it will ask us about the style sheet format you want to use, including CSS, SCSS, Sass, Less or Stylus.
You want to use which format, let press the up and down button to select it.
I will choose default CSS and press Enter.
The result will be:
At this point, if you check the directory of the Angular project, you will see the results as follows:
To run this project, just go to the root of the project and run the following command:
|
1 |
ng serve |
By default, Angular CLI will start our application at port 4200. So if you have access to http://localhost:4200/, you will see the following result:
If you try to modify the file app.component.ts in the src/app of the Angular project from:
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-example'; } |
into:
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Huong Dan Java'; } |
the browser will automatically refresh to:
Here, you can start building an Angular application.
