Creating a hello world web app with angular.

So this is my first time working with angular but after working with Vue.js its understandable. Angular uses typescript and has components, modules and classes. In this tutorial I will create a simple hello world application using angular cli to create the core files necessary.

Let get started. You can navigate to the angular cli site to see the instructions to install it. Check that out here. The instructions are pretty straight forward.

npm install -g @angular/cli
ng new angular-site
cd angular-site
ng serve

When you execute ng new angular-site you might have to answer some questions about routing and CSS settings. For me I choose no router and used plain CSS no SASS or anything else.

When you execute ng serve you should see which port your app is running on. For me it was http://localhost:4200. Navigate there to view the welcome screen.

Most of the code we will be focused on can be found in the app folder under src.

angular-site
  /src
     /app
        app.component.html
        app.component.ts
        app.module.ts

Lets look at app.component.html. You will notice the title variable with two curly braces.

  <h1&gt;
    Welcome to {{ title }}!
  </h1&gt;

This is being passed from the component class. Lets go to app.component.ts

export class AppComponent {
  title = 'Angular Site';
}

We have a attribute in our class called tittle. We have access to class attributes and functions in our component.html file from our component class. Lets change the title attribute to hello world.

Hello World!

You site should reload automatically.

Well done! You have created your first angular app.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s