Welcome To My First Angular 6 Application

Like most languages, ```Hello World``` is the place to start. With this Application, we'll replace ```Hello World``` with ```Welcome to my first Angular 6 application```.

Assuming you have your development environment set up properly.

Step 1: Generating project.

Generate a new Angular project.

open your command prompt or terminal, type ```ng new my-app``` to generate a new Angular Application. Wait a couple of seconds, for the application to be created.

The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app. This can take some time.

Step 2: Starting the development server

Go to project directory ```cd my-app```. While in the project directory, type in ```ng serve -o``` on your terminal.

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files. Using the --open (or just -o) option will automatically open your browser on http://localhost:4200/.

Step 3: Editing your first component

At this stage we have a working app , and our app opened at ```http://localhost:4200/```. We want to change the ```title``` of our app from ``` Welcome to app!!``` to ```Welcome to my first Angular 6 application```.

This is just to demonstrate the development process and how to edit your App content.

In your project structure, you should have ```app.component.ts``` which is our app root component. It has a corresponding ```app.component.html``` and ```app.component.css``` files.

We want to change the title of our app

export class AppComponent { 
 title = 'Welcome to my first Angular 6 application'; 
} 

That's it! You have your first Angular App working!. Care to learn more about Angular project structure? https://angular.io/guide/quickstart#whats-next

Related Posts

0 Comments

12345

    00