What is AngularJS? AngularJS is a javascript framework that is mostly used by software developers to create web applications. It has evolved to angular2 which had incorporated object oriented programming in it’s design, making it easy and quicker for web developers.

One of the most recommended ways for one to get started with angular 2 is by using angular cli (a command line that allows building of angular applications using modules from nodejs, and handles most of the structural design for the developer), which enables bootstrapping of a new project.

Step One

The first step is by installing angular cli. This is done by npm. To do this, you have to install npm and nodejs. Follow this link in order to download and install npm and nodejs and select the one that suits your platform.

Open your terminal now and type in this command;

npm install -g @angular/cli

Step Two

After successfully running the above command, you are now able to create a sample new project using angular cli. In order to use the angular cli, you will need to type this command on your terminal; ng This will open the angular cli for you.

Let us now create a sample application. After opening the angular cli, type in the following command;

ng new sample-app

This command created a new application called sample-app for you. This command might take some time, as it will install required packages such as the npm packages. The good thing with this is that it does everything for you, creating an application from scratch that you can even run and edit to a different application.

To prove this, let us go inside the sample-app folder that has been created. You can do this by going to your terminal then using the change directory command (cd) to sample-app folder. In this folder, we can see this folder structure;

Step 3

The third step is to test if you have been successful in creating your sample application. To do this, you will need to run the development server. In the angular cli, change your directory by using the cd command to sample-app and then type the command below:

ng serve ---open

The work of the ng serve command is to launch a browser, watch all your files and then rebuild the application when you make changes while it is still running. The ---open option allows you to open the browser automatically. It can be substituted by -o command. Your sample application will now be open on this url: localhost:4200/. To stop the server, simply use CTRL-C

If you followed the steps above well, your application will run and the result will be a browser window with a message saying app works!.

Understanding the Code

Now that you have come this far, let us dig a little bit deeper to understand what we have here. First of all, we have the index.html file which acts as the point of entry of the application. Its main purpose is to link all your files to javascript and styling file as well as providing the html markup to be used in the browser.

Let us now edit the output that we got above to see where and how to do that. Angular uses something called a component, which acts as the building block in all of its applications. A piece of User Interface that is reusable and has a html element is represented by the component. A component is constituted by a class, a template and interactions. A template is composed of a html code while the class is used to encapsulate the data in a component. The template also uses the interactions.

Your sample-app has a component that was created by the angular cli for you. You can find this component in your sample-app folder, by following this path: src/app/app.component.ts You can use the change directory command cd to get to here.

Since we want to change the message that was displayed, let us now open this component, app.component.ts and edit it. You can do this using your preferred IDE or any editor. After opening the component, you can see that it has the title property app works!.

export class AppComponent {
  title = 'app works!';
}

Edit this to something else, like I am happy learning angular2 by Jackson. as shown below:

export class AppComponent {
  title = 'I am happy learning angular2 by Jackson.';
}

If you had not stopped the server, your application will reload automatically on the browser, and it will display the new message. If you had stopped the server, you will need to start it again by running this command on the angular cli; ng serve ---open and you will see the new message.

Styling

So far, this should be very easy and clear, as well as interesting. But then, you might not be happy with the appearance of that message, and might want to have it look different. Angular cli created another component for you that is handling the style of your application. Going back to the sample-app folder in the src folder, you can see app.component.css.

This is the file that you can edit to change the styling of the message that is displayed on running your application. Let us open this file and try to add styling to something like this;

h1 {
  color: #CF4122;
  font-family: PARMANET MARKER;
  font-size: 300%;
}

Again, if your server is still running, you will see the changes immediately. If not, run your server again by running this command; ng server ---open.

Conclusion

This tutorial is very easy to follow, and complete. It guides you on how to get started with angular2 using the angular cli. This is the best way one can use to start learning angular2.

One can also get started on angular2 using the same angular cli, but then adding --style scss option infront of the ng new sample-app that created your sample-app, to look like this ng new sample-app --style scss. The --style scss option allows you to be able to use both the CSS and SASS preprocessor. Do not worry about this though, it is not very different from what we have just covered.