ManagedCloud Servers

High performance handled and monitored by us 24/7/365. A complete solution to provide you with our in house expertise 24/7 tailored to your specific needs. We'll setup a bespoke server for your site using the latest tehnologies so you can get the most out of your hardware and get your website loading quickly and reliably. Find out more..

cPanelCloud Servers

Recommended - High performance cloud servers with no technical knowledge required. If you're hosting multiple websites already and you're looking to consolidate, or if you're looking to isolate yourself from the shared hosting environment but you don't have the time or knoweldge to manage a server, then the Managed cPanel Servers are for you. Find out more..

UnmanagedCloud Servers

Our unmanaged range gives you complete control at rock bottom prices and our cloud platform boasts super fast multipath 40Gb/s network, the latest Intel Xeon V3 CPUs and enterprise grade redundant SSDs. If you're a sysadmin look no further, we offer some of the best specification to price ratio servers available. Find out more..

Need Web Hosting? Try ours, it's fast, reliable and feature loaded with support you can depend on. From £1.60 / month.

View Plans

A Tutorial on Getting Started With Angular 2 and TypeScript

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.

Need Web Hosting? Try ours, it's fast, reliable and feature loaded with support you can depend on. From £1.60 / month.

View Plans